關於 CommonJS AMD CMD UMD 規范的差異總結

一、CommonJS 主要是用於服務器端的規范，比如目前的nodeJS.

根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其他文件是不可見的。

// foo.js
var request = require('request').default({ 
    timeout: 4000
});

module.exports = function(){ 
    this.re = '';
    this.req = function(url){ 
        request(url,function(error,status,res){ 
            this.re = res;
        });
    }
};
//---------------------------------------------
// main.js

var Foo = require('./foo');
var foo = new Foo();
foo.req('http://www.baidu.com');
//這么個異步法  foo.re應該是空的吧..
console.log(foo.re);

CommonJS 加載模塊是同步的.所以只有加載完成才能執行后面的操作。

像Node.js主要用於服務器的編程，加載的模塊文件一般都已經存在本地硬盤，所以加載起來比較快，不用考慮異步加載的方式，所以CommonJS規范比較適用。

但如果是瀏覽器環境，要從服務器加載模塊，這是就必須采用異步模式。所以就有了 AMD  CMD 等解決方案。

 

二、AMD (Asynchromous Module Definition)

AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出

AMD異步加載模塊。它的模塊支持對象 函數 構造器 字符串 JSON等各種類型的模塊。

適用AMD規范適用define方法定義模塊。

示例如-->

AMD 運行時核心思想是「Early Executing」，也就是提前執行依賴

 

三、CMD  (Common Module Definition)

CMD是SeaJS 在推廣過程中對模塊定義的規范化產出

示例如-->

CMD和AMD的區別有以下幾點：

1.對於依賴的模塊AMD是提前執行，CMD是延遲執行。

2.CMD推崇依賴就近，按需加載；AMD推崇依賴前置。

 

那seajs和requirejs的差別呢？

“

1. 定位有差異。RequireJS 想成為瀏覽器端的模塊加載器，同時也想成為 Rhino / Node 等環境的模塊加載器。Sea.js 則專注於 Web 瀏覽器端，同時通過 Node 擴展的方式可以很方便跑在 Node 環境中。

2. 遵循的規范不同。RequireJS 遵循 AMD（異步模塊定義）規范，Sea.js 遵循 CMD （通用模塊定義）規范。規范的不同，導致了兩者 API 不同。Sea.js 更貼近 CommonJS Modules/1.1 和 Node Modules 規范。

3. 推廣理念有差異。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區采納。Sea.js 不強推，采用自主封裝的方式來“海納百川”，目前已有較成熟的封裝策略。

4. 對開發調試的支持有差異。Sea.js 非常關注代碼的開發調試，有 nocache、debug 等用於調試的插件。RequireJS 無這方面的明顯支持。

5. 插件機制不同。RequireJS 采取的是在源碼中預留接口的形式，插件類型比較單一。Sea.js 采取的是通用事件機制，插件類型更豐富。

      總之，如果說 RequireJS 是 Prototype 類庫的話，則 Sea.js 致力於成為 jQuery 類庫。

”

 

四、UMD

umd是AMD和CommonJS的糅合

AMD 瀏覽器第一的原則發展 異步加載模塊。

CommonJS 模塊以服務器第一原則發展，選擇同步加載，它的模塊無需包裝(unwrapped modules)。

這迫使人們又想出另一個更通用的模式UMD （Universal Module Definition）。希望解決跨平台的解決方案。

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 ...
});

 

參考：http://my.oschina.net/felumanman/blog/263330?p=1