AMD、CMD、UMD

介紹

多年來，可供選擇的JavaScript組件的生態系統不斷地穩步增長。有不少的選擇當然是很好的一件事，可是各個組件混合搭配使用的時候會帶來很多的問題，開發者不會花不少時間就會發現全部組件使用起來總有這樣那樣的問題。

爲了解決這些問題，互爲競爭對手的模塊規範 AMD 和 CommonJS 出現了，它們可讓開發者在約定的沙箱以模塊化的方式編寫本身的代碼，以避免「污染生態系統」。

AMD

異步模塊定義（英文簡稱AMD）已經引領了前端潮流，RequireJS已是最流行的實現方式。

下面的例子是  foo模塊簡單地依賴 jquery。

define(['jquery'], function ($) { 
    function myFunc(){}; 

    return myFunc; 
});

 

下面的更復雜一點的例子就是多個依賴和多個暴露方法的用法。

define(['jquery', 'underscore'], function ($, _) { 

    function a(){};
    function b(){};
    function c(){}; 

    return { 
        b:b,
        c:c
    } 
});

 

定義的第一部分是依賴的數組，而第二部分基本上是僅在第一部分聲明好才能執行的回調函數。（像 RequireJS 這種腳本加載器纔會關心這部分，包括找出依賴文件的位置）

注意：定義中的依賴順序很重要！（好比  jQuery--->$，underscore--->_）

還要注意的是，咱們能夠映射依賴到咱們想要的變量上。若是咱們將上面代碼中的 $改成$，那咱們下面代碼的函數塊中引用到jQuery時都得用$代替$。

最重要的一點是：你絕對不能在上述代碼外的函數中引用變量 $和_，由於它對於外面來講就是一個不透明的沙箱。這就是那些規範想要達到的目標！

CommonJS

若是你用過  Node.js寫過代碼，那你會對CommonJS感到熟悉（由於就是隻有一些輕微的變更）。它已經變成使用Browserify開發的前端開發者中的一種趨勢。

用跟上面同樣的格式，下面就是採用 CommonJS規範的foo模塊寫法。

var $ = require('jquery'); 
function myFunc(){
    //...
}; 
module.exports = myFunc;

 

下面是應用了多依賴和多個暴露方法的複雜例子：

var $ = require('jquery');
var _ = require('underscore');

function a(){};    
function b(){};    
function c(){};   

module.exports = {
    b: b,
    c: c
};

 

UMD: 通用模塊定義

雖然 CommonJS和AMD的風格一樣大受歡迎，可是看起來彷佛它們並無達成共識。這樣的局面也致使了一種能同時支持兩種風格的須要出現，這帶給了咱們通用模塊定義。

下面這種模式誠然醜陋，可是能使 AMD和CommonJS和諧相處，還支持老式的global變量定義。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //    methods
    function myFunc(){};

    //    exposed public method
    return myFunc;
}));

 

保持一樣的模式實現更復雜的例子：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery', 'underscore'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
            module.exports = factory(require('jquery'), require('underscore'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery, root._);
    }
}(this, function ($, _) {
    //    methods
    function a(){};    //    private because it's not returned (see below)
    function b(){};    //    public because it's returned
    function c(){};    //    public because it's returned

    //    exposed public methods
    return {
        b: b,
        c: c
    }
}));