好久沒(méi)有更新博客了，現(xiàn)在終于有時(shí)間寫(xiě)了，以后盡量周更

ES6模塊

習(xí)慣使用Django框架后，對(duì)于模塊化編程的好處想必大家都深有體會(huì)，尤其是當(dāng)你曾經(jīng)將大量的邏輯寫(xiě)在同一個(gè)文件甚至同一個(gè)函數(shù)中，到了某個(gè)時(shí)間點(diǎn)需要去修改這個(gè)程序中某個(gè)功能的時(shí)候。

在JavaScript中，我們也可以利用模塊分割代碼，優(yōu)化我們的應(yīng)用結(jié)構(gòu)。以之前的代碼為例：

import {  Switch,  Link,  Route} from "react-router-dom"import About from "./About"import ArticleDetail from "./ArticleDetail"

ES6有import與export語(yǔ)句對(duì)應(yīng)導(dǎo)入與導(dǎo)出，值得注意的是，以上代碼中可以看到import語(yǔ)句有兩種不同的寫(xiě)法，讓我們先來(lái)看看如何導(dǎo)出：

// a.jsconst mode = 'default'const age = 54export {mode, age}?// 也可以在定義變量時(shí)直接導(dǎo)出export foo = () => {    console.log("hello")}?// 以上導(dǎo)出方式對(duì)應(yīng)的導(dǎo)入import { mode, age } from './b.js'?// 可以使用通配符*與as將a中導(dǎo)出的全部?jī)?nèi)容導(dǎo)入為一個(gè)對(duì)象import * as Foo from './b.js'?// 使用as避免命名沖突或避免過(guò)長(zhǎng)的名稱import { mode as aMode } from './b.js'

以上導(dǎo)出方式對(duì)應(yīng)了我們之前代碼中需要花括號(hào)的導(dǎo)入方式，還有一種default語(yǔ)句：

const User = {    username: 'elliot',    email: 'hack00mind@gmail.com'}?// 注意一個(gè)文件中只能有一個(gè)export defaultexport default User?// 但是可以與export一起用export const year = 2020?// 導(dǎo)入default的名稱可以省略花括號(hào)import User, { year } from './foo.js'

代碼組織

在React中，我們將頁(yè)面拆分成多個(gè)不同的組件，我們已經(jīng)大致將不同的功能、不同頁(yè)面的組件放到了不同文件中，這些代碼都在src目錄下，但在工作中，隨著業(yè)務(wù)的增長(zhǎng)，我們要考慮將組件拆分到更多不同的模塊中去。

src├── About.js├── App.css├── App.js├── App.test.js├── ArticleDetail.css├── ArticleDetail.js├── ArticleList.css├── ArticleList.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js

現(xiàn)在我們的文件已經(jīng)略顯凌亂了，雖然我們已經(jīng)將一些不同的組件拆分到了不同的文件中，但是不同名稱的不同文件混在了一起，看上去還是不舒服。

我們可以將同一個(gè)組件相關(guān)的代碼文件，樣式文件，測(cè)試文件放到同一個(gè)文件夾中：

├── About│   └── index.js├── App│   ├── index.css│   ├── test.js│   └── index.js├── ArticleDetail│   ├── index.css│   └── index.js├── ArticleList│   ├── index.css│   └── index.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js?

現(xiàn)在我們的文件在結(jié)構(gòu)上要更加清晰些，或者還可以如下所示：

├── components│   ├── About│   │   └── index.js│   ├── App│   │   ├── index.css│   │   ├── test.js│   │   └── index.js│   ├── ArticleDetail│   │   ├── index.css│   │   └── index.js│   └── ArticleList│       ├── index.css│       └── index.js├── constants│   └── index.js├── index.css├── index.js├── logo.svg├── serviceWorker.js└── setupTests.js

注意到原本的組件文件名都被改成了index.js，這是node項(xiàng)目中入口文件的默認(rèn)文件名，當(dāng)然你可以改成自己想要的其它名稱。當(dāng)使用這個(gè)默認(rèn)名稱時(shí)，在導(dǎo)入時(shí)可以省略index.js：

import React from 'react'import {  Switch,  Link,  Route} from "react-router-dom"?// 注意文件位置變動(dòng)，引入時(shí)相對(duì)路徑要修改import './App.css'import ArticleList from "../ArticleList"import About from "../About"import ArticleDetail from "../ArticleDetail"

考慮下列場(chǎng)景：

/*文件結(jié)構(gòu)如下./Buttons├── CancelButton.js├── index.js└── SubmitButton.js*/?// Buttons/index.jsimport CancelButton from './CancelButton'import SubmitButton from './SubmitButton'?export { CancelButton,    SubmitButton,}?// 在其他文件中可以如此引入import { CancelButton, SubmitButton } from '../Buttons'