前端模塊化進(jìn)程，commonJS，AMD，CMD對比

firim 發(fā)布于2019-08-20 19:01 / 2125人閱讀

摘要：是另一種模塊化方案，它與很類似，不同點(diǎn)在于推崇依賴前置提前執(zhí)行，推崇依賴就近延遲執(zhí)行。

commonJS規(guī)范

隨著前端技術(shù)的不斷發(fā)展，項(xiàng)目越來越大，越來越不好管理，多人開發(fā)越來讓開發(fā)者頭疼，于是出現(xiàn)了命名空間，這沒有辦法的辦法，但是所有變量都是全局的話，管理非常混亂，而且在Node 出現(xiàn)前，javascript 在服務(wù)器端基本沒有市場，經(jīng)過javascript 不斷努力，社區(qū)為 javascript 制定了相應(yīng)的規(guī)范。其中 commonJS 規(guī)范的提出算是最為重要的里程碑。
commonJS對模塊的引用非常簡單，主要分為模塊引用、模塊定義和模塊標(biāo)示3部分

1.模塊定義

在模塊中，上下文提供了 require() 方法來引入外來模塊，引入對應(yīng)的功能。上下文還提供了 exports 對象，用來導(dǎo)出當(dāng)前模塊的方法或變量。上下文還提供了一個(gè)module對象，它代表模塊本身，而 exports 是 module 的屬性。在node中一個(gè)文件就是一個(gè)模塊，將方法掛載在exports上作為屬性即可定義導(dǎo)出方式。

// math.js
exports.add = function () {
    var sum = 0,
        i = 0,
        args = arguments,
        l = args.length;
    while (i < l) {
        sum += args[i];
        i++
    }
    return sum;
}

2.模塊引用

在commonJS規(guī)范中，存在 require() 方法，這個(gè)方法接受模塊標(biāo)示，以此引入一個(gè)模塊的API到當(dāng)前的上下文中。
模塊引入的實(shí)例代碼

var math = require("math");

3.模塊標(biāo)示

模塊標(biāo)示其實(shí)就是傳遞給require()的參數(shù)，必須符合小駝峰命名的字符串，或者以.，..開頭的相對路徑，或者絕對路徑。

commonJS 和 AMD

CommonJS是主要為了JS在后端的表現(xiàn)制定的，他是不適合前端的，為什么這么說呢？
這需要分析一下瀏覽器端的js和服務(wù)器端js都主要做了哪些事，有什么不同了：

服務(wù)器端	瀏覽器js
加載時(shí)從磁盤中加載	加載時(shí)需要通過網(wǎng)絡(luò)加載
相同的代碼需要多次執(zhí)行	代碼需要從一個(gè)服務(wù)器端分發(fā)到多個(gè)客戶端執(zhí)行
CPU和內(nèi)存資源是瓶頸	帶寬是瓶頸

commonJS在服務(wù)器端運(yùn)行完全沒有問題的，因?yàn)樗匈Y源都在服務(wù)器端的磁盤里，加載速度很快。但是在瀏覽器端因?yàn)榫W(wǎng)速的限制，加載資源需要時(shí)間，會(huì)阻塞代碼的運(yùn)行，而AMD(異步模塊定義)的出現(xiàn)，可以異。它的模塊定義如下：

define(id?, dependencies?, factory);

它的模塊id和依賴都是可選的，而factory函數(shù)的內(nèi)容就是實(shí)際代碼內(nèi)容，假設(shè)一個(gè)模塊不依賴任何一個(gè)模塊

//math.js
define(function () {
    var math = {};
    math.add = function (arr) {
        for(var i = 0, sum = 0; i < arr.length; i++) {
            sum += arr[i];
        }
        return sum;
    }
    math.muti = function (arr) {
        for(var i = 0, sum = 0; i < arr.length; i++) {
            sum *= arr[i];
        }
        return sum;
    }
})

引用的時(shí)候這樣寫

//main.js
define(["math", function(math) {
    var arr = [1, 10, 20],
        sum = math.add(arr);
    console.log(sum);   //31
}]

當(dāng)然這是原理，大家明白了之后，對于入門者，估計(jì)還是不知道怎么去用，那么我就幫人幫到底（會(huì)用的繞過）。

引入一個(gè)requirejs

如果覺得覺得這個(gè)文件加載也會(huì)堵塞 js 的話就把他放在代碼的底部，然后這樣寫

其中defer是為了兼容IE瀏覽器。加載完requirejs之后，怎么加載我們自己的js呢

2.加載我們自己的js

// main.js
// 首先用config()指定各模塊路徑和引用名
require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",  //實(shí)際路徑為js/lib/jquery.min.js
    "underscore": "underscore.min",
  }
});
// 執(zhí)行基本操作
require(["jquery","underscore"],function($,_){
  // some code here
});

data-main 屬性里面的就是我們自己的入口文件了，由于 requirejs 默認(rèn)加載 js 文件的，所以后綴 js 可以省略。OK，下面就可以快樂的寫模塊了。

CMD規(guī)范

CMD規(guī)范由國內(nèi)的玉伯大神指出。是另一種js模塊化方案，它與AMD很類似，不同點(diǎn)在于：AMD 推崇依賴前置、提前執(zhí)行，CMD推崇依賴就近、延遲執(zhí)行。

/** AMD寫法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { 
     // 等于在最前面聲明并初始化了要用到的所有模塊
    a.doSomething();
    if (false) {
        // 即便沒用到某個(gè)模塊 b，但 b 還是提前執(zhí)行了
        b.doSomething()
    } 
});

/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require("./a"); //在需要時(shí)申明
    a.doSomething();
    if (false) {
        var b = require("./b");
        b.doSomething();
    }
});

/** sea.js **/
// 定義模塊 math.js
define(function(require, exports, module) {
    var $ = require("jquery.js");
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});

require, exports 和 module 通過形參傳遞給模塊，在需要依賴模塊時(shí)，隨時(shí)引入，可以看出，與 AMD 規(guī)范相比，CMD 規(guī)范更加接近 node 對 commonJS規(guī)范的定義。

兼容多種模塊規(guī)范

技術(shù)在發(fā)展，優(yōu)秀的開源項(xiàng)目也在不斷更新，比如jquery，underscore。它們很快出了兼容不同規(guī)范的版本，那么他們是怎么做到的，是寫好幾套符合不同規(guī)范的代碼么，當(dāng)然不是。那么我們怎么寫出像他們那樣兼容不同規(guī)范的代碼呢，很簡單，我給出一個(gè)例子：

//hello.js
;(function(name, definition){
    //檢測上下文環(huán)境是否為 AMD 或 CMD
    var hasDefine = typeof define === "function",
        hasExports = typeof module !== "undefined" && module.exports;
    if (hasDefine) {
        //AMD 環(huán)境或 CMD 環(huán)境
        define(definition);
    } else if (hasExports) {
        // 定義為普通的node模塊
        module.exports = definition();
    } else {
        //將模塊的執(zhí)行結(jié)果掛在 window 變量中，在瀏覽器中 this 指向 window 對象
        this[name] = definition();
    }
})("hello", function() {
    //代碼主體
    var hello = function () {};
    return hello;
})