模塊化是一個語言膨脹的必經(jīng)之路毡惜，它能夠幫助開發(fā)者拆分和組織代碼弯囊。
Module模式
在模塊化規(guī)范形成之前潘明，JS開發(fā)者使用Module設(shè)計模式來解決JS全局作用域的污染問題蛋欣。Module模式最初被定義為一種在傳統(tǒng)軟件工程中為類提供私有和公有封裝的方法寡夹。在JavaScript中处面，Module模式使用匿名函數(shù)自調(diào)用 (閉包)來封裝，通過自定義暴露行為來區(qū)分私有成員和公有成員菩掏。
let myModule = (function (window) {
let moduleName = 'module' // private
// public
function setModuleName(name) {
moduleName = name
}
// public
function getModuleName() {
return moduleName
}
return { setModuleName, getModuleName } // 暴露行為
})(window)
上面例子是Module模式的一種寫法魂角，它通過閉包的特性打開了一個新的作用域，緩解了全局作用域命名沖突和安全性的問題智绸。但是野揪，開發(fā)者并不能夠用它來組織和拆分代碼，于是乎便出現(xiàn)了以此為基石的模塊化規(guī)范瞧栗。
模塊化規(guī)化
1. CommonJS
CommonJS主要用在Node開發(fā)上斯稳，每個文件就是一個模塊，沒個文件都有自己的一個作用域迹恐。通過module.exports暴露public成員挣惰。例如：
// 文件名：x.js
let x = 1;
function add() {
x += 1;
return x;
}
module.exports.x = x;
module.exports.add = add;
此外，CommonJS通過require()引入模塊依賴，require函數(shù)可以引入Node的內(nèi)置模塊憎茂、自定義模塊和npm等第三方模塊珍语。
// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x); // 1
console.log(xm.add()); // 2
console.log(xm.x); // 1
從上面代碼我們可以看出，require函數(shù)同步加載了x.js唇辨，并且返回了module.exports輸出字面量的拷貝值廊酣。可能有人會問module.exports.x = x;不是賦值嗎赏枚，怎么肥事呢亡驰？我們說，Module模式是模塊化規(guī)范的基石饿幅，CommonJS也是對Module模式的一種封裝凡辱。我們完全可以用Module模式來實現(xiàn)上面的代碼效果：
let xModule = (function (){
let x = 1;
function add() {
x += 1;
return x;
}
return { x, add };
})();
let xm = xModule;
console.log(xm.x); // 1
console.log(xm.add()); // 2
console.log(xm.x); // 1
通過Module模式模擬的CommonJS原理，我們就可以很好的解釋CommonJS的特性了栗恩。因為CommonJS需要通過賦值的方式來獲取匿名函數(shù)自調(diào)用的返回值透乾，所以require函數(shù)在加載模塊是同步的。然而CommonJS模塊的加載機制局限了CommonJS在客戶端上的使用磕秤，因為通過HTTP同步加載CommonJS模塊是非常耗時的乳乌。
2. AMD和CMD
2.1 AMD
// 定義AMD規(guī)范的模塊
define([function() {
return 模塊
})
區(qū)別于CommonJS，AMD規(guī)范的被依賴模塊是異步加載的市咆，而定義的模塊是被當(dāng)作回調(diào)函數(shù)來執(zhí)行的汉操，依賴于require.js模塊管理工具庫。當(dāng)然蒙兰，AMD規(guī)范不是采用匿名函數(shù)自調(diào)用的方式來封裝磷瘤，我們依然可以利用閉包的原理來實現(xiàn)模塊的私有成員和公有成員：
define(['module1', 'module2'], function(m1, m2) {
let x = 1;
function add() {
x += 1;
return x;
}
return { add };
})
2.2 CMD
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。AMD 推崇依賴前置搜变，CMD 推崇依賴就近采缚。
define(function(require, exports, module) {
// 同步加載模塊
var a = require('./a');
a.doSomething();
// 異步加載一個模塊，在加載完成時挠他，執(zhí)行回調(diào)
require.async(['./b'], function(b) {
b.doSomething();
});
// 對外暴露成員
exports.doSomething = function() {};
});
// 使用模塊
seajs.use('path');
CMD集成了CommonJS和AMD的的特點扳抽，支持同步和異步加載模塊。CMD加載完某個依賴模塊后并不執(zhí)行殖侵，只是下載而已摔蓝，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執(zhí)行對應(yīng)的模塊愉耙，這樣模塊的執(zhí)行順序和書寫順序是完全一致的贮尉。因此，在CMD中require函數(shù)同步加載模塊時沒有HTTP請求過程朴沿。
ES6 module
ES6的模塊化已經(jīng)不是規(guī)范了猜谚，而是JS語言的特性败砂。隨著ES6的推出，AMD和CMD也隨之成為了歷史魏铅。ES6模塊與模塊化規(guī)范相比昌犹，有兩大特點：
- 模塊化規(guī)范輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用览芳。
- 模塊化規(guī)范是運行時加載斜姥，ES6 模塊是編譯時輸出接口。
模塊化規(guī)范輸出的是一個對象沧竟，該對象只有在腳本運行完才會生成铸敏。而 ES6 模塊不是對象，ES6 module 是一個多對象輸出悟泵，多對象加載的模型杈笔。從原理上來說，模塊化規(guī)范是匿名函數(shù)自調(diào)用的封裝糕非，而ES6 module則是用匿名函數(shù)自調(diào)用去調(diào)用輸出的成員蒙具。兩者的區(qū)別可參考Babel and CommonJS modules。
