JavaScript模塊化思想之CommonJS、AMD、CMD、UMD

網(wǎng)上關(guān)于這三種模塊加載方式講解的文章很多，我就簡單的做個(gè)介紹，如果想深入了解一下可以去網(wǎng)上查閱一下相關(guān)的資料。

（1）CommonJS

在CommonJS中，一個(gè)單獨(dú)的文件就是一個(gè)模塊。被調(diào)用模塊內(nèi)使用exports暴露接口，調(diào)用模塊使用require調(diào)用暴露出來的接口。

示例如下：

// student.js
// 私有變量
var a = 123;
function add(student) {
 console.log('Add student：' + student);
}
// exports對(duì)象上的方法和變量是外部可訪問的
exports.add = add;

1 // 使用require加載student.js模塊2 var student = require('./student.js');

CommonJS加載模塊是“同步”的，也就是說，如果我們要調(diào)用被調(diào)用模塊中的公共方法和變量，一定要等被調(diào)用模塊加載完畢后才可以。用于服務(wù)端的NodeJS就采用的CommonJS來管理模塊。但是在瀏覽器端，同步加載會(huì)因?yàn)槭盏骄W(wǎng)絡(luò)環(huán)境的影響存在很大的不確定性，所以CommonJS不適合于瀏覽器端。

如果在瀏覽器環(huán)境下想要從服務(wù)器加載模塊，就必須使用“異步”的方式。所以就出現(xiàn)了AMD和CMD解決方案。

（2）AMD（Asynchromous Module Definition）

requireJS就是一種使用AMD異步加載模塊的管理插件。AMD模塊支持對(duì)象，函數(shù)，構(gòu)造器，字符串，JSON等各種類型的模塊。

AMD規(guī)范使用define方法定義模塊：

//define(param1,param2) 通過define方法定義模塊
//@param1: 數(shù)組，元素為引入的依賴模塊
//@param2: 回調(diào)函數(shù)，通過形參傳入依賴
define(['firstModule','secondModule'],function(firstModule,secondModule){
 function foo(){
 firstModule.test();
 }
 // 暴露foo()
 return {foo:foo};
});

同時(shí)，AMD允許使用define方法定義模塊是兼容CommonJS規(guī)范，可以使用require和exports。

define(function(require,exports,module){
 var reqModule = require("./firstModule");
 reqModule.test();

 exports.pubPort = function(){
 // 函數(shù)體
 }
});

（3）CMD

CMD和AMD的區(qū)別主要體現(xiàn)在對(duì)依賴模塊的執(zhí)行時(shí)機(jī)上，AMD是“依賴前置”。主張?zhí)崆凹虞d所需模塊，CMD是“依賴就近”。也就是可以用到的時(shí)候再加載。有點(diǎn)類似于Java中的“餓漢模式”和“懶漢模式”。

從requireJS 2.0開始，也可以延遲加載了。

舉個(gè)栗子：

// AMD——依賴前置
define(['./a','./b'],function(a,b){
 //提前聲明要依賴的模塊
});

// CMD
define(function(require,exports,module){
 //依賴可以就近寫
 var a = require('./a');
 a.test();

 //軟依賴
 if(status){
 var b = require('./b');
 b.test();
 }

這里有個(gè)名詞叫軟依賴，我個(gè)人理解軟依賴就是不一定依賴，硬依賴就是一定會(huì)依賴的模塊，軟依賴就是需要才依賴，不需要就不依賴，根據(jù)status判斷。

（4）UMD

UMD——Universal Module Definition，通用的模塊定義

UMD等于CommonJS加上AMD。UMD的工作其實(shí)就是做了一個(gè)判斷：

- 先判斷當(dāng)前環(huán)境對(duì)NodeJs支持的模塊是否存在，存在就用Node.js模塊模式（exports）。

- 如果不支持，就判斷是否支持AMD（define），存在就使用AMD方式加載。

感覺自己對(duì)UMD還不是很理解，不知道具體應(yīng)該怎么去用。還是繼續(xù)去了解了解。加油！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com