前端模塊化進程，commonJS，AMD，CMD對比

firim 發布于2019-08-20 19:01 / 2126人閱讀

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

commonJS規范

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

1.模塊定義

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

// 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規范中，存在 require() 方法，這個方法接受模塊標示，以此引入一個模塊的API到當前的上下文中。
模塊引入的實例代碼

var math = require("math");

3.模塊標示

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

commonJS 和 AMD

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

服務器端	瀏覽器js
加載時從磁盤中加載	加載時需要通過網絡加載
相同的代碼需要多次執行	代碼需要從一個服務器端分發到多個客戶端執行
CPU和內存資源是瓶頸	帶寬是瓶頸

commonJS在服務器端運行完全沒有問題的，因為所有資源都在服務器端的磁盤里，加載速度很快。但是在瀏覽器端因為網速的限制，加載資源需要時間，會阻塞代碼的運行，而AMD(異步模塊定義)的出現，可以異。它的模塊定義如下：

define(id?, dependencies?, factory);

它的模塊id和依賴都是可選的，而factory函數的內容就是實際代碼內容，假設一個模塊不依賴任何一個模塊

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

引用的時候這樣寫

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

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

引入一個requirejs

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

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

2.加載我們自己的js

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

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

CMD規范

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

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

/** CMD寫法 **/
define(function(require, exports, module) {
    var a = require("./a"); //在需要時申明
    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 通過形參傳遞給模塊，在需要依賴模塊時，隨時引入，可以看出，與 AMD 規范相比，CMD 規范更加接近 node 對 commonJS規范的定義。

兼容多種模塊規范

技術在發展，優秀的開源項目也在不斷更新，比如jquery，underscore。它們很快出了兼容不同規范的版本，那么他們是怎么做到的，是寫好幾套符合不同規范的代碼么，當然不是。那么我們怎么寫出像他們那樣兼容不同規范的代碼呢，很簡單，我給出一個例子：

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

GPU云服務器云服務器 amd_cmd區別 amd模塊加載異步模塊加載機制-amd 模塊化機房廠家對比

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85037.html

前端模塊化規范筆記

摘要：目前通行的的模板規范共有兩種和的模塊系統，是參照規范實現的即為服務器端模塊的規范。規范則是非同步加載模塊，允許指定回調函數。目前通行的Javascript的模板規范共有兩種：CommonJS 和 AMD commonjs nodejs的模塊系統，是參照commonjs規范實現的 commonjs即為服務器端模塊的規范。 commonjs的規范：根據commonjs規范，一個單獨的...

honmaple 2019-08-21 10:56 評論0 收藏0
CommonJS、ES2015、AMD、CMD模塊規范對比與介紹

摘要：是服務器端模塊化的規范，是這種規范的實現。異步模塊定義和通用模塊定義都是瀏覽器端模塊化的規范。是在推廣過程中對模塊定義的規范化產出。前言：最近看到這樣一個問題「import ... from」、「 import ... = require()」和「import(path: string)」有什么區別？，我遇到的項目中大都是ES6模塊規范，其他規范也有，但為什么會有這些規范？具體...

MSchumi 2019-08-23 17:21 評論0 收藏0
模塊化

摘要：模塊化總結最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。模塊化的優點可維護性根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立對其進行改進和維護。模塊化總結最近重新復習的模塊化的相關知識，總結一下，僅供自己理解和大家參考。模塊化的優點可維護性：根據定義，每個模塊都是獨立的。良好設計的模塊會盡量與外部的代碼撇清關系，以便于獨立...

?xiaoxiao, 2019-08-20 17:45 評論0 收藏0
JS模塊化——CommonJS AMD CMD UMD ES6 Module 比較

摘要：即盡早地執行依賴模塊。阮一峰輸出值的引用模塊是動態關聯模塊中的值，輸出的是值得引用。的加載實現阮一峰運行時加載靜態編譯模塊是運行時加載，模塊是編譯時輸出接口。模塊化開發優點模塊化開發中，通常一個文件就是一個模塊，有自己的作用域，只向外暴露特定的變量和函數，并且可以按需加載。依賴自動加載，按需加載。提高代碼復用率，方便進行代碼的管理，使得代碼管理更加清晰、規范。減少了命名沖...

shadowbook 2019-08-26 13:40 評論0 收藏0
使用CommonJS，AMD以及CMD編寫模塊化JavaScripts

摘要：模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從開始寫，就一直都在模塊化編程啊我們寫一個文件然后我們在文件中引入然后調用方法哈哈這樣已經是模塊化模塊化編程首先，我想說說模塊化編程這個概念當我不清楚這個概念的時候，其實說什么模塊化編程多好多好都是懵逼的而我一直不覺得有多好，其實也是因為我從...

nifhlheimr 2019-08-22 10:34 評論0 收藏0