摘要：所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到所有依賴加載完成之后前置依賴，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。如果將前面的代碼改寫(xiě)成形式，就是下面這樣定義了一個(gè)文件，該文件依賴模塊，當(dāng)模塊加載完畢之后執(zhí)行回調(diào)函數(shù)，這里并沒(méi)有暴露任何變量。

模塊化是我們?nèi)粘ｉ_(kāi)發(fā)都要用到的基本技能，使用簡(jiǎn)單且方便，但是很少人能說(shuō)出來(lái)但是的原因及發(fā)展過(guò)程?，F(xiàn)在通過(guò)對(duì)比不同時(shí)期的js的發(fā)展，將JavaScript模塊化串聯(lián)起來(lái)整理學(xué)習(xí)記憶。

技術(shù)的誕生是為了解決某個(gè)問(wèn)題，模塊化也是。在js模塊化誕生之前，開(kāi)發(fā)者面臨很多問(wèn)題：隨著前端的發(fā)展，web技術(shù)日趨成熟，js功能越來(lái)越多，代碼量也越來(lái)越大。之前一個(gè)項(xiàng)目通常各個(gè)頁(yè)面公用一個(gè)js，但是js逐漸拆分，項(xiàng)目中引入的js越來(lái)越多：

當(dāng)年我剛剛實(shí)習(xí)的時(shí)候，項(xiàng)目中的js就是類(lèi)似這樣，這樣的js引入造成了問(wèn)題：

全局變量污染：各個(gè)文件的變量都是掛載到window對(duì)象上，污染全局變量。

變量重名：不同文件中的變量如果重名，后面的會(huì)覆蓋前面的，造成程序運(yùn)行錯(cuò)誤。

文件依賴順序：多個(gè)文件之間存在依賴關(guān)系，需要保證一定加載順序問(wèn)題嚴(yán)重。

這些問(wèn)題嚴(yán)重干擾開(kāi)發(fā)，也是日常開(kāi)發(fā)中經(jīng)常遇到的問(wèn)題。

我覺(jué)得用樂(lè)高積木來(lái)比喻模塊化再好不過(guò)了。每個(gè)積木都是固定的顏色形狀，想要組合積木必須使用積木凸起和凹陷的部分進(jìn)行連接，最后多個(gè)積木累積成你想要的形狀。

模塊化其實(shí)是一種規(guī)范，一種約束，這種約束會(huì)大大提升開(kāi)發(fā)效率。將每個(gè)js文件看作是一個(gè)模塊，每個(gè)模塊通過(guò)固定的方式引入，并且通過(guò)固定的方式向外暴露指定的內(nèi)容。

按照js模塊化的設(shè)想，一個(gè)個(gè)模塊按照其依賴關(guān)系組合，最終插入到主程序中。

模塊化這種規(guī)范提出之后，得到社區(qū)和廣大開(kāi)發(fā)者的響應(yīng)，不同時(shí)間點(diǎn)有多種實(shí)現(xiàn)方式。我們舉個(gè)例子：a.js

// a.js
var aStr = "aa";
var aNum = cNum + 1;

b.js

// b.js
var bStr = aStr + " bb";

c.js

// c.js
var cNum = 0;

index.js

// index.js
console.log(aNum, bStr);

四份文件，不同的依賴關(guān)系（a依賴c，b依賴a，index依賴a b）在沒(méi)有模塊化的時(shí)候我們需要頁(yè)面中這樣：

嚴(yán)格保證加載順序，否則報(bào)錯(cuò)。

這是最容易想到的也是最簡(jiǎn)便的解決方式，早在模塊化概念提出之前很多人就已經(jīng)使用閉包的方式來(lái)解決變量重名和污染問(wèn)題。

這樣每個(gè)js文件都是使用IIFE包裹的，各個(gè)js文件分別在不同的詞法作用域中，相互隔離，最后通過(guò)閉包的方式暴露變量。每個(gè)閉包都是多帶帶一個(gè)文件，每個(gè)文件仍然通過(guò)script標(biāo)簽的方式下載，標(biāo)簽的順序就是模塊的依賴關(guān)系。

上面的例子我們用該方法修改下寫(xiě)法：

a.js

// a.js
var a = (function(cNum){
   var aStr = "aa";
   var aNum = cNum + 1; 
    
    return {
       aStr: aStr,
       aNum: aNum
    };
})(cNum);

b.js

// b.js
var bStr = (function(a){
   var bStr = a.aStr + " bb";
    
   return bStr;
})(a);

c.js

// c.js
var cNum = (function(){
   var cNum = 0;
    
   return cNum;
})();

index.js

;(function(a, bStr){
    console.log(a.aNum, bStr);
})(a, bStr)

這種方法下仍然需要在入口處嚴(yán)格保證加載順序：

