先看一組模塊化最基礎(chǔ)實(shí)現(xiàn)思路：

立即執(zhí)行函數(shù)：

// 定義module
var myModule = (function(){
    var var1 = 1;
    var var2 = 2;
    function fn1(){}
    function fn2(){}
    return {
        fn1,
        fn2
    };
})();
// 調(diào)用module
myModule.fn1()
myModule.fn2()

想必大家經(jīng)常寫(xiě)函數(shù)封裝，和對(duì)象。函數(shù)名會(huì)污染，對(duì)象里面的屬性會(huì)被外界修改。所以立即執(zhí)行函數(shù)是模塊化的基礎(chǔ)，大家看過(guò)jquery源碼的話，可能會(huì)有一定的思考。

CommonJS

最基礎(chǔ)的規(guī)范是CommonJS和AMD，CommonJS經(jīng)node.js應(yīng)運(yùn)而生。我們介紹它的規(guī)范。

1、定義模塊
根據(jù)CommonJS規(guī)范，一個(gè)單獨(dú)的文件就是一個(gè)模塊。每一個(gè)模塊都是一個(gè)單獨(dú)的作用域，也就是說(shuō)，在該模塊內(nèi)部定義的變量，無(wú)法被其他模塊讀取，除非定義為global對(duì)象的屬性

2、模塊輸出：
模塊只有一個(gè)出口，module.exports對(duì)象，我們需要把模塊希望輸出的內(nèi)容放入該對(duì)象

3、加載模塊：
加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，返回文件內(nèi)部的module.exports對(duì)象

demo：

//模塊定義 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加載模塊

var nameModule = require('./myModel.js');

nameModule.printName();

尷尬的瀏覽器

仔細(xì)看上面的代碼，會(huì)發(fā)現(xiàn)require是同步的。模塊系統(tǒng)需要同步讀取模塊文件內(nèi)容，并編譯執(zhí)行以得到模塊接口。

這在服務(wù)器端實(shí)現(xiàn)很簡(jiǎn)單，也很自然，然而， 想在瀏覽器端實(shí)現(xiàn)問(wèn)題卻很多。

瀏覽器端，加載JavaScript最佳、最容易的方式是在document中插入script 標(biāo)簽。但腳本標(biāo)簽天生異步，傳統(tǒng)CommonJS模塊在瀏覽器環(huán)境中無(wú)法正常加載。

解決思路之一是，開(kāi)發(fā)一個(gè)服務(wù)器端組件，對(duì)模塊代碼作靜態(tài)分析，將模塊與它的依賴列表一起返回給瀏覽器端。 這很好使，但需要服務(wù)器安裝額外的組件，并因此要調(diào)整一系列底層架構(gòu)。

另一種解決思路是，用一套標(biāo)準(zhǔn)模板來(lái)封裝模塊定義，但是對(duì)于模塊應(yīng)該怎么定義和怎么加載，又產(chǎn)生的分歧：

AMD（Asynchronous Module Definition）

見(jiàn)名知意，就是異步模塊定義，當(dāng)然是為了解決上述同步加載問(wèn)題。
AMD對(duì)應(yīng)的就是很有名的RequireJS。

requireJS主要解決兩個(gè)問(wèn)題

• 多個(gè)js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
• js加載的時(shí)候?yàn)g覽器會(huì)停止頁(yè)面渲染，加載文件越多，頁(yè)面失去響應(yīng)時(shí)間越長(zhǎng)

demo：

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName();
});

語(yǔ)法

requireJS定義了一個(gè)函數(shù) define，它是全局變量，用來(lái)定義模塊

define(id?, dependencies?, factory);

• id：可選參數(shù)，用來(lái)定義模塊的標(biāo)識(shí)，如果沒(méi)有提供該參數(shù)，腳本文件名（去掉拓展名）
• dependencies：是一個(gè)當(dāng)前模塊依賴的模塊名稱數(shù)組
• factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對(duì)象，此對(duì)象應(yīng)該為模塊的輸出值
  在頁(yè)面上使用require函數(shù)加載模塊

require([dependencies], function(){});
require()函數(shù)接受兩個(gè)參數(shù)*

• 第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊
• 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
  require()函數(shù)在加載依賴的函數(shù)的時(shí)候是異步加載的，這樣瀏覽器不會(huì)失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會(huì)運(yùn)行，解決了依賴性的問(wèn)題。

CMD（Common Module Definition）

即通用模塊定義，對(duì)應(yīng)SeaJS，是阿里玉伯團(tuán)隊(duì)首先提出的概念和設(shè)計(jì)。跟requireJS解決同樣問(wèn)題，只是運(yùn)行機(jī)制不同。
demo:

// 定義模塊  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加載模塊
seajs.use(['myModule.js'], function(my){

});

語(yǔ)法

Sea.js 推崇一個(gè)模塊一個(gè)文件，遵循統(tǒng)一的寫(xiě)法。

define(id?, deps?, factory)
因?yàn)镃MD推崇一個(gè)文件一個(gè)模塊，所以經(jīng)常就用文件名作為模塊id
CMD推崇依賴就近，所以一般不在define的參數(shù)中寫(xiě)依賴，在factory中寫(xiě)
factory有三個(gè)參數(shù)

function(require, exports, module)

• require
  require 是 factory 函數(shù)的第一個(gè)參數(shù)

• require(id)
  require 是一個(gè)方法，接受 模塊標(biāo)識(shí) 作為唯一參數(shù)，用來(lái)獲取其他模塊提供的接口

• exports
  exports 是一個(gè)對(duì)象，用來(lái)向外提供模塊接口

• module
  module 是一個(gè)對(duì)象，上面存儲(chǔ)了與當(dāng)前模塊相關(guān)聯(lián)的一些屬性和方法

AMD與CMD區(qū)別

最明顯的區(qū)別就是在模塊定義時(shí)對(duì)依賴的處理不同

• AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊
• CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require
  看到很多網(wǎng)站說(shuō)AMD是異步加載，CMD是同步加載，肯定是不準(zhǔn)確的，他們的都是異步加載模塊。

通俗來(lái)說(shuō)：
AMD在加載完成定義（define）好的模塊就會(huì)立即執(zhí)行，所有執(zhí)行完成后，遇到require才會(huì)執(zhí)行主邏輯。（提前加載）
CMD在加載完成定義（define）好的模塊，僅僅是下載不執(zhí)行，在遇到require才會(huì)執(zhí)行對(duì)應(yīng)的模塊。（按需加載）
AMD用戶體驗(yàn)好，因?yàn)闆](méi)有延遲，CMD性能好，因?yàn)橹挥杏脩粜枰臅r(shí)候才執(zhí)行。

CMD為什么會(huì)出現(xiàn)，因?yàn)閷?duì)node.js的書(shū)寫(xiě)者友好，因?yàn)榉蠈?xiě)法習(xí)慣，就像為何vue會(huì)受人歡迎的一個(gè)道理。

這里推薦大家看看玉伯是怎么回答的：https://www.zhihu.com/question/20351507

不過(guò)es6 moudle結(jié)合了commonjs和AMD的優(yōu)點(diǎn)，因?yàn)槠浜?jiǎn)約的api已經(jīng)可以完全取代它們了。