JavaScript的模塊化之AMD&CMD規範

前端開發經常會遇到的問題：

　　1.惱人的命名衝突；

　　2.繁瑣的文件依賴；

模塊化開發的優點：

　　1.解決命名衝突和依賴管理；

　　2.模塊的版本管理；

　　3.提升代碼的可維護性；

　　4.前端性能優化；

     JavaScript自己不具有模塊化的功能，開發人員爲了更好的開發，須要人爲的制定一套規範標準，約定一套固定的寫法來實現JavaScript模塊化功能。

一個模塊化系統所必須的能力：

• 　定義封裝的模塊
• 　定義新模塊對其餘模塊的依賴
• 　可對其餘模塊的引入支持

AMD&CMD

AMD

AMD(Asynchronous Module Definition)異步模塊定義: 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

requireJS主要解決兩個問題

1. 多個js文件可能有依賴關係，被依賴的文件須要早於依賴它的文件加載到瀏覽器
2. js加載的時候瀏覽器會中止頁面渲染，加載文件越多，頁面失去響應時間越長

requireJS定義了一個函數 define，它是全局變量，用來定義模塊

define(id?, dependencies?, factory);

1. id：可選參數，用來定義模塊的標識，若是沒有提供該參數，腳本文件名（去掉拓展名）
2. dependencies：是一個當前模塊依賴的模塊名稱數組
3. factory：工廠方法，模塊初始化要執行的函數或對象。若是爲函數，它應該只被執行一次。若是是對象，此對象應該爲模塊的輸出值

在頁面上使用require函數加載模塊

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

require()函數接受兩個參數

1. 第一個參數是一個數組，表示所依賴的模塊
2. 第二個參數是一個回調函數，當前面指定的模塊都加載成功後，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可使用這些模塊

require()函數在加載依賴的函數的時候是異步加載的，這樣瀏覽器不會失去響應，它指定的回調函數，只有前面的模塊都加載成功後，纔會運行，解決了依賴性的問題。

CMD

CMD(Common Module Definition)通用模塊定義: 是SeaJS 在推廣過程當中對模塊定義的規範化產出。

Sea.js 推崇一個模塊一個文件，遵循統一的寫法。Sea.js定義了一個函數define，它是全局變量，用來定義模塊

define(id?, deps?, factory)

由於CMD推崇一個文件一個模塊，因此常常就用文件名做爲模塊id。CMD推崇依賴就近，因此通常不在define的參數中寫依賴，在factory函數中寫，factory函數有三個參數：require, exports, module。

function(require, exports, module)

require(id)----require 是一個方法，接受 模塊標識 做爲惟一參數，用來獲取其餘模塊提供的接口

exports 是一個對象，用來向外提供模塊接口

module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法

 

      

AMD和CMD的區別

AMD和CMD最大的區別在於執行的時機不一樣，注意不是加載的時機。對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。

AMD,CMD在模塊的加載方面是沒有差別的，都是異步加載，而且順序不可控，在factory執行時，其依賴模塊都已被加載。

• 　AMD依賴模塊前置，js能夠方便知道依賴模塊是誰，當即加載這些模塊。一樣都是異步加載模塊，AMD在加載模塊完成後就會執行該模塊。全部模塊都加載執行完後會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不必定一致，看網絡速度，哪一個先下載下來，哪一個先執行，可是主邏輯必定是在全部依賴模塊加載完成後才執行。
• 　CMD須要使用tostring方法把模塊變爲字符串解析一遍，經過正則表達式匹配require方法才知道依賴了哪些模塊，而後纔將依賴的模塊進行加載。CMD加載完某個依賴模塊後並不執行，只是下載而已，在全部依賴模塊加載完成後進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是徹底一致的。

          

在上述代碼中，AMD中在BEGIN處a、b模塊都已被加載且factory都是執行過的；

在上述代碼中，CMD中雖然a、b模塊在BEGIN處已被加載，但factory還沒有執行，須要調用require執行依賴模塊。在END處，a,b模塊實際只執行了一個，這就是CMD中着重強調的延遲執行。

注意：AMD,CMD所說的執行是指factory函數的執行！文件異步加載完成，當即執行的是define函數（即當即註冊模塊），而模塊化框架控制的是factory函數的執行順序。