摘要：若不存在則模塊標(biāo)識應(yīng)該默認(rèn)定義為在加載器中被請求腳本的標(biāo)識。其中是一個(gè)數(shù)組，里面的成員就是要加載的模塊是模塊加載完成之后的回調(diào)函數(shù)。在加載與兩個(gè)模塊之后執(zhí)行回調(diào)函數(shù)實(shí)現(xiàn)具體過程。在判斷是否支持是否存在，存在則使用方式加載模塊。

我的github(PS:希望star): https://github.com/tonyzheng1...

今天由于項(xiàng)目中引入的echarts的文件太大，requirejs經(jīng)常加載超時(shí)，不得不分開來加載echarts的各個(gè)圖表。但是使用echarts自帶的在線構(gòu)建工具生成的支持AMD 標(biāo)準(zhǔn)的模塊報(bào)錯(cuò)，所以不得不使用echarts的全局函數(shù)，使用requirejs的shim進(jìn)行加載。借此機(jī)會(huì)學(xué)習(xí)一下AMD, CMD, CommonJS和UMD各自的規(guī)范，和它們之間的區(qū)別。

在了解這些規(guī)范之前，還是先了解一下什么是模塊化。

模塊化是指在解決某一個(gè)復(fù)雜問題或者一系列的雜糅問題時(shí)，依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護(hù)性更高的可管理的模塊的方式?？梢韵胂笠粋€(gè)巨大的系統(tǒng)代碼，被整合優(yōu)化分割成邏輯性很強(qiáng)的模塊時(shí)，對于軟件是一種何等意義的存在。對于軟件行業(yè)來說：解耦軟件系統(tǒng)的復(fù)雜性，使得不管多么大的系統(tǒng)，也可以將管理，開發(fā)，維護(hù)變得“有理可循”。

還有一些對于模塊化一些專業(yè)的定義為：模塊化是軟件系統(tǒng)的屬性，這個(gè)系統(tǒng)被分解為一組高內(nèi)聚，低耦合的模塊。那么在理想狀態(tài)下我們只需要完成自己部分的核心業(yè)務(wù)邏輯代碼，其他方面的依賴可以通過直接加載被人已經(jīng)寫好模塊進(jìn)行使用即可。

首先，既然是模塊化設(shè)計(jì)，那么作為一個(gè)模塊化系統(tǒng)所必須的能力：

定義封裝的模塊。

定義新模塊對其他模塊的依賴。

可對其他模塊的引入支持。

好了，思想有了，那么總要有點(diǎn)什么來建立一個(gè)模塊化的規(guī)范制度吧，不然各式各樣的模塊加載方式只會(huì)將局?jǐn)嚨酶鼮榛靵y。那么在JavaScript中出現(xiàn)了一些非傳統(tǒng)模塊開發(fā)方式的規(guī)范 CommonJS的模塊規(guī)范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。

CommonJS是服務(wù)器端模塊的規(guī)范，Node.js采用了這個(gè)規(guī)范。

根據(jù)CommonJS規(guī)范，一個(gè)多帶帶的文件就是一個(gè)模塊。加載模塊使用require方法，該方法讀取一個(gè)文件并執(zhí)行，最后返回文件內(nèi)部的exports對象。

例如：

// foobar.js
 
//私有變量
var test = 123;
 
//公有方法
function foobar () {
 
    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}
 
//exports對象上的方法和變量是公有的
var foobar = new foobar();
exports.foobar = foobar;

//require方法默認(rèn)讀取js文件，所以可以省略js后綴
var test = require("./boobar").foobar;
 
test.bar();

CommonJS 加載模塊是同步的，所以只有加載完成才能執(zhí)行后面的操作。像Node.js主要用于服務(wù)器的編程，加載的模塊文件一般都已經(jīng)存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規(guī)范比較適用。但如果是瀏覽器環(huán)境，要從服務(wù)器加載模塊，這是就必須采用異步模式。所以就有了 AMD CMD 解決方案。

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義".

AMD設(shè)計(jì)出一個(gè)簡潔的寫模塊API：
define(id?, dependencies?, factory);
第一個(gè)參數(shù) id 為字符串類型，表示了模塊標(biāo)識，為可選參數(shù)。若不存在則模塊標(biāo)識應(yīng)該默認(rèn)定義為在加載器中被請求腳本的標(biāo)識。如果存在，那么模塊標(biāo)識必須為頂層的或者一個(gè)絕對的標(biāo)識。
第二個(gè)參數(shù)，dependencies ，是一個(gè)當(dāng)前模塊依賴的，已被模塊定義的模塊標(biāo)識的數(shù)組字面量。
第三個(gè)參數(shù)，factory，是一個(gè)需要進(jìn)行實(shí)例化的函數(shù)或者一個(gè)對象。

通過參數(shù)的排列組合，這個(gè)簡單的API可以從容應(yīng)對各種各樣的應(yīng)用場景，如下所述。

定義無依賴的模塊

define( {
    add : function( x, y ){
        return x + y ;
    }
} );

定義有依賴的模塊

define(["alpha"], function( alpha ){
    return {
        verb : function(){
            return alpha.verb() + 1 ;
        }
    }
});

定義數(shù)據(jù)對象模塊

define({
    users: [],
    members: []
});

具名模塊

define("alpha", [ "require", "exports", "beta" ], function( require, exports, beta ){
    export.verb = function(){
        return beta.verb();
        // or:
        return require("beta").verb();
    }
});

包裝模塊

