淺析AMD CMD CommonJS規范--javascript模塊化加載學習心得總結
來源:易賢網 閱讀:915 次 日期:2016-07-19 16:00:59
溫馨提示:易賢網小編為您整理了“淺析AMD CMD CommonJS規范--javascript模塊化加載學習心得總結”,方便廣大網友查閱!

這是一篇關于javascript模塊化AMD,CMD,CommonJS的學習總結,作為記錄也給同樣對三種方式有疑問的童鞋們,有不對或者偏差之處,望各位大神指出,不勝感激。

本篇默認讀者大概知道require,seajs的用法(AMD,CMD用法),所以沒有加入使用語法。

1、為何而生:

 這三個規范都是為javascript模塊化加載而生的,都是在用到或者預計要用到某些模塊時候加載該模塊,使得大量的系統巨大的龐雜的代碼得以很好的組織和管理。模塊化使得我們在使用和管理代碼的時候不那么混亂,而且也方便了多人的合作。

2、那些規范們:

(1)、CommonJS 是一個有志于構建 JavaScript 生態圈的組織。整個社區致力于提高 JavaScript 程序的可移植性和可交換性,無論是在服務端還是瀏覽器端。

a group with a goal of building up the JavaScript ecosystem for web servers, desktop and command line apps and in the browser.

一個有目標的構建JavaScript生態系統Web服務器組,在瀏覽器和命令行應用程序和桌面。(他自己wiki上這么說的)

