AMD & CMD

若是你聽過js模塊化這個東西，那麼你就應該聽過或CommonJS或AMD甚至是CMD這些規範咯，我也聽過，但以前也真的是聽聽而已。

 

   如今就看看吧，這些規範究竟是啥東西，幹嗎的。

 

 

 

1、CommonJS

 

 CommonJS就是爲JS的表現來制定規範，由於js沒有模塊的功能因此CommonJS應運而生，它但願js能夠在任何地方運行，不僅是 瀏覽器中。

 

 CommonJS能有必定的影響力，我以爲絕對離不開Node的人氣，不過喔，Node，CommonJS，瀏覽器甚至是W3C之間有什麼關係呢，我找到了個貼切的圖：

 

 

 

  |---------------瀏覽器----- ------------------|        |--------------------------CommonJS----------------------------------|

 

  |  BOM  |       | DOM |        | ECMAScript |         | FS |           | TCP |         | Stream |        | Buffer |          |........|

 

  |-------W3C-----------|       |---------------------------------------Node--------------------------------------------------|

 

 

 

CommonJS定義的模塊分爲:{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}

 

require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，惟一的導出口；module對象就表明模塊自己。

 

 

 

好比說咱們就能夠這樣用了：

 

複製代碼

1 //sum.js

2 exports.sum = function(){...作加操做..};

3 

4 //calculate.js

5 var math = require('sum');

6 exports.add = function(n){

7     return math.sum(val,n);

8 };

複製代碼

 

 

雖然說Node遵循CommonJS的規範，可是相比也是作了一些取捨，填了一些新東西的。

 

不過，說了CommonJS也說了Node，那麼我以爲也得先了解下NPM了。NPM做爲Node的包管理器，不是爲了幫助Node解決依賴包的安裝問題嘛，那它確定也要遵循CommonJS規範啦，它遵循包規範（仍是理論）的。

 

CommonJS WIKI講了它的歷史，還介紹了modules和packages等。

 

 

 

2、AMD

 

CommonJS是主要爲了JS在後端的表現制定的，他是不適合前端的，爲何這麼說呢？

 

這須要分析一下瀏覽器端的js和服務器端js都主要作了哪些事，有什麼不一樣了：

 

 

 

---------------------------------------服務器端JS   |    瀏覽器端JS-------------------------------------------

 

                                   相同的代碼須要屢次執行  |    代碼須要從一個服務器端分發到多個客戶端執行

 

                                     CPU和內存資源是瓶頸   |    帶寬是瓶頸

 

                                        加載時從磁盤中加載   |    加載時須要經過網絡加載

 

---------------------------------------------------------------------------------------------------------------

 

 

 

因而乎，AMD(異步模塊定義)出現了，它就主要爲前端JS的表現制定規範。

 

AMD就只有一個接口：define(id?,dependencies?,factory);

 

它要在聲明模塊的時候制定全部的依賴(dep)，而且還要當作形參傳到factory中，像這樣：

 

 

 

1 define(['dep1','dep2'],function(dep1,dep2){...});

 

 

要是沒什麼依賴，就定義簡單的模塊，下面這樣就能夠啦：

 

 

 

1 define(function(){

2     var exports = {};

3     exports.method = function(){...};

4     return exports;

5 });

 

 

咦，這裏有define，把東西包裝起來啦，那Node實現中怎麼沒看到有define關鍵字呢，它也要把東西包裝起來呀，其實吧，只是Node隱式包裝了而已.....

 

RequireJS就是實現了AMD規範的呢。

 

這有AMD的WIKI中文版，講了不少蠻詳細的東西，用到的時候能夠查看：AMD的WIKI中文版

 

 

 

3、CMD

 

大名遠揚的玉伯寫了seajs，就是遵循他提出的CMD規範，與AMD蠻相近的，不過用起來感受更加方便些，最重要的是中文版，應有盡有：seajs官方doc

 

 

 

1 define(function(require,exports,module){...});

 

 

用過seajs吧，這個不陌生吧，對吧。

 

 

 

 

玉伯對於 AMD 與 CMD 區別的解釋：

 

    AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

    CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

 

    相似的還有 CommonJS Modules/2.0 規範，是 BravoJS 在推廣過程當中對模塊定義的規範化產出還有很多??

 

 

    這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。

    目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。

 

 

    區別：

 

 

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

 

    2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼：

 

// CMD
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此處略去 100 行
    var b = require('./b') // 依賴能夠就近書寫
    b.doSomething()
    // ...
})

// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    // ...
})

 

雖然 AMD 也支持 CMD 的寫法，同時還支持將 require 做爲依賴項傳遞，但 RequireJS 的做者默認是最喜歡上面的寫法，也是官方文檔裏默認的模塊定義寫法。

 

 

    3. AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。好比 AMD 裏，require 分全局 require 和局部 require，都叫 require。CMD 裏，沒有全局 require，而是根據模塊系統的完備性，提供 seajs.use 來實現模塊系統的加載啓動。CMD 裏，每一個 API 都簡單純粹。

 

 

    4. 還有一些細節差別，具體看這個規範的定義就好，就很少說了。