JS MODULE 大戰

JS自己是一個多才多藝的語言，一個能夠用本身編譯本身的自由度極高的語言。正由於這份自由，出現了天花亂墜的規範與框架們，其中最基礎的一塊即是Module。

來來來，baby們，作個小測試： CommonJS·AMD·CMD·UMD·ES6，這些模塊規範，你們熟悉幾個？

注意注意：本文乃筆者主觀寫出的歡快脫線認知，也許和真正的模塊造成的歷史有所區別。

一切的根源

JS是一個自由度極高的語言，即便沒有模塊的概念。也能夠經過IIFE，new一個對象來實現相似與模塊的概念。也能夠實現可複用，做用域獨立，易維護。這樣散裝的，沒法維護各個模塊之間依賴。在一個JS文件中，模塊一多，也許就是修羅場。

Module的誕生

因而JS Module，一個使人又愛又恨的名詞誕生了。JS自己設計上就沒有模塊的概念，以後爲了讓JS變成一個功能強大的語言，業界大佬們各顯神通，定了一個名爲CommonJS的規範，實現了一個名爲模塊的東西。惋惜大多瀏覽器並不支持，只能用於nodejs，因而CommonJS開始分裂，變異了一個名爲AMD規範的模塊，能夠用於瀏覽器端，而因爲AMD與CommonJS規範相去甚遠，因而AMD自立門戶，而且推出了requireJS這個框架，用於實現並推廣AMD規範。正由於AMD與CommonJS如此不一樣，且用於不一樣的環境，爲了可以兼容兩個平臺，UMD應運而生，不過筆者認爲僅僅是一個polyfill，以兼容兩個平臺。此時，CommonJS的擁護者認爲，瀏覽端也能夠實現CommonJS的規範，因而稍做改動，造成了CMD規範，而且推出了seajs這個框架。正在AMD與CMD打得火熱的時候，ECMAScript6給JS自己定了一個模塊加載的功能，ES6表示「大家也別爭了，JS模塊有原生的語法了」。

真正的規範

對於衆多規範中，只有CommonJS和ES6 import/export是真正的規範，其他的是利用JS現有的支持的方法模擬出的環境，以實現各自的規範。

至於爲何說CommonJS和ES6 import/export是真正的規範呢？由於只有原生支持他們的語法，才能實現他們的規範。

對於CommonJS而言，運行環境中，必須有require和module.exports的支持，才能運行。這就是瀏覽器與CommonJS無緣的主要緣由。

至於ES6，失去對import和export關鍵字的支持，便一切都是零。好比，nodejs就不支持import和export，明明nodejs支持其餘的ES6語法，怎麼就對import和export如此不友好，筆者認爲nodejs是爲了實現commonJS的規範，所以不能接受ES6的模塊擾亂nodejs的模塊規範。

因此說CommonJS和ES6的模塊纔是真正的規範。

關於CommonJS和ES6模塊，筆者曾經寫過一篇關於他們的文章，這裏很少作贅述,移步至讀懂CommonJS的模塊加載。

有關瀏覽器實現CommonJS模塊的原理

既然瀏覽器缺乏CommonJS的兩個關鍵字致使，模塊不成立，那麼就建立一個模塊環境。使用define這個方法，將函數內部模擬成CommonJS的環境，提供require和module.export的方法。不管是seajs仍是requirejs都是經過define模擬環境的辦法，實現module的。

自立門戶的AMD

筆者以前正在DIY臺式機，挑選顯卡的時候，在A卡和N卡之間猶豫了一下，以後果斷選A卡，由於A卡便宜一點。這裏的A卡指的是AMD，那麼和此處JS的AMD有社麼關係嗎？沒有任何關係！只是由於JS模塊的AMD這個縮寫和人家美國的AMD公司的名字一致而已，這只是一個美麗的巧合。

AMD的全稱是Asynchronous Module Definition，中文名是異步模塊定義，不一樣於CommonJS的按需加載，也就是require了以後才加載，AMD是將全部的潛在須要用到的包都加載運行了，也就是傳說中的高配，至因而否用獲得就再也不AMD的考慮範圍以內了。requirejs就是AMD的表明：

來自AMD的暴擊：

define("module1",function(require) {
    'use strict';
    console.log("cccc")
});
define("module2",function(require) {
    'use strict';
    console.log("aaaa")
    if(false){
        console.log(require("module1"))
    }
    console.log("bbbb")
});

require(["module2"])
複製代碼

此時打印cccc,aaaa,bbbb，因而可知AMD是將全部的模塊，在模塊執行以前，就所有加載完畢了，因此AMD還有一種寫法是將全部的依賴模塊寫頭部。

