CommonJS, AMD, CMD 筆記

1.CommonJS 

根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。因此，定義一個模塊就是寫一個新的js文件，可是最後要將文件的內容exports出來。接下來咱們看一下如何定義模塊和加載模塊。

//module1.js
exports.foo = function () {
  console.log('this is module1 foo');  
}

//main.js
let module1 = require('./module1');

module1.foo();

如上代碼,定義module1模塊文件  在主入口引入 並調用方法,exports也能夠換成module.exports 二者關係是前者引用後者,最終導出的函數 變量等等都是以module.exports爲準,固然 exports=2這種修改是不起做用的。

nodejs 用的就是CommonJS規範.

2.AMD

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：

　　require([module], callback);

 

第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：

require(['math'], function (math) {

　　　　math.add(2, 3); 　　});

看到這段代碼就想起了angularJS,好像是angular1的時候有相似這樣的代碼。

 3.CMD

CMD 是seajs推崇的規範，CMD則是依賴就近，用的時候再require。它寫起來是這樣的：

define(function(require, exports, module) {
   var clock = require('clock');
   clock.start();
});

 

這裏具體到使用的時候再來決定加載哪些文件,AMD  CMD都是異步加載.

總結:CommonJs主要針對服務端，AMD/CMD主要針對瀏覽器端，因此最容易混淆的是AMD/CMD。（順便提一下，針對服務器端和針對瀏覽器端有什麼本質的區別呢？服務器端通常採用同步加載文件，也就是說須要某個模塊，服務器端便停下來，等待它加載再執行。這裏若是有其餘後端語言，如java，經驗的‘玩家’應該更容易理解。而瀏覽器端要保證效率，須要採用異步加載，這就須要一個預處理，提早將所須要的模塊文件並行加載好。）

 

AMD和CMD最大的區別是對依賴模塊的執行時機處理不一樣，而不是加載的時機或者方式不一樣，兩者皆爲異步加載模塊。
AMD依賴前置，js能夠方便知道依賴模塊是誰，當即加載；而CMD就近依賴，須要使用把模塊變爲字符串解析一遍才知道依賴了那些模塊