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

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

（1）CommonJS

在CommonJS中，一個單獨的文件就是一個模塊。被調用模塊內使用exports暴露接口，調用模塊使用require調用暴露出來的接口。

示例如下：

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

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

CommonJS加載模塊是“同步”的，也就是說，如果我們要調用被調用模塊中的公共方法和變量，一定要等被調用模塊加載完畢后才可以。用于服務端的NodeJS就采用的CommonJS來管理模塊。但是在瀏覽器端，同步加載會因為收到網絡環境的影響存在很大的不確定性，所以CommonJS不適合于瀏覽器端。

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

（2）AMD（Asynchromous Module Definition）

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

AMD規范使用define方法定義模塊：

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

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

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

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

（3）CMD

CMD和AMD的區別主要體現在對依賴模塊的執行時機上，AMD是“依賴前置”。主張提前加載所需模塊，CMD是“依賴就近”。也就是可以用到的時候再加載。有點類似于Java中的“餓漢模式”和“懶漢模式”。

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

舉個栗子：

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

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

（4）UMD

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

UMD等于CommonJS加上AMD。UMD的工作其實就是做了一個判斷：

- 先判斷當前環境對NodeJs支持的模塊是否存在，存在就用Node.js模塊模式（exports）。

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

感覺自己對UMD還不是很理解，不知道具體應該怎么去用。還是繼續去了解了解。加油！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com