理解AMD ，CMD，CommonJS規範

https://blog.csdn.net/xcymorningsun/article/details/52709608

 

理解AMD ，CMD，CommonJS規範

2016年09月30日 10:33:00 gis_morningsun 閱讀數 10724

 

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

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

 

 

一、爲什麼而生：

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

 

二、那些規範們：

      （1)、CommonJS 是一個有志於構建 JavaScript 生態圈的組織。整個社區致力於提升 JavaScript 程序的可移植性和可交換性，不管是在服務端仍是瀏覽器端。

　　　　 a groupwith a goal of building up the JavaScript ecosystem for web servers, desktopand command line apps and in the browser.

　　　　一個有目標的構建JavaScript生態系統Web服務器組，在瀏覽器和命令行應用程序和桌面。（他本身wiki上這麼說的）

           這個組織呢制定了一些規範 （能夠去他們網站看看 http://www.commonjs.org/）包括CommonJS Modules/1.0 規範，咱們平時所說的commonjs規範，說的就是這個了。

          「TheCommonJS API will fill that gap by defining APIs that handle many commonapplication needs, ultimately providing a standard library as rich as those ofPython, 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 在推廣過程當中對模塊定義的規範化產出。
　　　　　　相似的還有 CommonJSModules/2.0 規範，是 BravoJS 在推廣過程當中對模塊定義的規範化產出。
　　　　　　還有很多⋯⋯

　　　　　　「

　　 　　因此這個規範其實是爲了Seajs的推廣而後搞出來的。那麼看看SeaJS是怎麼回事兒吧，基本就是知道這個規範了。

　　　　一樣Seajs也是預加載依賴js跟AMD的規範在預加載這一點上是相同的，明顯不一樣的地方是調用，和聲明依賴的地方。AMD和CMD都是用difine和require，可是CMD標準傾向於在使用過程當中提出依賴，就是無論代碼寫到哪忽然發現須要依賴另外一個模塊，那就在當前代碼用require引入就能夠了，規範會幫你搞定預加載，你隨便寫就能夠了。可是AMD標準讓你必須提早在頭部依賴參數部分寫好（沒有寫好？ 倒回去寫好咯）。這就是最明顯的區別。

 

三、共生共處

　　因爲CommonJS是服務器端的規範，更另外兩個標準實際不衝突。

　　AMD在國外用的更多，固然國內也是很多的，jQuery1,7版本開始使用，Dojo在1.6版本開始用，這已經可以證實它足夠牛x了。

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

      因此三個規範目前都挺好（其實也主要是由於js麼有本身的模塊加載機制，es6出來以後不知道會怎樣）。

　　當咱們寫一個文件須要兼容不一樣的加載規範的時候怎麼辦呢，看看下面的代碼。

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

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

這個代碼能夠兼容各類加載規範了。

　　

四、AMD和CMD的區別

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

 

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

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

 

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

 

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

     （ 好吧~第四點是很少說了。。。。。。。。。）

 

五、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