模塊化是指在解決某一個(gè)復(fù)雜問(wèn)題或者一系列的雜糅問(wèn)題時(shí)，依照一種分類(lèi)的思維把問(wèn)題進(jìn)行系統(tǒng)性的分解以之處理。模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理，可維護(hù)性更高的可管理的模塊的方式。可以想象一個(gè)巨大的系統(tǒng)代碼，被整合優(yōu)化分割成邏輯性很強(qiáng)的模塊時(shí)，對(duì)于軟件是一種何等意義的存在。對(duì)于軟件行業(yè)來(lái)說(shuō)：解耦軟件系統(tǒng)的復(fù)雜性，使得不管多么大的系統(tǒng)，也可以將管理，開(kāi)發(fā)，維護(hù)變得“有理可循”。

還有一些對(duì)于模塊化一些專業(yè)的定義為：模塊化是軟件系統(tǒng)的屬性，這個(gè)系統(tǒng)被分解為一組高內(nèi)聚，低耦合的模塊。那么在理想狀態(tài)下我們只需要完成自己部分的核心業(yè)務(wù)邏輯代碼，其他方面的依賴可以通過(guò)直接加載被人已經(jīng)寫(xiě)好模塊進(jìn)行使用即可。

一、AMD

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

它要在聲明模塊的時(shí)候制定所有的依賴(dep)，并且還要當(dāng)做形參傳到factory中，像這樣：

要是沒(méi)什么依賴，就定義簡(jiǎn)單的模塊，下面這樣就可以啦

define(function(){
  var exports = {};
  exports.method = function(){...};
  return exports;
});

這里有define，把東西包裝起來(lái)，那Node實(shí)現(xiàn)中怎么沒(méi)看到有define關(guān)鍵字呢，它也要把東西包裝起來(lái)，其實(shí)，只是Node隱式包裝了而已..

RequireJS就是實(shí)現(xiàn)了AMD規(guī)范的

二、CMD

玉伯寫(xiě)了seajs，就是遵循他提出的CMD規(guī)范，比AMD稍微強(qiáng)大點(diǎn)，用起來(lái)感覺(jué)也方便些

三、AMD與CMD的區(qū)別

CMD相當(dāng)于按需加載，定義一個(gè)模塊的時(shí)候不需要立即制定依賴模塊，在需要的時(shí)候require就可以了，比較方便；而AMD則相反，定義模塊的時(shí)候需要制定依賴模塊，并以形參的方式引入factory中

//AMD方式定義模塊

define(['dep1','dep2'],function(dep1,dep2){
  //內(nèi)部只能使用制定的模塊
  return function(){};
});

//CMD

define(function(require,exports,module){
 //此處如果需要某XX模塊，可以引入
 var xx=require('XX');
});

而SEAJS也有use功能也是需要先引入所有依賴的模塊，如

//SEAJS.Use方式
seajs.use(['dep1','dep2'],function(dep1,dep2){
  //這里實(shí)現(xiàn)事務(wù)
});

 四、插件支持

但全球有兩種比較流行的 JavaScript 模塊化體系，一個(gè)是 Node 實(shí)現(xiàn)的 CommonJS，另外一個(gè)是 AMD。很多類(lèi)庫(kù)都同時(shí)支持 AMD 和 CommonJS，但是不支持 CMD?；蛟S國(guó)內(nèi)有很多 CMD 模塊，但并沒(méi)有在世界上流行起來(lái)。

現(xiàn)在比較火的 React 及周邊類(lèi)庫(kù)，就是直接使用 CommonJS 的模塊體系，使用 npm 管理模塊，使用 Browserify 打包輸出模塊。
不久的將來(lái) ES6 中新的模塊化標(biāo)準(zhǔn)，可能就都得遵循新的標(biāo)準(zhǔn)了，什么AMD、CMD可能到時(shí)也不會(huì)怎么用了。

但是目前來(lái)說(shuō)，前端開(kāi)發(fā)沒(méi)有用模塊化編程就真的out的了，而目前的模塊化編程，本人還是建議用SEAJS，雖然很多插件需要追加或修改一小塊代碼才能支持。但改過(guò)一次就能反復(fù)使用，也不會(huì)影響其它標(biāo)準(zhǔn)的支持?？傮w還算是比較方便實(shí)用的。

單獨(dú)解釋AMD 與 CMD 區(qū)別到底在哪里？

    看了以上 AMD，requireJS 與 CMD， seaJS的簡(jiǎn)單介紹會(huì)有點(diǎn)感覺(jué)模糊，總感覺(jué)較為相似。因?yàn)橄?requireJS 其并不是只是純粹的AMD固有思想，其也是有CMD規(guī)范的思想，只不過(guò)是推薦 AMD規(guī)范方式而已， seaJS也是一樣。

    下面是玉伯對(duì)于 AMD 與 CMD 區(qū)別的解釋：

    AMD 是 RequireJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

    CMD 是 SeaJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出。

    類(lèi)似的還有 CommonJS Modules/2.0 規(guī)范，是 BravoJS 在推廣過(guò)程中對(duì)模塊定義的規(guī)范化產(chǎn)出還有不少??

    這些規(guī)范的目的都是為了 JavaScript 的模塊化開(kāi)發(fā)，特別是在瀏覽器端的。 

   目前這些規(guī)范的實(shí)現(xiàn)都能達(dá)成瀏覽器端模塊化開(kāi)發(fā)的目的。    

 區(qū)別：

    1. 對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過(guò) RequireJS 從 2.0 開(kāi)始，也改成可以延遲執(zhí)行（根據(jù)寫(xiě)法不同，處理方式不同）。CMD 推崇 as lazy as possible.

    2. CMD 推崇依賴就近，AMD 推崇依賴前置?？创a：

// CMD

define(function(require, exports, module) {
 var a = require('./a')
 a.doSomething()
 // 此處略去 100 行
 var b = require('./b') // 依賴可以就近書(shū)寫(xiě)
 b.doSomething()
 // ...
})

// AMD 默認(rèn)推薦的是

define(['./a', './b'], function(a, b) { // 依賴必須一開(kāi)始就寫(xiě)好
 a.doSomething()
 // 此處略去 100 行
 b.doSomething()
 // ...
})

雖然 AMD 也支持 CMD 的寫(xiě)法，同時(shí)還支持將 require 作為依賴項(xiàng)傳遞，但 RequireJS 的作者默認(rèn)是最喜歡上面的寫(xiě)法，也是官方文檔里默認(rèn)的模塊定義寫(xiě)法。

    3. AMD 的 API 默認(rèn)是一個(gè)當(dāng)多個(gè)用，CMD 的 API 嚴(yán)格區(qū)分，推崇職責(zé)單一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，沒(méi)有全局 require，而是根據(jù)模塊系統(tǒng)的完備性，提供 seajs.use 來(lái)實(shí)現(xiàn)模塊系統(tǒng)的加載啟動(dòng)。

CMD 里，每個(gè) API 都簡(jiǎn)單純粹。

    4. 還有一些細(xì)節(jié)差異，具體看這個(gè)規(guī)范的定義就好，就不多說(shuō)了。

最新評(píng)論