Common JS、AMD、CMD 和 UMD 的區別

Common JS

• 一個單獨的文件就是一個模塊，有本身的做用域。在一個文件裏定義的變量、函數、類都是私有的，對其餘文件不可見。
• 加載模塊使用 require 方法，該方法讀取一個文件並執行，最後返回該文件內部的 exports 對象。
• 模塊加載的順序，按照其在代碼中出現的順序。加載模塊是同步的，因此只有加載完才能執行後面的操做。
• 模塊能夠屢次加載，可是隻會在第一次加載時運行一次，而後運行結果就被緩存，之後再加載，就會直接讀取緩存結果。要想讓模塊再次運行，必須清除緩存。

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

AMD

• 異步加載模塊規範，這樣模塊和模塊的依賴能夠被異步加載。這和瀏覽器的異步加載模塊的環境恰好匹配。
• 本規範只定義了一個函數 define，它是全局變量。
• define.amd 是聽從 AMD 規範的一個特殊標識符，它的值爲一個對象。

CMD

• 本規範只定義了一個函數 define，它是全局變量。
• define.cmd 是聽從 CMD 規範的一個特殊標識符，它的值爲一個對象。

if (typeof define === "function" && define.cmd) {
  // 有 Sea.js 等 CMD 模塊加載器存在
}

複製代碼

UMD

UMD 是但願解決跨平臺的解決方案。

• UMD 是 AMD 和 Common JS 的糅合。
• AMD 以瀏覽器第一的原則發展，異步加載模塊。
• Common JS 以服務器第一原則發展，選擇同步加載，它的模塊無需包裝。
• UMD 先判斷是否支持 Node.js 的模塊（ exports ） 是否存在，存在則使用 Node.js 模塊模式。而後再判斷是否支持 AMD （ define 是否存在 ），存在則使用 AMD 方式加載模塊。

(function(window, factory){
    if(typeof exports === 'object'){
        // Common JS
        module.exports = factory();
    }else if(typeof define === 'function' && defined.amd){
        // AMD 方式
        define(factory);
    }else{
        window.eventUtil = factory();
    }
})(this, function(){
    // module ...
})

複製代碼

擴展

• 前端模塊化開發那點歷史
• Sea.js是如何工做的？