define(function(require, exports, module) {
    var a = require("a"),
          b = require("b");

    exports.action = function() {};
} );

不考慮多了一層函數(shù)外，格式和Node.js是一樣的：使用require獲取依賴模塊，使用exports導(dǎo)出API。

除了define外，AMD還保留一個(gè)關(guān)鍵字require。require 作為規(guī)范保留的全局標(biāo)識符，可以實(shí)現(xiàn)為 module loader，也可以不實(shí)現(xiàn)。

require([module], callback)

AMD模塊化規(guī)范中使用全局或局部的require函數(shù)實(shí)現(xiàn)加載一個(gè)或多個(gè)模塊，所有模塊加載完成之后的回調(diào)函數(shù)。

其中：

[module]：是一個(gè)數(shù)組，里面的成員就是要加載的模塊；
callback：是模塊加載完成之后的回調(diào)函數(shù)。

例如：加載一個(gè)math模塊，然后調(diào)用方法 math.add(2, 3);

require(["math"], function(math) {
　math.add(2, 3);
});

RequireJS 是一個(gè)前端的模塊化管理的工具庫，遵循AMD規(guī)范，它的作者就是AMD規(guī)范的創(chuàng)始人 James Burke。所以說RequireJS是對AMD規(guī)范的闡述一點(diǎn)也不為過。

RequireJS 的基本思想為：通過一個(gè)函數(shù)來將所有所需要的或者說所依賴的模塊實(shí)現(xiàn)裝載進(jìn)來，然后返回一個(gè)新的函數(shù)（模塊），我們所有的關(guān)于新模塊的業(yè)務(wù)代碼都在這個(gè)函數(shù)內(nèi)部操作，其內(nèi)部也可無限制的使用已經(jīng)加載進(jìn)來的以來的模塊。

那么scripts下的main.js則是指定的主代碼腳本文件，所有的依賴模塊代碼文件都將從該文件開始異步加載進(jìn)入執(zhí)行。

define用于定義模塊，RequireJS要求每個(gè)模塊均放在獨(dú)立的文件之中。按照是否有依賴其他模塊的情況分為獨(dú)立模塊和非獨(dú)立模塊。

獨(dú)立模塊，不依賴其他模塊。直接定義：

define({
    method1: function(){},
    method2: function(){}
});

也等價(jià)于

define(function() {
    return {
        method1: function(){},
        method2: function(){}
    }
});

非獨(dú)立模塊，對其他模塊有依賴。

define([ "module1", "module2" ], function(m1, m2) {
    ...
});

或者：

define(function(require) {
    var m1 = require("module1"),
          m2 = require("module2");
    ...
});

簡單看了一下RequireJS的實(shí)現(xiàn)方式，其 require 實(shí)現(xiàn)只不過是提取 require 之后的模塊名，將其放入依賴關(guān)系之中。

require方法調(diào)用模塊

在require進(jìn)行調(diào)用模塊時(shí)，其參數(shù)與define類似。

require(["foo", "bar"], function(foo, bar) {
    foo.func();
    bar.func();
} );

在加載 foo 與 bar 兩個(gè)模塊之后執(zhí)行回調(diào)函數(shù)實(shí)現(xiàn)具體過程。

當(dāng)然還可以如之前的例子中的，在define定義模塊內(nèi)部進(jìn)行require調(diào)用模塊

define(function(require) {
    var m1 = require( "module1" ),
          m2 = require( "module2" );
    ...
});

define 和 require 這兩個(gè)定義模塊，調(diào)用模塊的方法合稱為AMD模式，定義模塊清晰，不會(huì)污染全局變量，清楚的顯示依賴關(guān)系。AMD模式可以用于瀏覽器環(huán)境并且允許非同步加載模塊，也可以按需動(dòng)態(tài)加載模塊。

官網(wǎng) (http://www.requirejs.org/)
API (http://www.requirejs.org/docs...

CMD是SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出

對于依賴的模塊AMD是提前執(zhí)行，CMD是延遲執(zhí)行。不過RequireJS從2.0開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不通過）。

CMD推崇依賴就近，AMD推崇依賴前置。

//AMD
define(["./a","./b"], function (a, b) {
 
    //依賴一開始就寫好
    a.test();
    b.test();
});
 
//CMD
define(function (requie, exports, module) {
     
    //依賴可以就近書寫
    var a = require("./a");
    a.test();
     
    ...
    //軟依賴
    if (status) {
     
        var b = requie("./b");
        b.test();
    }
});

雖然 AMD也支持CMD寫法，但依賴前置是官方文檔的默認(rèn)模塊定義寫法。

AMD的API默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD嚴(yán)格的區(qū)分推崇職責(zé)單一。例如：AMD里require分全局的和局部的。CMD里面沒有全局的 require，提供 seajs.use()來實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。CMD里每個(gè)API都簡單純粹。

UMD是AMD和CommonJS的糅合

AMD模塊以瀏覽器第一的原則發(fā)展，異步加載模塊。
CommonJS模塊以服務(wù)器第一原則發(fā)展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。
這迫使人們又想出另一個(gè)更通用的模式UMD （Universal Module Definition）。希望解決跨平臺(tái)的解決方案。

UMD先判斷是否支持Node.js的模塊（exports）是否存在，存在則使用Node.js模塊模式。
在判斷是否支持AMD（define是否存在），存在則使用AMD方式加載模塊。

(function (window, factory) {
    if (typeof exports === "object") {
     
        module.exports = factory();
    } else if (typeof define === "function" && define.amd) {
     
        define(factory);
    } else {
     
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});