前端模組化

##script 老牌傳統的模組化

<scriptsrc='xxxxx.js'></script>

主意 script的引入是阻塞的，為了解決阻塞的問題 引入了

<scriptasyncsrc='xxxxx.js'></script>

script適用於小型的application

##CommonJS ——nodejs的王牌

一，定義模組: 根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非定義為global物件的屬性。

二，模組輸出： 模組只有一個出口

三，載入模組： 載入模組使用require方法，該方法讀取一個檔案並執行，返回檔案內部的module.exports物件，如果沒有匹配到對應名稱的模組則返回

exportdefaultdefaultFunction(){
//此處為預設返回函式
}

常見的例子如下：

varname='Byron';

functionprintName(){

console.log(name);

}

functionprintFullName(firstName){

console.log(firstName+name);

}

module.exports={

printName
 
:printName,

printFullName:printFullName

}

載入的方法

varnameModule=require('./myModel.js');
nameModule.printName();

不同的實現對require時的路徑有不同要求，一般情況可以省略js拓展名，可以使用相對路徑，也可以使用絕對路徑，甚至可以省略路徑直接使用模組名（前提是該模組是系統內建模組）。

注意：由於require是同步執行的 所以傳統的CommonJs的模組程式碼是無法再瀏覽器直接執行的。

AMD（Asynchronous Module Definition）

定義名稱簡單明瞭——非同步模組。

但是注意，它並不是原生js支援的 所以需要額外的引入RequireJS來進行支援。requireJS主要解決兩個問題： 一，多個js檔案可能有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器； 二，js載入的時候瀏覽器會停止頁面渲染，載入檔案越多，頁面失去響應時間越長。 看一個使用requireJS的例子：

//定義模組myModule.js

define(['dependency'],function(){

varname='Byron';

functionprintName(){

console.log(name);

}

return{

printName:printName

};

});

//載入模組

require(['myModule'],function(my){

 my.printName();

});

requireJS定義了一個函式 define，它是全域性變數，用來定義模組。

define(id?, dependencies?, factory);

id：可選引數，用來定義模組的標識，如果沒有提供該引數，指令碼檔名（去掉拓展名）；

dependencies：是一個當前模組依賴的模組名稱陣列

factory：工廠方法，模組初始化要執行的函式或物件。如果為函式，它應該只被執行一次。如果是物件，此物件應該為模組的輸出值；

在頁面上使用require函式載入模組；

require([dependencies], function(){}); require()

函式接受兩個引數： 第一個引數是一個數組，表示所依賴的模組； 第二個引數是一個回撥函式，當前面指定的模組都載入成功後，它將被呼叫。載入的模組會以引數形式傳入該函式，從而在回撥函式內部就可以使用這些模組。 require()函式在載入依賴的函式的時候是非同步載入的，這樣瀏覽器不會失去響應，它指定的回撥函式，只有前面的模組都載入成功後，才會執行，解決了依賴性的問題。

CMD(Common Module Definition)

通用模組定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模組定義方式和模組載入（可以說執行、解析）時機上有所不同 語法 Sea.js 推崇一個模組一個檔案，遵循統一的寫法 define define(id?, deps?, factory) 因為CMD推崇一個檔案一個模組，所以經常就用檔名作為模組id；CMD推崇依賴就近，所以一般不在define的引數中寫依賴，而是在factory中寫。 factory有三個引數： function(require, exports, module){}

一，require require 是 factory 函式的第一個引數，require 是一個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面；

二，exports exports 是一個物件，用來向外提供模組介面；

三，module module 是一個物件，上面儲存了與當前模組相關聯的一些屬性和方法。

demo
//定義模組myModule.js
define(function(require,exports,module){
var$=require('jquery.js')
$('div').addClass('active');
});

//載入模組
seajs.use(['myModule.js'],function(my){

});

##AMD和CMD區別

1.對依賴的處理不同

AMD推崇依賴前置，在定義模組的時候就要宣告其依賴的模組， CMD推崇就近依賴，只有在用到某個模組的時候再去require， 這種區別各有優劣，只是語法上的差距，而且requireJS和SeaJS都支援對方的寫法。

2.對依賴模組的執行時機處理不同

注意不是載入的時機或者方式不同。 很多人說requireJS是非同步載入模組，SeaJS是同步載入模組，這麼理解實際上是不準確的，其實載入模組都是非同步的，只不過AMD依賴前置，js可以方便知道依賴模組是誰，立即載入，而CMD就近依賴，需要使用把模組變為字串解析一遍才知道依賴了那些模組，這也是很多人詬病CMD的一點，犧牲效能來帶來開發的便利性，實際上解析模組用的時間短到可以忽略。

為什麼我們說兩個的區別是依賴模組執行時機不同，為什麼很多人認為ADM是非同步的，CMD是同步的

同樣都是非同步載入模組，AMD在載入模組完成後就會執行改模組，所有模組都載入執行完後會進入require的回撥函式，執行主邏輯，這樣的效果就是依賴模組的執行順序和書寫順序不一定一致，看網路速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴載入完成後才執行。

CMD載入完某個依賴模組後並不執行，只是下載而已，在所有依賴模組載入完成後進入主邏輯，遇到require語句的時候才執行對應的模組，這樣模組的執行順序和書寫順序是完全一致的。

這也是很多人說AMD使用者體驗好，因為沒有延遲，依賴模組提前執行了，CMD效能好，因為只有使用者需要的時候才執行的原因。