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

前一篇文章瞭解了什麼是模塊，這一篇就簡單介紹一下如何定義並加載一個模塊。

我所瞭解的三種模塊加載方式分別是CommonJS、AMD和CMD

網上關於這三種模塊加載方式講解的文章不少，我就簡單的作個介紹，若是想深刻了解一下能夠去網上查閱一下相關的資料。

---

（1）CommonJS

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

示例以下：

1 // student.js
2 // 私有變量
3 var a = 123;
4 function add(student) {
5     console.log('Add student：' + student);
6 }
7 // exports對象上的方法和變量是外部可訪問的
8 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方法定義模塊：

 1 //define(param1,param2) 經過define方法定義模塊
 2 //@param1: 數組，元素爲引入的依賴模塊
 3 //@param2: 回調函數，經過形參傳入依賴
 4 define(['firstModule','secondModule'],function(firstModule,secondModule){
 5      function foo(){
 6            firstModule.test();
 7      }
 8      // 暴露foo()
 9      return {foo:foo};
10 });

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

1 define(function(require,exports,module){
2      var reqModule = require("./firstModule");
3      reqModule.test();
4 
5      exports.pubPort = function(){
6             // 函數體
7      }
8 });

---

 

（3）CMD

CMD和AMD的區別主要體如今對依賴模塊的執行時機上，AMD是「依賴前置」。主張提早加載所需模塊，CMD是「依賴就近」。也就是能夠用到的時候再加載。有點相似於Java中的「餓漢模式」和「懶漢模式」。

從requireJS 2.0開始，也能夠延遲加載了。

舉個栗子：

 1 // AMD——依賴前置
 2 define(['./a','./b'],function(a,b){
 3     //提早聲明要依賴的模塊
 4 });
 5 
 6 // CMD
 7 define(function(require,exports,module){
 8     //依賴能夠就近寫
 9     var a = require('./a');
10     a.test();
11 
12     //軟依賴
13     if(status){
14         var b = require('./b');
15         b.test();
16     }
17 });

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

 

---

 

（4）UMD

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

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

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

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

感受本身對UMD還不是很理解，不知道具體應該怎麼去用。仍是繼續去了解了解。加油！