這種方式最簡(jiǎn)單有效，也是后續(xù)其他解決方案的基礎(chǔ)。這樣做的意義：

各個(gè)js文件之間避免了變量重名干擾，并且最少的暴露變量，避免全局污染。

模塊外部不能輕易的修改閉包內(nèi)部的變量，程序的穩(wěn)定性增加。

模塊與外部的連接通過(guò)IIFE傳參，語(yǔ)義化更好，清晰地知道有哪些依賴。

不過(guò)各個(gè)模塊的依賴關(guān)系仍然要通過(guò)加裝script的順序來(lái)保證。

一開(kāi)始一些人在閉包的解決方案上做出了規(guī)范約束：每個(gè)js文件始終返回一個(gè)object，將內(nèi)容作為object的屬性。

比如上面的例子中b.js

// b.js
var b = (function(a){
   var bStr = a.aStr + " bb";
    
   return {
       bStr: bStr
   };
})(a);

及時(shí)返回的是個(gè)值，也要用object包裹。后來(lái)很多人開(kāi)始使用面向?qū)ο蟮姆绞介_(kāi)發(fā)插件：

;(function($){
    var LightBox = function(){
        // ...
    };
    
    LightBox.prototype = {
        // ....
    };
    
    window["LightBox"] = LightBox;
})($);

使用的時(shí)候：

var lightbox = new LightBox();

當(dāng)年很多人都喜歡這樣開(kāi)發(fā)插件，并且認(rèn)為能寫(xiě)出這種插件的水平至少不低。這種方法只是閉包方式的小改進(jìn)，約束js文件返回必須是對(duì)象，對(duì)象其實(shí)就是一些個(gè)方法和屬性的集合。這樣的優(yōu)點(diǎn)：

規(guī)范化輸出，更加統(tǒng)一的便于相互依賴和引用。

使用‘類(lèi)’的方式開(kāi)發(fā)，便于后面的依賴進(jìn)行擴(kuò)展。

本質(zhì)上這種方法只是對(duì)閉包方法的規(guī)范約束，并沒(méi)有做什么根本改動(dòng)。

早期雅虎出品的一個(gè)工具，模塊化管理只是一部分，其還具有JS壓縮、混淆、請(qǐng)求合并（合并資源需要server端配合）等性能優(yōu)化的工具，說(shuō)其是現(xiàn)有JS模塊化的鼻祖一點(diǎn)都不過(guò)分。

// YUI - 編寫(xiě)模塊
YUI.add("dom", function(Y) {
  Y.DOM = { ... }
})

// YUI - 使用模塊
YUI().use("dom", function(Y) {
  Y.DOM.doSomeThing();
  // use some methods DOM attach to Y
})

// hello.js
YUI.add("hello", function(Y){
    Y.sayHello = function(msg){
        Y.DOM.set(el, "innerHTML", "Hello!");
    }
},"3.0.0",{
    requires:["dom"]
})

// main.js
YUI().use("hello", function(Y){
    Y.sayHello("hey yui loader");
})

YUI的出現(xiàn)令人眼前一新，他提供了一種模塊管理方式：通過(guò)YUI全局對(duì)象去管理不同模塊，所有模塊都只是對(duì)象上的不同屬性，相當(dāng)于是不同程序運(yùn)行在操作系統(tǒng)上。YUI的核心實(shí)現(xiàn)就是閉包，不過(guò)好景不長(zhǎng)，具有里程碑式意義的模塊化工具誕生了。

2009年Nodejs發(fā)布，其中Commonjs是作為Node中模塊化規(guī)范以及原生模塊面世的。Node中提出的Commonjs規(guī)范具有以下特點(diǎn)：

原生Module對(duì)象，每個(gè)文件都是一個(gè)Module實(shí)例

文件內(nèi)通過(guò)require對(duì)象引入指定模塊

所有文件加載均是同步完成

通過(guò)module關(guān)鍵字暴露內(nèi)容

每個(gè)模塊加載一次之后就會(huì)被緩存

模塊編譯本質(zhì)上是沙箱編譯

由于使用了Node的api，只能在服務(wù)端環(huán)境上運(yùn)行

基本上Commonjs發(fā)布之后，就成了Node里面標(biāo)準(zhǔn)的模塊化管理工具。同時(shí)Node還推出了npm包管理工具，npm平臺(tái)上的包均滿足Commonjs規(guī)范，隨著Node與npm的發(fā)展，Commonjs影響力也越來(lái)越大，并且促進(jìn)了后面模塊化工具的發(fā)展，具有里程碑意義的模塊化工具。之前的例子我們這樣改寫(xiě)：

a.js

// a.js
var c = require("./c");

module.exports = {
    aStr: "aa",
    aNum: c.cNum + 1
};

b.js

// b.js
var a = require("./a");

