Javascript模塊化編程，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以加載別人已經寫好的模塊。
Javascript社區做了很多努力，在現有的運行環境中，實現”模塊”的效果。
CommonJS
CommonJS定義的模塊分為:? 模塊引用(require)? ? 模塊輸出(exports)? ? ? ?模塊標識(module)
CommonJS Modules有1.0、1.1、1.1.1三個版本:
Node.js、SproutCore實現了 Modules 1.0
SeaJS、AvocadoDB、CouchDB等實現了Modules 1.1.1
SeaJS、FlyScript實現了Modules/Wrappings
這里的CommonJS規范指的是CommonJS Modules/1.0規范。
CommonJS是一個更偏向于服務器端的規范。NodeJS采用了這個規范。CommonJS的一個模塊就是一個腳本文件。require命令第一次加載該腳本時就會執行整個腳本，然后在內存中生成一個對象。
{
??id:?'...',
??exports:?{?...?},
??loaded:?true,
??...
}
id是模塊名，exports是該模塊導出的接口，loaded表示模塊是否加載完畢。此外還有很多屬性，這里省略了。
以后需要用到這個模塊時，就會到exports屬性上取值。即使再次執行require命令，也不會再次執行該模塊，而是到緩存中取值。
//?math.js
exports.add?=?function(a,?b)?{
??return?a?+?b;
}
var?math?=?require('math');
math.add(2,?3);?//?512
由于CommonJS是同步加載模塊，這對于服務器端不是一個問題，因為所有的模塊都放在本地硬盤。等待模塊時間就是硬盤讀取文件時間，很小。但是，對于瀏覽器而言，它需要從服務器加載模塊，涉及到網速，代理等原因，一旦等待時間過長，瀏覽器處于”假死”狀態。
所以在瀏覽器端，不適合于CommonJS規范。所以在瀏覽器端又出現了一個規范—AMD(AMD是RequireJs在推廣過程中對模塊定義的規范化產出)。
AMD
CommonJS解決了模塊化的問題，但這種同步加載方式并不適合于瀏覽器端。
AMD是”Asynchronous Module Definition”的縮寫，即”異步模塊定義”。它采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。
這里異步指的是不堵塞瀏覽器其他任務（dom構建，css渲染等），而加載內部是同步的（加載完模塊后立即執行回調）。
AMD也采用require命令加載模塊，但是不同于CommonJS，它要求兩個參數：
require([module],?callback);1
第一個參數[module]，是一個數組，里面的成員是要加載的模塊，callback是加載完成后的回調函數。如果將上述的代碼改成AMD方式：
require(['math'],?function(math)?{
??math.add(2,?3);
})
其中，回調函數中參數對應數組中的成員（模塊）。
requireJS加載模塊，采用的是AMD規范。也就是說，模塊必須按照AMD規定的方式來寫。
具體來說，就是模塊書寫必須使用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那么可以直接寫在define()函數之中。
define(id?,?dependencies?,?factory);12
id：模塊的名字，如果沒有提供該參數，模塊的名字應該默認為模塊加載器請求的指定腳本的名字；
dependencies：模塊的依賴，已被模塊定義的模塊標識的數組字面量。依賴參數是可選的，如果忽略此參數，它應該默認為["require", "exports", "module"]。然而，如果工廠方法的長度屬性小于3，加載器會選擇以函數的長度屬性指定的參數個數調用工廠方法。
factory：模塊的工廠函數，模塊初始化要執行的函數或對象。如果為函數，它應該只被執行一次。如果是對象，此對象應該為模塊的輸出值。
假定現在有一個math.js文件，定義了一個math模塊。那么，math.js書寫方式如下：
//?math.js
define(function()?{
??var?add?=?function(x,?y)?{
????return?x?+?y;
??}
??return??{
????add:?add
??}
})
加載方法如下：
//?main.js
require(['math'],?function(math)?{
??alert(math.add(1,?1));
})
如果math模塊還依賴其他模塊，寫法如下：
//?math.js
define(['dependenceModule'],?function(dependenceModule)?{
????//?...
})
當require()函數加載math模塊的時候，就會先加載dependenceModule模塊。當有多個依賴時，就將所有的依賴都寫在define()函數第一個參數數組中，所以說AMD是依賴前置的。這不同于CMD規范，它是依賴就近的。
CMD
CMD推崇依賴就近，延遲執行。可以把你的依賴寫進代碼的任意一行，如下：
define(factory)
factory為函數時，表示是模塊的構造方法。執行該構造方法，可以得到模塊向外提供的接口。factory 方法在執行時，默認會傳入三個參數：require、exports 和 module.
//?CMD
define(function(require,?exports,?module)?{
??var?a?=?require('./a');
??a.doSomething();
??var?b?=?require('./b');
??b.doSomething();
})
如果使用AMD寫法，如下：
//?AMDdefine(['a',?'b'],?function(a,?b)?{
??a.doSomething();
??b.doSomething();
})
這個規范實際上是為了Seajs的推廣然后搞出來的。那么看看SeaJS是怎么回事兒吧，基本就是知道這個規范了。
同樣Seajs也是預加載依賴js跟AMD的規范在預加載這一點上是相同的，明顯不同的地方是調用，和聲明依賴的地方。AMD和CMD都是用difine和require，但是CMD標準傾向于在使用過程中提出依賴，就是不管代碼寫到哪突然發現需要依賴另一個模塊，那就在當前代碼用require引入就可以了，規范會幫你搞定預加載，你隨便寫就可以了。但是AMD標準讓你必須提前在頭部依賴參數部分寫好（沒有寫好？ 倒回去寫好咯）。這就是最明顯的區別。
sea.js通過sea.use()來加載模塊。
seajs.use(id,?callback?)
ES6
es6模塊特性，推薦參看阮一峰老師的：ECMAScript 6 入門 - Module 的語法
說起 ES6 模塊特性，那么就先說說 ES6 模塊跟 CommonJS 模塊的不同之處。
ES6 模塊輸出的是值的引用，輸出接口動態綁定，而 CommonJS 輸出的是值的拷貝
ES6 模塊編譯時執行，而 CommonJS 模塊總是在運行時加載
CommonJS 輸出值的拷貝
CommonJS 模塊輸出的是值的拷貝(原始值的拷貝)，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。
//?a.js
var?b?=?require('./b');
console.log(b.foo);
setTimeout(()?=>?{
??console.log(b.foo);
??console.log(require('./b').foo);
},?1000);
//?b.js
let?foo?=?1;
setTimeout(()?=>?{
??foo?=?2;
},?500);
module.exports?=?{
??foo:?foo,
};
//?執行：node?a.js
//?執行結果：
//?1
//?1
//?1
上面代碼說明，b 模塊加載以后，它的內部 foo 變化就影響不到輸出的 exports.foo 了。這是因為 foo 是一個原始類型的值，會被緩存。所以如果你想要在 CommonJS 中動態獲取模塊中的值，那么就需要借助于函數延時執行的特性。
//?a.js
var?b?=?require('./b');
console.log(b.foo());
setTimeout(()?=>?{
??console.log(b.foo());
??console.log(require('./b').foo());
},?1000);
//?b.js
let?foo?=?1;
setTimeout(()?=>?{
??foo?=?2;
},?500);
module.exports?=?{
??foo:?()?=>?{
????return?foo;
??},
};
//?執行：node?a.js
//?執行結果：
//?1
//?2
//?2
所以我們可以總結一下：
CommonJS 模塊重復引入的模塊并不會重復執行，再次獲取模塊直接獲得暴露的 module.exports 對象
如果你要處處獲取到模塊內的最新值的話，也可以你每次更新數據的時候每次都要去更新 module.exports 上的值
如果你暴露的 module.exports 的屬性是個對象，那就不存在這個問題了
所以如果你要處處獲取到模塊內的最新值的話，也可以你每次更新數據的時候每次都要去更新?module.exports 上的值，比如：
//?a.js
var?b?=?require('./b');
console.log(b.foo);
setTimeout(()?=>?{
??console.log(b.foo);
??console.log(require('./b').foo);
},?1000);
//?b.js
module.exports.foo?=?1;???//?同?exports.foo?=?1?
setTimeout(()?=>?{
??module.exports.foo?=?2;
},?500);
//?執行：node?a.js
//?執行結果：
//?1
//?2
//?2
ES6 輸出值的引用
然而在 ES6 模塊中就不再是生成輸出對象的拷貝，而是動態關聯模塊中的值。
ES6 靜態編譯，CommonJS 運行時加載
關于第二點，ES6 模塊編譯時執行會導致有以下兩個特點：
import 命令會被 JavaScript 引擎靜態分析，優先于模塊內的其他內容執行。
export 命令會有變量聲明提前的效果。
import 優先執行:?
從第一條來看，在文件中的任何位置引入 import 模塊都會被提前到文件頂部。
//?a.js
console.log('a.js')
import?{?foo?}?from?'./b';
//?b.js
export?let?foo?=?1;
console.log('b.js?先執行');
//?執行結果:
//?b.js?先執行
//?a.js
從執行結果我們可以很直觀地看出，雖然 a 模塊中 import 引入晚于 console.log('a')，但是它被 JS 引擎通過靜態分析，提到模塊執行的最前面，優于模塊中的其他部分的執行。
由于 import 是靜態執行，所以 import 具有提升效果即 import 命令在模塊中的位置并不影響程序的輸出。
/?a.js
import?{?foo?}?from?'./b';
console.log('a.js');
export?const?bar?=?1;
export?const?bar2?=?()?=>?{
??console.log('bar2');
}
export?function?bar3()?{
??console.log('bar3');
}
//?b.js
export?let?foo?=?1;
import?*?as?a?from?'./a';
console.log(a);
//?執行結果:
//?{?bar:?undefined,?bar2:?undefined,?bar3:?[Function:?bar3]?}
//?a.js
從上面的例子可以很直觀地看出，a 模塊引用了 b 模塊，b 模塊也引用了 a 模塊，export 聲明的變量也是優于模塊其它內容的執行的，但是具體對變量賦值需要等到執行到相應代碼的時候。(當然函數聲明和表達式聲明不一樣，這一點跟 JS 函數性質一樣，這里就不過多解釋)
好了，講完了 ES6 模塊和 CommonJS 模塊的不同點之后，接下來就講講相同點：
模塊不會重復執行
這個很好理解，無論是 ES6 模塊還是 CommonJS 模塊，當你重復引入某個相同的模塊時，模塊只會執行一次。
CommonJS 模塊循環依賴
//?a.js
console.log('a?starting');
exports.done?=?false;
const?b?=?require('./b');
console.log('in?a,?b.done?=',?b.done);
exports.done?=?true;
console.log('a?done');
//?b.js
console.log('b?starting');
exports.done?=?false;
const?a?=?require('./a');
console.log('in?b,?a.done?=',?a.done);
exports.done?=?true;
console.log('b?done');
//?node?a.js
//?執行結果：
//?a?starting
//?b?starting
//?in?b,?a.done?=?false
//?b?done
//?in?a,?b.done?=?true
//?a?done
結合之前講的特性很好理解，當你從 b 中想引入 a 模塊的時候，因為 node 之前已經加載過 a 模塊了，所以它不會再去重復執行 a 模塊，而是直接去生成當前 a 模塊吐出的 module.exports 對象，因為 a 模塊引入 b 模塊先于給 done 重新賦值，所以當前 a 模塊中輸出的 module.exports 中 done 的值仍為 false。而當 a 模塊中輸出 b 模塊的 done 值的時候 b 模塊已經執行完畢，所以 b 模塊中的 done 值為 true。
從上面的執行過程中，我們可以看到，在 CommonJS 規范中，當遇到 require() 語句時，會執行 require 模塊中的代碼，并緩存執行的結果，當下次再次加載時不會重復執行，而是直接取緩存的結果。正因為此，出現循環依賴時才不會出現無限循環調用的情況。雖然這種模塊加載機制可以避免出現循環依賴時報錯的情況，但稍不注意就很可能使得代碼并不是像我們想象的那樣去執行。因此在寫代碼時還是需要仔細的規劃，以保證循環模塊的依賴能正確工作。
所以有什么辦法可以出現循環依賴的時候避免自己出現混亂呢？一種解決方式便是將每個模塊先寫 exports 語法，再寫 requre 語句，利用 CommonJS 的緩存機制，在 require() 其他模塊之前先把自身要導出的內容導出，這樣就能保證其他模塊在使用時可以取到正確的值。比如：
//?a.js
exports.done?=?true;
let?b?=?require('./b');
console.log(b.done)
//?b.js
exports.done?=?true;
let?a?=?require('./a');
console.log(a.done)
這種寫法簡單明了，缺點是要改變每個模塊的寫法，而且大部分同學都習慣了在文件開頭先寫 require 語句。
ES6 模塊循環依賴
跟 CommonJS 模塊一樣，ES6 不會再去執行重復加載的模塊，又由于 ES6 動態輸出綁定的特性，能保證 ES6 在任何時候都能獲取其它模塊當前的最新值。
//?a.js
console.log('a?starting')
import?{foo}?from?'./b';
console.log('in?b,?foo:',?foo);
export?const?bar?=?2;
console.log('a?done');
//?b.js
console.log('b?starting');
import?{bar}?from?'./a';
export?const?foo?=?'foo';
console.log('in?a,?bar:',?bar);
setTimeout(()?=>?{
??console.log('in?a,?setTimeout?bar:',?bar);
})
console.log('b?done');
//?babel-node?a.js
//?執行結果：
//?b?starting
//?in?a,?bar:?undefined
//?b?done
//?a?starting
//?in?b,?foo:?foo
//?a?done
//?in?a,?setTimeout?bar:?2
動態 import()
ES6 模塊在編譯時就會靜態分析，優先于模塊內的其他內容執行，所以導致了我們無法寫出像下面這樣的代碼：
if(some?condition)?{
??import?a?from?'./a';
}else?{
??import?b?from?'./b';
}
//?or?
import?a?from?(str?+?'b');
因為編譯時靜態分析，導致了我們無法在條件語句或者拼接字符串模塊，因為這些都是需要在運行時才能確定的結果在 ES6 模塊是不被允許的，所以 動態引入 import() 應運而生。
import() 允許你在運行時動態地引入 ES6 模塊，想到這，你可能也想起了 require.ensure 這個語法，但是它們的用途卻截然不同的。
require.ensure 的出現是 webpack 的產物，它是因為瀏覽器需要一種異步的機制可以用來異步加載模塊，從而減少初始的加載文件的體積，所以如果在服務端的話 require.ensure 就無用武之地了，因為服務端不存在異步加載模塊的情況，模塊同步進行加載就可以滿足使用場景了。 CommonJS 模塊可以在運行時確認模塊加載。
而 import() 則不同，它主要是為了解決 ES6 模塊無法在運行時確定模塊的引用關系，所以需要引入 import()
我們先來看下它的用法：
動態的 import() 提供一個基于 Promise 的 API
動態的import() 可以在腳本的任何地方使用
import() 接受字符串文字，你可以根據你的需要構造說明符
舉個簡單的使用例子：
//?a.js
const?str?=?'./b';
const?flag?=?true;
if(flag)?{
??import('./b').then(({foo})?=>?{
????console.log(foo);
??})
}
import(str).then(({foo})?=>?{
??console.log(foo);
})
//?b.js
export?const?foo?=?'foo';
//?babel-node?a.js
//?執行結果
//?foo
//?foo
當然，如果在瀏覽器端的 import() 的用途就會變得更廣泛，比如 按需異步加載模塊，那么就和 require.ensure 功能類似了。
因為是基于 Promise 的，所以如果你想要同時加載多個模塊的話，可以是 Promise.all 進行并行異步加載。
Promise.all([
??import('./a.js'),
??import('./b.js'),
??import('./c.js'),
]).then(([a,?{default:?b},?{c}])?=>?{
????console.log('a.js?is?loaded?dynamically');
????console.log('b.js?is?loaded?dynamically');
????console.log('c.js?is?loaded?dynamically');
});
還有 Promise.race 方法，它檢查哪個 Promise 被首先 resolved 或 reject。我們可以使用import()來檢查哪個CDN速度更快：
const?CDNs?=?[
??{
????name:?'jQuery.com',
????url:?'https://code.jquery.com/jquery-3.1.1.min.js'
??},
??{
????name:?'googleapis.com',
????url:?'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'
??}
];
console.log(`------`);
console.log(`jQuery?is:?${window.jQuery}`);
Promise.race([
??import(CDNs[0].url).then(()=>console.log(CDNs[0].name,?'loaded')),
??import(CDNs[1].url).then(()=>console.log(CDNs[1].name,?'loaded'))
]).then(()=>?{
??console.log(`jQuery?version:?${window.jQuery.fn.jquery}`);
});
當然，如果你覺得這樣寫還不夠優雅，也可以結合 async/await 語法糖來使用。
async?function?main()?{
??const?myModule?=?await?import('./myModule.js');
??const?{export1,?export2}?=?await?import('./myModule.js');
??const?[module1,?module2,?module3]?=
????await?Promise.all([
??????import('./module1.js'),
??????import('./module2.js'),
??????import('./module3.js'),
????]);
}
動態 import() 為我們提供了以異步方式使用 ES 模塊的額外功能。 根據我們的需求動態或有條件地加載它們，這使我們能夠更快，更好地創建更多優勢應用程序。
export
一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果希望外部文件能夠讀取該模塊的變量，就需要在這個模塊內使用export關鍵字導出變量。如：
//?profile.jsexport?var?a?=?1;export?var?b?=?2;export?var?c?=?3;1234
下面的寫法是等價的，這種方式更加清晰（在底部一眼能看出導出了哪些變量）：
var?a?=?1;var?b?=?2;var?c?=?3;
export?{a,?b,?c}1234
import
import命令可以導入其他模塊通過export導出的部分。
var?a?=?1;var?b?=?2;var?c?=?3;
export?{a,?b,?c}
//main.js
import?{a,?b,?c}?from?'./abc';
console.log(a,?b,?c);
如果想為導入的變量重新取一個名字，使用as關鍵字（也可以在導出中使用）。
import?{a?as?aa,?b,?c};
console.log(aa,?b,?c)12
如果想在一個模塊中先輸入后輸出一個模塊，import語句可以和export語句寫在一起。
import?{a,?b,?c}?form?'./abc';export?{a,?b,??c}//?使用連寫,?可讀性不好，不建議export?{a,?b,?c}?from?'./abc';12345
模塊的整體加載
使用*關鍵字。
import?*?from?as?abc?form?'./abc';
export default
在export輸出內容時，如果同時輸出多個變量，需要使用大括號{}，同時導入也需要大括號。使用export defalut輸出時，不需要大括號，而輸入（import）export default輸出的變量時，不需要大括號。
//?abc.jsvar?a?=?1,?b?=?2,?c?=?3;export?{a,?b};export?default?c;1234
import?{a,?b}?from?'./abc';
import?c?from?'./abc';?//?不需要大括號console.log(a,?b,?c)?//?1?2?3123
本質上，export default輸出的是一個叫做default的變量或方法，輸入這個default變量時不需要大括號。
//?abc.js
export?{a?as?default};
//?main.js
import?a?from?'./abc';?//?這樣也是可以的
import?{default?as?aa}?from?'./abc';?//?這樣也是可以的
console.log(aa);123456789
就到這里了吧。關于循環加載（模塊相互依賴）沒寫，CommonJS和ES6處理方式不一樣。
參考文章：
javascript模塊化之CommonJS、AMD、CMD、UMD、ES6
該如何理解AMD ，CMD，CommonJS規范–javascript模塊化加載學習總結
研究一下javascript的模塊規范（CommonJs/AMD/CMD）
Javascript模塊化編程（三）：require.js的用法
轉載請注明來源，再嘮叨JS模塊化加載之CommonJS、AMD、CMD、ES6 - javascript入門容易深入難，民工看似康莊大道卻是陷阱遍地 - 周陸軍的個人網站：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2016_0203_528.html
文有不妥之處，望告之，謝謝
