我在目前的項(xiàng)目中遇到了一個匪夷所思的問題：CommonJS規(guī)范是同步加載模塊資源，為什么前端項(xiàng)目中webpack使用的寫法卻可以遵循這個偏服務(wù)器端的一個規(guī)范呢？為什么不用適合瀏覽器異步加載策略的AMD規(guī)范呢？
首先要理解一下CommonJS、AMD兩種規(guī)范各是什么意思？
CommonJS的核心思想是把一個文件當(dāng)做一個模塊，要在哪里使用這個模塊，就在哪里require這個模塊，然后require方法開始加載這個模塊并且執(zhí)行其中的代碼，最后會返回你指定的export對象。例如：
a.js中
module.export = function() {
hello: function() {
alert("你好");
}
}
你在其它js中可以這樣
var a = require('./xxx/a.js');
a.hello(); // ==> 彈窗“你好”
順便在這里說一下commonJS中有的地方用module.export = xxx，有的地方用export = xxx，其實(shí)它們沒有多大區(qū)別，node.js中 module是個對象，export是其中的一個屬性，而export就是對moudle.export這個屬性的一個引用罷了。
參考鏈接：node.js中module.export與export的區(qū)別。
BUT
CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作，不能非阻塞的并行加載多個模塊。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用。但如果是瀏覽器環(huán)境，要從服務(wù)器加載模塊，這是就必須采用異步模式。所以就有了 AMD CMD 解決方案。
AMD和CMD規(guī)范都是異步加載的方式，CMD沒有具體了解過就不多說了，它的典型實(shí)現(xiàn)是SeaJS，據(jù)說是按需加載就近原則，as lazy as posible.
AMD全稱(Asynchromous Module Definition)，它主要是采用了異步加載模塊的方式，可以并行加載多個模塊，等所有模塊都加載并且解釋執(zhí)行完成后，才會執(zhí)行接下來的代碼（包括用AMD規(guī)范轉(zhuǎn)換成CommonJS模塊定義），講究一個“提前執(zhí)行”的思想，RequireJS就是對AMD規(guī)范最直接的實(shí)現(xiàn)。
下面用RequireJS來執(zhí)行幾個模塊，看看會發(fā)生什么。
a.js
define(function() {
console.log("I am module a, I have been required and excuted");
});
b.js
define(['c'], function(c) {
console.log("I am module b, I have been required and excuted, I depend on module c");
});
c.js
define(function() {
console.log("I am module c, I have been required and excuted");
});
main.js
//轉(zhuǎn)換成CommonJS模塊定義
define(function(require, exports, module) {
require("a");
console.log("a required");
require("b");
console.log("b required");
console.log("all modules have been required");
});
然后你覺得結(jié)果會是這樣嗎？
No! No! No！
如果你用的是實(shí)現(xiàn)CommonJS規(guī)范的Browserify或者用webpack來運(yùn)行這些模塊的話，結(jié)果確實(shí)是上述那樣，上圖就是CommonJS規(guī)范所得到的結(jié)果。
實(shí)際結(jié)果是：
仔細(xì)一想，RequireJS是標(biāo)準(zhǔn)的采用AMD規(guī)范異步加載方式的，也就是說不管你用了AMD規(guī)范轉(zhuǎn)換成CommonJS規(guī)范寫的模塊（偽同步，和CommonJS寫法相同而已實(shí)際還是異步）還是直接異步加載，AMD規(guī)范始終遵循一切模塊皆優(yōu)先加載并執(zhí)行，所以就算把require模塊寫到某句執(zhí)行的代碼后面，它仍然會被拉到最先去執(zhí)行。
這里想記一下我查詢資料得知的一些關(guān)于模塊加載和解析執(zhí)行的東西。
一個模塊被require之后它會經(jīng)歷兩個步驟，首先是加載，這個加載，可以是從本地加載的，比如webpack打包后的模塊，也可以是從服務(wù)器請求來的模塊資源。接著模塊中的代碼會被瀏覽器解釋執(zhí)行。CommonJS規(guī)范和AMD規(guī)范最大區(qū)別就體現(xiàn)在加載那一步驟上，如果都是從本地加載的，ok，是不是并行加載無所謂，反正都很快，如果是前端請求服務(wù)器獲取模塊資源，CommonJS的同步加載方式就坑爹了，它會由于某個請求加載的時間過長導(dǎo)致瀏覽器阻塞，不會往下執(zhí)行，所以就會出現(xiàn)網(wǎng)頁打開緩慢的現(xiàn)象。但是CommonJS和AMD的模塊執(zhí)行那一步所用的時間是一樣的。
所以這就很好解釋了為什么webpack可以讓前端模塊開發(fā)使用CommonJS，原因是無所謂。webpack也支持AMD、CMD規(guī)范，我自己試驗(yàn)過用無論是采用CommonJS還是AMD規(guī)范編寫模塊，最后都會被webpack分析依賴關(guān)系，然后打包到本地。之后瀏覽器加載的時候其實(shí)都是在讀取本地文件（我的理解，總之同步異步?jīng)]有什么區(qū)別了）。
最后放出一張我覺得很好地幫我理解RequireJS、SeaJS和Browserify、Webpack的圖
RequireJS和SeaJS都是在線編譯的，就是在瀏覽器上加了一個CommonJS和AMD規(guī)范的解釋器解釋執(zhí)行。
browserify和webpack是預(yù)編譯，在本地將你寫的CommonJS和AMD模塊編譯裝換成瀏覽器認(rèn)識的JS。
