關於 CommonJS AMD CMD UMD

時間 2019-12-11

標籤關於 commonjs amd cmd umd 简体版

原文原文鏈接

1. CommonJShtml

CommonJS 原來叫 ServerJS, 是服務器端模塊的規範，Node.js採用了這個規範。前端

根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。git

// 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;

var test = require('./foobar').foobar;

test.bar();

CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這是就必須採用異步模式。因此就有了 AMD CMD 解決方案。github

CommonJS是主要爲了JS在後端的表現制定的，他是不適合前端的，爲何這麼說呢？編程

---------------------------------------服務器端JS | 瀏覽器端JS-------------------------------------------segmentfault

相同的代碼須要屢次執行 | 代碼須要從一個服務器端分發到多個客戶端執行後端

CPU和內存資源是瓶頸 | 帶寬是瓶頸api

加載時從磁盤中加載 | 加載時須要經過網絡加載數組

---------------------------------------------------------------------------------------------------------------瀏覽器

2. AMD

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

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

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

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

//經過數組引入依賴 ，回調函數經過形參傳入依賴
define(['someModule1', ‘someModule2’], function (someModule1, someModule2) {

    function foo () {
        /// someing
        someModule1.test();
    }

    return {foo: foo}
});

AMD規範容許輸出模塊兼容CommonJS規範，這時define方法以下：

define(function (require, exports, module) {
    
    var reqModule = require("./someModule");
    requModule.test();
    
    exports.asplode = function () {
        //someing
    }
});

3. CMD

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

1.對於依賴的模塊AMD是提早執行，CMD是延遲執行。不過RequireJS從2.0開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不經過）。

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