摘要：模塊什么是模塊什么是模塊化玩過游戲的朋友應該知道，一把裝配完整的步槍，一般是槍身消音器倍鏡握把槍托。更重要的是，其它大部分語言都支持模塊化。這一點與規范完全不同。模塊輸出的是值的緩存，不存在動態更新。

玩過FPS游戲的朋友應該知道，一把裝配完整的M4步槍，一般是槍身+消音器+倍鏡+握把+槍托。

如果把M4步槍看成是一個頁面的話，那么我們可以做如下類比
槍身 ->

OK，你剛才做了一件事情，就是把m4步槍拆成了五個部分，你拆分的每一個部分就是一個模塊【module】，你拆分的這個過程就是模塊化【modularization】。

模塊化是一種編程思想，其核心就是拆分任務，把復雜問題簡單化，這樣一來既方便多人分工協作，又可以幫助我們迅速定位問題

方便多人分工協作 —— 可以不同的人開發不同的模塊，再組合，大大增加團隊效率

幫助我們迅速定位問題 —— 后坐力太大，那八成是槍托或握把的問題；聲音過大，那八成是消音器的問題。

下面用一個小栗子講一講模塊化的發展史

龔先生和棚先生一起接了一個項目，他們倆需要分別實現一些功能，很簡單，就是Console出來自己的變量a

于是他們倆一合計，安排龔先生的代碼多帶帶放在script1.js里寫，棚先生的代碼多帶帶放在script2.js里寫，然后用script標簽分別引入

// script1.js文件

var a = 1
console.log(a)

// script2.js文件

var a = 2
console.log(a)

很快他們遇到了第一個問題 —— 變量命名沖突
尤其是包含了異步的時候，會出現如下情況

// script1.js文件

var a = 1
setTimeout(()=>{
  console.log(a)  // 我們想console出來1，卻console出了2
},1000)

// script2.js文件

var a = 2
console.log(a)

上面的問題明顯是由于a是一個全局變量導致的，所以解決思路也很明確——造一個局部變量唄

ES5時代使用立即執行函數制造局部變量

// script1.js文件
!function(){
    var a = 1
    setTimeout(()=>{
      console.log(a)  // 這下是2了
    },1000)
}()
// 下面有5000行代碼

// script2.js文件

console.log(2)

ES6時代直接使用塊級作用域+let

// script1.js文件
{
    let a = 1
    setTimeout(()=>{
      console.log(a)  // 這下是2了
    },1000)
}

// script2.js文件
{
    let a = 2
    console.log(a)
}

后來公司招了一個前端大佬，說現在只能由他來控制什么時候console變量，于是他新建了一個control.js文件
并通過window對象連接script1.js和scirpt2.js

// script1.js文件
{
    let a = 1
    window.module1 = function() {
        console.log(a)
    }
}

// script2.js文件
{
    let a = 2
    window.module2 = function() {
        console.log(a)
    }
}

// control.js文件
setTimeout(()=>{
    window.module1()
},1000)

window.module2()

這個時候，非常重要的一點就是window是一個全局變量并且充當了一個公用倉庫，這個倉庫有兩個關鍵作用，存【導出】和取【依賴】

// script1.js文件
{
    let a = 1
    // 把這個函數存放進window，就是導出到window
    window.module1 = function() {
        console.log(a)
    }
}

// control.js文件
setTimeout(()=>{
    // 我們從window里取出module1函數進行調用，就是依賴了script1.js文件
    window.module1()
},1000)

window.module2()

煩人的產品對需求又進行了更改，給了一個name.js文件

// name.js文件
window.names = ["gongxiansheng","pengxiansheng"]

要求現在龔先生和棚先生需要Console出自己的名字
這還不簡單？幾秒鐘寫好

// script1.js文件
{
    window.module1 = function() {
        console.log(window.names[0])
    }
}

// script2.js文件
{
    window.module2 = function() {
        console.log(window.names[1])
    }
}

// control.js文件
setTimeout(()=>{
    window.module1()
},1000)

window.module2()

但很快他們發現，console出來的都是undefined
前端大佬一眼看出了問題，對他們倆說
你們依賴的代碼一定要在你們自己的代碼前引入，不然是取不到值的；你看我的control.js是不是在你們倆的代碼后面引入的，因為我用到了你們倆的代碼了呀
噢噢，原來是js文件加載順序問題，改一下吧

但是在人多了以后，我們到時候會搞不清楚到底誰依賴了誰，保險起見只能全部都加載，性能浪費了太多，前端大佬搖頭嘆息道

變量沖突

要用window連接各個模塊

依賴需要全部加載

還要TMD注意加載順序

模塊化是ES6的最大的亮點之一，因為在ES6之前的語法里從未有過模塊化的體系，這對開發大型的、復雜的項目形成了巨大障礙。因為我們無法對項目進行拆分，無法更好地進行多人協作開發。更重要的是，其它大部分語言都支持模塊化。

既然語言不支持，那么如何將模塊化引入JS呢？

前端社區就自己制定了一些模塊加載方案——這也是CommonJS【服務器】和AMD、CMD【瀏覽器】的由來。

但是現在ES6引入了模塊化的功能，實現起來非常簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。

import和export語法較為簡單，大家去MDN可以看非常詳細的講解，筆者在這里知識用注釋簡單介紹一下

// 命名導出
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName() {...}
export class ClassName {...}

// 默認導出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 將其它模塊內的導出作為當前文件的導出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

import defaultExport from "module-name"; // 導入默認默認變量
import * as name from "module-name"; // 將模塊內所有變量導出，并掛載到name下【name是一個module對象】。什么要有as——為了防止export出來的變量命名沖突
import { export } from "module-name"; // 導入某一個變量
import { export as alias } from "module-name"; // 導入某一個變量并重命名
import { export1 , export2 } from "module-name"; // 導入兩個變量
import { export1 , export2 as alias2 , [...] } from "module-name"; // 導入多個變量，同時可以給導入的變量重命名
import defaultExport, { export [ , [...] ] } from "module-name"; // 導入默認變量和多個其它變量
import defaultExport, * as name from "module-name"; // 導入默認變量并重新命名
import "module-name"; // 導入并加載該文件【注意文件內的變量必須要通過export才能被使用】
var promise = import(module-name); // 異步的導入

// name.js文件
let names = ["gongxiansheng","pengxiansheng"]
export default names

// script1.js
import names from "./name.js"

let module1 = function () {
  console.log(names[0])
}
export default module1

// script2.js
import names from "./name.js"

let module2 = function() {
  console.log(names[1])
}
export default module2

// control.js
import module1 from "./script1.js"
import module2 from "./script2.js"

setTimeout(() => {
  module1()
}, 1000)
module2()

其實就是按照數據類型里的引用類型的概念去理解。
這一點與 CommonJS 規范完全不同。
CommonJS 模塊輸出的是值的緩存，不存在動態更新。

// module1.js
export var foo = "bar";
setTimeout(() => foo = "baz", 500);

// module2.js
import {foo} from "./module1.js"
console.log(foo)
setTimeout(() => console.log(foo), 1000);

// console的結果
// bar
// baz

// 報錯
{
  export let foo = "bar";
}

console.log(foo)
import {foo} from "./script1.js"

參考資料：ECMAScript 6 入門

本文純屬原創，為了方便大家理解，小故事，小栗子都是筆者自己想的。如果您覺得對你有幫助，麻煩給個贊，給作者灰暗的生活揮灑揮灑積極向上的正能量，謝謝啦^_^。