模塊化是一個語言膨脹的必經之路，它能夠幫助開發者拆分和組織代碼。

Module模式

在模塊化規范形成之前，JS開發者使用Module設計模式來解決JS全局作用域的污染問題。Module模式最初被定義為一種在傳統軟件工程中為類提供私有和公有封裝的方法。在JavaScript中，Module模式使用匿名函數自調用 (閉包)來封裝，通過自定義暴露行為來區分私有成員和公有成員。

let myModule = (function (window) {  let moduleName = 'module' // private  // public  function setModuleName(name) {   moduleName = name  }  // public  function getModuleName() {   return moduleName  }  return { setModuleName, getModuleName } // 暴露行為 })(window)

上面例子是Module模式的一種寫法，它通過閉包的特性打開了一個新的作用域，緩解了全局作用域命名沖突和安全性的問題。但是，開發者并不能夠用它來組織和拆分代碼，于是乎便出現了以此為基石的模塊化規范。

模塊化規化

1. CommonJS

CommonJS主要用在Node開發上，每個文件就是一個模塊，沒個文件都有自己的一個作用域。通過module.exports暴露public成員。例如：

// 文件名：x.jslet x = 1;function add() { x += 1; return x;}module.exports.x = x;module.exports.add = add;

此外，CommonJS通過require()引入模塊依賴，require函數可以引入Node的內置模塊、自定義模塊和npm等第三方模塊。

// 文件名：main.jslet xm = require('./x.js');console.log(xm.x); // 1console.log(xm.add()); // 2console.log(xm.x);  // 1

從上面代碼我們可以看出，require函數同步加載了x.js，并且返回了module.exports輸出字面量的拷貝值。可能有人會問module.exports.x = x;不是賦值嗎，怎么肥事呢？我們說，Module模式是模塊化規范的基石，CommonJS也是對Module模式的一種封裝。我們完全可以用Module模式來實現上面的代碼效果：

let xModule = (function (){ let x = 1; function add() {  x += 1;  return x; } return { x, add };})();let xm = xModule;console.log(xm.x); // 1console.log(xm.add()); // 2console.log(xm.x);  // 1

通過Module模式模擬的CommonJS原理，我們就可以很好的解釋CommonJS的特性了。因為CommonJS需要通過賦值的方式來獲取匿名函數自調用的返回值，所以require函數在加載模塊是同步的。然而CommonJS模塊的加載機制局限了CommonJS在客戶端上的使用，因為通過HTTP同步加載CommonJS模塊是非常耗時的。

2. AMD和CMD

2.1 AMD

// 定義AMD規范的模塊define([function() { return 模塊})

區別于CommonJS，AMD規范的被依賴模塊是異步加載的，而定義的模塊是被當作回調函數來執行的，依賴于require.js模塊管理工具庫。當然，AMD規范不是采用匿名函數自調用的方式來封裝，我們依然可以利用閉包的原理來實現模塊的私有成員和公有成員：

define(['module1', 'module2'], function(m1, m2) { let x = 1; function add() {  x += 1;  return x; } return { add };})

2.2 CMD

CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。AMD 推崇依賴前置，CMD 推崇依賴就近。

define(function(require, exports, module) { // 同步加載模塊 var a = require('./a'); a.doSomething(); // 異步加載一個模塊，在加載完成時，執行回調 require.async(['./b'], function(b) {  b.doSomething(); }); // 對外暴露成員 exports.doSomething = function() {};});// 使用模塊seajs.use('path');