javaScript模塊化規範ADM與CMD

模塊化：模塊化是指在解決某一個複雜問題時，依照一種分類的思惟把問題進行系統性的分解處理，能夠想象一個巨大的系統代碼，被整合優化分割成邏輯性很強的模塊時，對於軟件是一種何等意義的存在。

 

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

一、定義封裝的模塊

二、定義新模塊對其餘模塊的依賴

三、可對其餘模塊的引入支持

 

 

AMD模塊規範：其實就是異步模塊定義，全部的模塊將被異步加載，模塊加載不影響後面語句運行，全部依賴某些模塊的語句均放置在回調函數中。 

AMD規範定義了一個全局變量define函數，格式爲：define(id, dependencies, factory)

第一個參數：id爲字符串類型，表示模塊標識，爲可選參數，若是忽略這個參數，則模塊標識默認爲加載器中被請求的文件的URL爲模塊標識。若是須要填寫這個id，則最好是加載器中該模塊的URL(填寫id通常是爲了合併多個模塊減小網站中HTTP請求)。

第二個參數：dependencies是一個數組，爲可選參數，裏面存放着當前模塊所依賴的其餘模塊標識.

第三個參數：factory是一個函數或者對象

案例：建立模塊

define('./bsSave', ['./ajax', './lib/domApi'], function (ajax, domApi){

　　var remArr = [];

　　//模塊代碼

　　return remArr;

})

 

//無依賴模塊能夠直接使用對象字面量來定義

define({

　　add: function (x, y){return x + y;},

　　age: 25,

　　name: 'luke'

})

 

 

CMD模塊規範：在CMD中，一個模塊就是一個文件。全局函數define，用來定義一個模塊。格式爲：define(id, dependencies, factory);

第一個參數：id爲字符串類型，表示模塊標識，爲可選參數，若是忽略這個參數，則模塊標識默認爲加載器中被請求的文件的URL爲模塊標識。若是須要填寫這個id，則最好是加載器中該模塊的URL(填寫id通常是爲了合併多個模塊減小網站中HTTP請求)。

第二個參數：dependencies是一個數組，爲可選參數，裏面存放着當前模塊所依賴的其餘模塊標識。

第三個參數：factory能夠是一個函數，也能夠爲對象或者字符串。當factory爲對象或者字符串時，表示模塊的接口就是該對象或者字符串。

案例：定義一個模塊

define('./BsSave', ['./ajax'], function (require, exports, module){

　　var BsSave = {};

　　//模塊代碼

　　return BsSave；

})

 

//定義JSON數據模塊

define({"name": "csh"})

 

//經過字符串定義模板模塊

define('this is {{data}}');

 

//factory爲函數的時候，表示模塊的構造方法，經過return能夠輸出該模塊的數據

define(function (){

　　var modArr = [];

　　//模塊代碼

　　return modArr; //輸出該模塊的數據

})

 

當模塊的第三個參數是函數的時候，這個函數也有三個參數，分別是require、exports、module

require：是一個方法，接受模塊標識做爲惟一的參數，用來引入其餘模塊，require方法是同步往下執行的，須要異步加載模塊可使用require.async方法，可使用require.resolve方法來返回模塊路徑

案例：加載模塊

define(function(require, exports, module){

　　//同步加載模塊

　　var ajax = require('./ajax');

 

　　//異步加載模塊

　　require.async('./ajax', function (ajax){

　　　　ajax.get();

　　})

 

　　//返回模塊的路徑，但它不會加載模塊

　　require.resolve('./ajax');

})

 

exports：用來向外提供模塊接口，固然直接使用return也是能夠的

案例：爲模塊向外提供接口

define(function(require, exports, module){

　　exports.name = 'csh';          //向外提供的屬性

　　exports.do = function (){};     //向外提供的方法

 

　　//這樣也能夠向外提供接口

　　return {

　　　　name: 'csh',

　　　　do: function (){}

　　}

 

　　//這樣也能夠向外提供接口

　　module.exports = {

　　　　name: 'csh',

　　　　do: function (){}

　　}

 

　　//注意，如下方式是錯誤的

　　exports = {

　　　　name: 'csh',

　　　　do: function (){}

　　}

})

 

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

module.id：爲模塊的惟一標識。

module.uri：根據模塊系統的路徑解析規則獲得模塊的絕對路徑。

module.dependencies：表示模塊的依賴。

module.exports：當前模塊對外提供的接口。

 

 

下面是玉伯對於 AMD 與 CMD 區別的解釋(詳細的區別可對照上文)：

AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出。

CMD 是 SeaJS 在推廣過程當中對模塊定義的規範化產出。

相似的還有 CommonJS Modules/2.0 規範，是 BravoJS 在推廣過程當中對模塊定義的規範化產出還有很多

這些規範的目的都是爲了 JavaScript 的模塊化開發，特別是在瀏覽器端的。

目前這些規範的實現都能達成瀏覽器端模塊化開發的目的。

 

擴展閱讀：

AMD規範文檔 https://github.com/amdjs/amdjs-api/wiki/AMD

RequireJS官網接口文檔  http://www.requirejs.org/docs/api.html 

CMD 模塊定義規範 https://github.com/seajs/seajs/issues/242

SeaJS API快速參考 https://github.com/seajs/seajs/issues/266

知乎  AMD 和 CMD 的區別有哪些？ http://www.zhihu.com/question/20351507