define("module1",function(require) {
    'use strict';
    console.log("cccc")
});
define("module2",[module1],function(module1) {
    'use strict';
    console.log("aaaa")
    if(false){
        console.log(require("module1"))
    }
    console.log("bbbb")
});

複製代碼

瀏覽一下requirejs的源碼：

requirejs有兩種獲取依賴的方法，一種是配置，一種是利用正則匹配出全部的require的內容，而後加入依賴。當調用當前模塊的時候，就先檢查依賴的模塊是否運行了。

cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, 複製代碼

已經定義完成的模塊，會被緩存在一個對象之中，以模塊的名字爲惟一健值，以後若再次調用此緩存的模塊，則無需再次執行。

執行以後緩存結果

defined[id] = exports;
複製代碼

二次執行，先檢查是否已存在，若存在則不重複執行。

function callGetModule(args) {
    //Skip modules already defined.
    if (!hasProp(defined, args[0])) {
        getModule(makeModuleMap(args[0], null, true)).init(args[1], args[2]);
    }
}
複製代碼

如果遠程依賴，則建立一個script，加載遠程資源，並將script加入頭部。

req.createNode = function (config, moduleName, url) {
    var node = config.xhtml ?
            document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') :
            document.createElement('script');
    node.type = config.scriptType || 'text/javascript';
    node.charset = 'utf-8';
    node.async = true;
    return node;
};
複製代碼

那麼UMD是個什麼樣的存在

第一次接觸到UMD，是在webpack的打包之中，想要生成一個library，有好多個選項，CommonJS，amd，umd。當時一會兒有點懵，UMD是什麼？在不知情的狀況下，又出現了一個模塊規範，這讓筆者的頭很大啊。

來自webpack的凝視：

output: {
    path: path.join(__dirname),
    filename: 'index.js',
    libraryTarget: "umd",//此處是但願打包的插件類型
    library: "Swiper",
}
複製代碼

看一眼打包後的效果：

!function(root,callback){
"object"==typeof exports&&"object"==typeof module?//判斷是否是nodejs環境
    module.exports=callback(require("react"),require("prop-types"))
    :
    "function"==typeof define&&define.amd?//判斷是否是requirejs的AMD環境
        define("Swiper",["react","prop-types"],callback)
        :"object"==typeof exports?//至關於鏈接到module.exports.Swiper
            exports.Swiper=callback(require("react"),require("prop-types"))
            :
            root.Swiper=callback(root.React,root.PropTypes)//全局變量
}(window,callback)
複製代碼

這樣一個polyfill，瞬間就兼容了CommonJS，AMD和全局的一個模塊。這就是UMD，比起規範，不如說它是一個兼容，polyfill，支持多個模塊規範。

where is CMD？

眼尖的小夥伴應該發現了，CMD不翼而飛，webpack的打包中也沒有CMD模塊的一個選項。CMD其實就是按照CommonJS規範，而後進行改造，從而使之支持瀏覽器端的一種規範。

主要說說他和AMD的主要區別吧：

require關鍵字引入內容的執行順序。AMD是一個依賴提早加載的概念，而CMD是同步執行，遇到require以後再執行當前的一個模塊。

define("c",function(require, exports, module) {
    console.log("bbb")
});
define("b",function(require, exports, module) {
    console.log("aaa")
    require("c")
    console.log("ccc")
});
seajs.use("b")
複製代碼

這樣打印的就是 aaa，bbb，ccc。按照代碼出現的順序執行。

固然這個是同步代碼的區別，至於異步代碼，CMD和AMD都是經過script，append到head加載，存入模塊對象之中，而後根據id調用。不過CMD有一點不一樣，加了一個小小的優化：

if (!data.debug) {
    head.removeChild(node)
}
複製代碼

當代碼加載完畢以後，而且緩存在模塊之中以後，便在head之中刪除了這個script。

後記

借用魯迅的一句話「世上本沒有路，走的人多了也就成了路」。JS MODUDLE的規範也是如此，用的人多了也就是默認的解決方案了。

JS MODULE大戰就寫到這邊吧，你們都不曉得這些模塊的規範可以存活多久，可是概念都很好。因此好好學習概念，之後就算有新的規範出來了，和老規範一對比，找出不一樣點，加以分析，便可以輕鬆上手！

參考地址

不能忘記幫助筆者認知模塊的文章們，謝謝大佬們：

• requirejs：requirejs的官網對於AMD產生歷史的解釋。
• 前端模塊化開發那點歷史 ：seajs的大佬對模塊這一塊的見解，梳理了筆者對於AMD的困惑
• overflow上對於AMD和requirejs的一個解釋

首發掘金～轉載請註明出處