這個組織呢制定了一些規范 (可以去他們網站看看 http://www.commonjs.org/)包括CommonJS Modules/1.0 規范,我們平時所說的commonjs規范,說的就是這個了。

“The CommonJS API will fill that gap by defining APIs that handle many common application needs, ultimately providing a standard library as rich as those of Python, Ruby and Java. ”--(出自 http://www.commonjs.org/)

所以說Commonjs是一個更偏向于服務器端的規范。Node.js采用了這個規范。 根據CommonJS規范,一個單獨的文件就是一個模塊。加載模塊使用require方法,該方法讀 取一個文件并執行,最后返回文件內部的exports對象。

他又說了,可以用在下面這些場景  ,所以他更明顯的偏向服務器端。當然你也可以把它用在瀏覽器里邊(他們自己說可以)。

•Server-side JavaScript applications

•Command line tools

•Desktop GUI-based applications

•Hybrid applications (Titanium, Adobe AIR)

(2)、AMD規范

Commonjs解決了模塊化的問題,并且可以用在瀏覽器中,但是Commonjs是同步加載模塊,當要用到該模塊了,現加載現用,這種同步機制到了瀏覽器里邊就有問題了,加載速度啊啥的(覽器同步加載模塊會導致性能、可用性、調試和跨域訪問等問題)。

鑒于瀏覽器的特殊情況,又出現了一個規范,這個規范呢可以實現異步加載依賴模塊,并且會提前加載那就是AMD規范。AMD可以作為CommonJS模塊一個中轉的版本只要CommonJS沒有被用來同步的require調用。使用同步require調用的CommonJS代碼可以被轉換為使用回調風格的AMD模塊加載器(https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)  (它說的)。

下面是一個使用了簡單CommonJS轉換的模塊定義(它是amd規范的一種用法):

代碼如下:

   define(function (require, exports, module) {

     var a = require('a'),

         b = require('b');

     exports.action = function () {};

   });

所以說AMD和Commonjs是兼容的,只要稍稍調換一下調用方法就實現了同步加載(我很懷疑amd也是在commonjs基礎上加了個殼,然后并沒有找到其他的神馬說明和支持的文字,找到了一定加到這)。

看一下AMD規范你會發現,AMD基本都是提前說明依賴模塊,然后預加載這些模塊,實際上這就要求你提前想好這些依賴,提前寫好,不然寫代碼過程中要回到開頭繼續添加依賴。

(3)、CMD

不知道是不是針對這個問題,淘寶的玉伯大牛搞了個seajs出來,并聲稱這個規范是遵循CMD規范的,然后給出了這個規范的一個連接(打開會發現draft字樣)。關于這個規范呢玉伯在知乎是這么說的

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

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

類似的還有 CommonJS Modules/2.0 規范,是 BravoJS 在推廣過程中對模塊定義的規范化產出。

還有不少⋯⋯

所以這個規范實際上是為了Seajs的推廣然后搞出來的。那么看看SeaJS是怎么回事兒吧,基本就是知道這個規范了。

同樣Seajs也是預加載依賴js跟AMD的規范在預加載這一點上是相同的,明顯不同的地方是調用,和聲明依賴的地方。AMD和CMD都是用difine和require,但是CMD標準傾向于在使用過程中提出依賴,就是不管代碼寫到哪突然發現需要依賴另一個模塊,那就在當前代碼用require引入就可以了,規范會幫你搞定預加載,你隨便寫就可以了。但是AMD標準讓你必須提前在頭部依賴參數部分寫好(沒有寫好? 倒回去寫好咯)。這就是最明顯的區別。

3、共生共處

由于CommonJS是服務器端的規范,更另外兩個標準實際不沖突。

AMD在國外用的更多,當然國內也是不少的,jQuery1,7版本開始使用,Dojo在1.6版本開始用,這已經能夠證明它足夠牛x了。

CMD當然也有很多人在用,但是基本都集中在國內,Seajs官網就展示了一大堆牛逼的公司在用(包括愛奇藝,騰訊微博,支付寶,淘寶等一大堆,去這看看http://seajs.org/docs/),估計小的不出名的也不計其數了,畢竟很多公司招聘都要求會seajs嘛。

所以三個規范目前都挺好(其實也主要是因為js么有自己的模塊加載機制,es6出來之后不知道會怎樣)。

當我們寫一個文件需要兼容不同的加載規范的時候怎么辦呢,看看下面的代碼。

(function (root, factory) { 

  if (typeof define === 'function' && define.amd) { 

    // AMD 

    define(['jquery', 'underscore'], factory); 

  } else if (typeof exports === 'object') { 

    // Node, CommonJS之類的 

    module.exports = factory(require('jquery'), require('underscore')); 

  } else { 

    // 瀏覽器全局變量(root 即 window) 

    root.returnExports = factory(root.jQuery, root._); 

  } 

}(this, function ($, _) { 

  // 方法 

  function a(){}; // 私有方法,因為它沒被返回 (見下面) 

  function b(){}; // 公共方法,因為被返回了 

  function c(){}; // 公共方法,因為被返回了 

  // 暴露公共方法 

  return { 

    b: b, 

    c: c 

  } 

}));

這個代碼可以兼容各種加載規范了。

4、AMD和CMD的區別

下面這幾點是玉伯在知乎上說的。

1. 對于依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.

2. CMD 推崇依賴就近,AMD 推崇依賴前置。

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

4. 還有一些細節差異,具體看這個規范的定義就好,就不多說了。

( 好吧~第四點是不多說了。。。。。。。。。)

5、AMD和CMD的一些相同

都有difine和require,而且調用方式實際都可以添加依賴參數,也就是說都可以用提供依賴參數的方式來實現預加載依賴模塊(但是不推薦因為  注意:帶 id 和 deps 參數的 define 用法不屬于 CMD 規范,而屬于 Modules/Transport 規范。---來自:https://github.com/seajs/seajs/issues/242)。

AMD也可以在factory中使用require來現加載用到的模塊,但是這個模塊就不會預先加載,屬于用到才加載的同步加載了。

var a = require('a'); // 加載模塊a

有不妥之處,歡迎斧正。

以上這篇淺析AMD CMD CommonJS規范--javascript模塊化加載學習心得總結就是小編分享給大家的全部內容了,希望能給大家一個參考

更多信息請查看網絡編程
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看