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

ES6模塊

習(xí)慣使用Django框架后，對于模塊化編程的好處想必大家都深有體會，尤其是當(dāng)你曾經(jīng)將大量的邏輯寫在同一個文件甚至同一個函數(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īng)導(dǎo)入與導(dǎo)出，值得注意的是，以上代碼中可以看到import語句有兩種不同的寫法，讓我們先來看看如何導(dǎo)出：

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

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

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

代碼組織

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

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)將一些不同的組件拆分到了不同的文件中，但是不同名稱的不同文件混在了一起，看上去還是不舒服。

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

├── 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項目中入口文件的默認(rèn)文件名，當(dāng)然你可以改成自己想要的其它名稱。當(dāng)使用這個默認(rèn)名稱時，在導(dǎo)入時可以省略index.js：

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

考慮下列場景：

/*文件結(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'