exports.bStr = a.aStr + " bb";

c.js

// c.js
exports.cNum = 0;

入口文件就是 index.js

var a = require("./a");
var b = require("./b");

console.log(a.aNum, b.bStr);

可以直觀的看到，使用Commonjs管理模塊，十分方便。Commonjs優(yōu)點(diǎn)在于：

強(qiáng)大的查找模塊功能，開(kāi)發(fā)十分方便

標(biāo)準(zhǔn)化的輸入輸出，非常統(tǒng)一

每個(gè)文件引入自己的依賴，最終形成文件依賴樹(shù)

模塊緩存機(jī)制，提高編譯效率

利用node實(shí)現(xiàn)文件同步讀取

依靠注入變量的沙箱編譯實(shí)現(xiàn)模塊化

這里補(bǔ)充一點(diǎn)沙箱編譯：require進(jìn)來(lái)的js模塊會(huì)被Module模塊注入一些變量，使用立即執(zhí)行函數(shù)編譯，看起來(lái)就好像：

(function (exports, require, module, __filename, __dirname) {
    //原始文件內(nèi)容
})();

看起來(lái)require和module好像是全局對(duì)象，其實(shí)只是閉包中的入?yún)?，并不是真正的全局?duì)象。之前專(zhuān)門(mén)整理探究過(guò) Node中的Module源碼分析，也可以看看阮一峰老師的require()源碼解讀，或者廖雪峰老師的CommonJS規(guī)范。

Commonjs的誕生給js模塊化發(fā)展有了重要的啟發(fā)，Commonjs非常受歡迎，但是局限性很明顯：Commonjs基于Node原生api在服務(wù)端可以實(shí)現(xiàn)模塊同步加載，但是僅僅局限于服務(wù)端，客戶端如果同步加載依賴的話時(shí)間消耗非常大，所以需要一個(gè)在客戶端上基于Commonjs但是對(duì)于加載模塊做改進(jìn)的方案，于是AMD規(guī)范誕生了。

AMD是"Asynchronous Module Definition"的縮寫(xiě)，意思就是"異步模塊定義"。它采用異步方式加載模塊，模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句，都定義在一個(gè)回調(diào)函數(shù)中，等到所有依賴加載完成之后（前置依賴），這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

AMD與Commonjs一樣都是js模塊化規(guī)范，是一套抽象的約束，與2009年誕生。文檔這里。該約束規(guī)定采用require語(yǔ)句加載模塊，但是不同于CommonJS，它要求兩個(gè)參數(shù)：

require([module], callback);

第一個(gè)參數(shù)[module]，是一個(gè)數(shù)組，里面的成員就是要加載的模塊；第二個(gè)參數(shù)callback，則是加載成功之后的回調(diào)函數(shù)。如果將前面的代碼改寫(xiě)成AMD形式，就是下面這樣：

require(["math"], function (math) {

    math.add(2, 3);

});

定義了一個(gè)文件，該文件依賴math模塊，當(dāng)math模塊加載完畢之后執(zhí)行回調(diào)函數(shù)，這里并沒(méi)有暴露任何變量。不同于Commonjs，在定義模塊的時(shí)候需要使用define函數(shù)定義：

define(id?, dependencies?, factory);

define方法與require類(lèi)似，id是定義模塊的名字，仍然會(huì)在所有依賴加載完畢之后執(zhí)行factory。

RequireJs是js模塊化的工具框架，是AMD規(guī)范的具體實(shí)現(xiàn)。但是有意思的是，RequireJs誕生之后，推廣過(guò)程中產(chǎn)生的AMD規(guī)范。文檔這里。

RequireJs有兩個(gè)最鮮明的特點(diǎn)：

依賴前置：動(dòng)態(tài)創(chuàng)建

RequireJs當(dāng)年在國(guó)內(nèi)非常受歡迎，主要是以下優(yōu)點(diǎn)：

define(id?, dependencies?, factory);

a1
a2
b1
b2
c1
c2

a1
a2
b1
b2
c1
c2
inner a1
inner c1 
inner b1
index

import {cNum} from "./c";

export default {
    aStr: "aa",
    aNum: cNum + 1
};

import {aStr} from "./a";

export const bStr = aStr + " bb";

export const bNum = 0;

import {aNum} from "./a";
import {bStr} from "./b";

console.log(aNum, bStr);

// counter.js
exports.count = 0
setTimeout(function () {
  console.log("increase count to", ++exports.count, "in counter.js after 500ms")
}, 500)

// commonjs.js
const {count} = require("./counter")
setTimeout(function () {
  console.log("read count after 1000ms in commonjs is", count)
}, 1000)

//es6.js
import {count} from "./counter"
setTimeout(function () {
  console.log("read count after 1000ms in es6 is", count)
}, 1000)

?  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
?  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1