關於 CommonJS AMD CMD UMD 規範的差別總結

1、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 等解決方案。

 

2、AMD (Asynchromous Module Definition)

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

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

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

示例如-->

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

 

3、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 類庫。

」

 

4、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

小尾巴一擺就是一個季節！