JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
模塊化是指在解決某一個復(fù)雜問題或者一系列的雜糅問題時,依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。模塊化是一種處理復(fù)雜系統(tǒng)分解為代碼結(jié)構(gòu)更合理,可維護(hù)性更高的可管理的模塊的方式??梢韵胂笠粋€巨大的系統(tǒng)代碼,被整合優(yōu)化分割成邏輯性很強(qiáng)的模塊時,對于軟件是一種何等意義的存在。對于軟件行業(yè)來說:解耦軟件系統(tǒng)的復(fù)雜性,使得不管多么大的系統(tǒng),也可以將管理,開發(fā),維護(hù)變得“有理可循”。
還有一些對于模塊化一些專業(yè)的定義為:模塊化是軟件系統(tǒng)的屬性,這個系統(tǒng)被分解為一組高內(nèi)聚,低耦合的模塊。那么在理想狀態(tài)下我們只需要完成自己部分的核心業(yè)務(wù)邏輯代碼,其他方面的依賴可以通過直接加載被人已經(jīng)寫好模塊進(jìn)行使用即可。
一、AMD
AMD就只有一個接口:define(id?,dependencies?,factory);
它要在聲明模塊的時候制定所有的依賴(dep),并且還要當(dāng)做形參傳到factory中,像這樣:
define(['dep1','dep2'],function(dep1,dep2){...});
要是沒什么依賴,就定義簡單的模塊,下面這樣就可以啦
define(function(){
var exports = {};
exports.method = function(){...};
return exports;
});
這里有define,把東西包裝起來,那Node實(shí)現(xiàn)中怎么沒看到有define關(guān)鍵字呢,它也要把東西包裝起來,其實(shí),只是Node隱式包裝了而已..
RequireJS就是實(shí)現(xiàn)了AMD規(guī)范的
二、CMD
玉伯寫了seajs,就是遵循他提出的CMD規(guī)范,比AMD稍微強(qiáng)大點(diǎn),用起來感覺也方便些
三、AMD與CMD的區(qū)別
CMD相當(dāng)于按需加載,定義一個模塊的時候不需要立即制定依賴模塊,在需要的時候require就可以了,比較方便;而AMD則相反,定義模塊的時候需要制定依賴模塊,并以形參的方式引入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 模塊化體系,一個是 Node 實(shí)現(xiàn)的 CommonJS,另外一個是 AMD。很多類庫都同時支持 AMD 和 CommonJS,但是不支持 CMD。或許國內(nèi)有很多 CMD 模塊,但并沒有在世界上流行起來。
現(xiàn)在比較火的 React 及周邊類庫,就是直接使用 CommonJS 的模塊體系,使用 npm 管理模塊,使用 Browserify 打包輸出模塊。
不久的將來 ES6 中新的模塊化標(biāo)準(zhǔn),可能就都得遵循新的標(biāo)準(zhǔn)了,什么AMD、CMD可能到時也不會怎么用了。
但是目前來說,前端開發(fā)沒有用模塊化編程就真的out的了,而目前的模塊化編程,本人還是建議用SEAJS,雖然很多插件需要追加或修改一小塊代碼才能支持。但改過一次就能反復(fù)使用,也不會影響其它標(biāo)準(zhǔn)的支持??傮w還算是比較方便實(shí)用的。
單獨(dú)解釋AMD 與 CMD 區(qū)別到底在哪里?
看了以上 AMD,requireJS 與 CMD, seaJS的簡單介紹會有點(diǎn)感覺模糊,總感覺較為相似。因?yàn)橄?requireJS 其并不是只是純粹的AMD固有思想,其也是有CMD規(guī)范的思想,只不過是推薦 AMD規(guī)范方式而已, seaJS也是一樣。
下面是玉伯對于 AMD 與 CMD 區(qū)別的解釋:
AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
類似的還有 CommonJS Modules/2.0 規(guī)范,是 BravoJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出還有不少??
這些規(guī)范的目的都是為了 JavaScript 的模塊化開發(fā),特別是在瀏覽器端的。
目前這些規(guī)范的實(shí)現(xiàn)都能達(dá)成瀏覽器端模塊化開發(fā)的目的。
區(qū)別:
1. 對于依賴的模塊,AMD 是提前執(zhí)行,CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始,也改成可以延遲執(zhí)行(根據(jù)寫法不同,處理方式不同)。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 默認(rèn)推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
// ...
})
雖然 AMD 也支持 CMD 的寫法,同時還支持將 require 作為依賴項(xiàng)傳遞,但 RequireJS 的作者默認(rèn)是最喜歡上面的寫法,也是官方文檔里默認(rèn)的模塊定義寫法。
3. AMD 的 API 默認(rèn)是一個當(dāng)多個用,CMD 的 API 嚴(yán)格區(qū)分,推崇職責(zé)單一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,沒有全局 require,而是根據(jù)模塊系統(tǒng)的完備性,提供 seajs.use 來實(shí)現(xiàn)模塊系統(tǒng)的加載啟動。
CMD 里,每個 API 都簡單純粹。
4. 還有一些細(xì)節(jié)差異,具體看這個規(guī)范的定義就好,就不多說了。
相關(guān)文章
JavaScript常用8種數(shù)組去重代碼實(shí)例
這篇文章主要介紹了JavaScript常用8種數(shù)組去重代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
基于javascript顯示當(dāng)前時間以及倒計時功能
這篇文章主要為大家詳細(xì)介紹了基于javascript顯示當(dāng)前時間以及倒計時功能的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03
JavaScript內(nèi)置日期、時間格式化時間實(shí)例代碼
JS中的 Date 對象用于處理日期和時間,Date對象和Math對象不一樣,Date是一個構(gòu)造函數(shù),需要實(shí)例化后才能使用對象中具體的方法和屬性。這篇文章主要給大家介紹了關(guān)于JavaScript內(nèi)置日期、時間格式化時間的相關(guān)資料,需要的朋友可以參考下2021-05-05
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題的解決方案
Bootstrap modal 多彈窗之疊加顯示不出彈窗問題,今天小編抽時間給大家分享下解決方案,需要的朋友參考下2017-02-02
JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿觸屏手機(jī)撥號盤界面及功能模擬完整實(shí)例,可以實(shí)現(xiàn)逼真模擬手機(jī)撥號盤界面并實(shí)現(xiàn)點(diǎn)擊輸入對應(yīng)號碼的功能,需要的朋友可以參考下2015-05-05

