關於CommonJS、AMD、CMD、UMD說明

CommonJS規範

CommonJS定義的模塊分爲3部分:

1. require 模塊引用

2. exports 模塊導出

3. module 模塊自己

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

// a.js

var a = {
    "a":a,
    "b":b
}

module.export = a //模塊導出

// b.js
var b = require('./a.js') //模塊引入

CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做

AMD(Asynchromous Module Definition)規範

1. AMD 加載模塊是異步的

2. define(id?, dependencies?, factory);

   id: 模塊標識，能夠省略。
   dependencies: 所依賴的模塊，能夠省略。
   factory: 模塊的實現，或者一個JavaScript對象。

//a.js 只有factory
   define(function() {
       return {
           mix: function(source, target) {
               ...
            }
        };
    });
    
    //b.js 依賴a.js
    define(['a'], function(a) {
        return {
            show: function() {
               ...
            }
        }
    });
    
    //c.js 依賴a.js b.js
    define(['a', 'b'], function(a, b) {
        ....
    });
    
    //d.js 對象模塊
    define({
        data1: [],
        data2: []
    });

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

define(function (require, exports, module) {
        var reqModule = require("./a.js");
        requModule.mix();
        
        exports.asplode = function () {
            ...
        }
    });

CMD(Common Module Definition)規範

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

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

2. CMD推崇依賴就近，AMD推崇依賴前置

//AMD寫法
    define(['./a','./b'], function (a, b) {
        //依賴一開始就寫好
        a.mix();
        b.show();
    });
    
    //CMD寫法
    define(function (requie, exports, module) {
        //依賴能夠就近書寫
        var a = require('./a');
        a.mix();
        
        if (...) {
            var b = requie('./b');
            b.show();
        }
    });

UMD(Universal Module Definition)規範

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

應用UMD規範的js文件其實就是一個當即執行函數。函數有兩個參數，第一個參數是當前運行時環境，第二個參數是模塊的定義體。在執行UMD規範時，會優先判斷是當前環境是否支持AMD環境，而後再檢驗是否支持CommonJS環境，不然認爲當前環境爲瀏覽器環境（ window ）