由來
相關廠商內容
AMD規範就是其中比較著名一個,全稱是Asynchronous Module Definition,即異步模組載入機制。從它的規範描述頁面看,AMD很短也很簡單,但它卻完整描述了模組的定義,依賴關係,引用關係以及載入機制。從它被requireJS,NodeJs,Dojo,JQuery使用也可以看出它具有很大的價值,沒錯,JQuery近期也採用了AMD規範。在這篇文章中,我們就將介紹AMD的性質,用法,優勢以及套用場景。從AMD中我們也能學習到如何在更高層面去設計自己的前端套用。
介紹
作為一個規範,只需定義其語法API,而不關心其實現。AMD規範簡單到只有一個API,即define函式:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
其中:
module-name: 模組標識,可以省略。
array-of-dependencies: 所依賴的模組,可以省略。
module-factory-or-object: 模組的實現,或者一個JavaScript對象。
從中可以看到,第一個參數和第二個參數都是可以省略的,第三個參數則是模組的具體實現本身。後面將介紹在不同的套用場景下,他們會使用不同的參數組合。
從這個define函式AMD中的A:Asynchronous,我們也不難想到define函式具有的另外一個性質,
異步性。當define函式執行時,它首先會異步的去調用第二個參數中列出的依賴模組,當所有的模組被載入完成之後,如果第三個參數是一個
回調函式則執行,然後告訴系統模組可用,也就通知了依賴於自己的模組自己已經可用。如果對應到dojo1.6之前的實現,那么在功能上可以有如下對應關係:
module-name: dojo.provide
dependencies: dojo.require
module-factory: dojo.declare
不同的是,在載入依賴項時,AMD用的是異步,而dojo.require是同步。異步和同步的區別顯而易見,前者不會阻塞瀏覽器,有更好的性能和靈活性。而對於NodeJs這樣的伺服器端AMD,則模組載入無需阻塞伺服器進程,同樣提高了性能。
AMD實例
如何定義一個模組
下面代碼定義了一個alpha模組,並且依賴於內置的require,exports模組,以及外部的beta模組。可以看到,第三個參數是
回調函式,可以直接使用依賴的模組,他們按依賴聲明順序作為參數提供給回調函式。
這裡的require函式讓你能夠隨時去依賴一個模組,即取得模組的引用,從而即使模組沒有作為參數定義,也能夠被使用;exports是定義的alpha 模組的實體,在其上定義的任何屬性和方法也就是alpha模組的屬性和方法。通過exports.verb = ...就是為alpha模組定義了一個verb方法。例子中是簡單調用了模組beta的verb方法。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//或者:
return require("beta").verb();
}
});
匿名模組
define 方法允許你省略第一個參數,這樣就定義了一個匿名模組,這時候模組檔案的檔案名稱就是模組標識。如果這個模組檔案放在a.js中,那么a就是模組名。可以在依賴項中用"a"來依賴於這個匿名模組。這帶來一個好處,就是模組是高度可重用的。你拿來一個匿名模組,隨便放在一個位置就可以使用它,模組名就是它的檔案路徑。這也很好的符合了DRY(Don't Repeat Yourself)原則。
下面的代碼就定義了一個依賴於alpha模組的匿名模組:
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});
define
僅有一個參數的define
前面提到,define的前兩個參數都是可以省略的。第三個參數有兩種情況,一種是一個JavaScript對象,另一種是一個函式。
如果是一個對象,那么它可能是一個包含方法具有功能的一個對象;也有可能是僅提供數據。後者和JSON-P非常類似,因此AMD也可以認為包含了一個完整的 JSON-P實現。模組演變為一個簡單的
數據對象,這樣的數據對象是高度可用的,而且因為是靜態對象,它也是CDN友好的,可以提高JSON-P的性能。考慮一個提供中國省市對應關係的JavaScript對象,如果以傳統JSON-P的形式提供給客戶端,它必須提供一個callback函式名,根據這個函式名動態生成返回數據,這使得標準JSON-P數據一定不是CDN友好的。但如果用AMD,這個數據檔案就是如下的形式:
define({
provinces: [
{
name: '上海名',
areas: ['浦東新區', '徐匯區']},
{
name: '江蘇',
cities: ['南京', '南通']}
//.....
]
});
假設這個檔案名稱為china.js,那么如果某個模組需要這個數據,只需要:
define(['china'], function(china){
//在這裡使用中國省市數據
});
通過這種方式,這個模組是真正高度可復用的,無論是用遠程的,還是Copy到本地項目,都節約了開發時間和維護時間。
如果參數是一個函式,其用途之一是快速開發實現。適用於較小型的套用,你無需提前關注自己需要什麼模組,自己給誰用。在函式中,可以隨時require自己需要的模組。例如:
define(function(){
var p = require('china');
//使用china這個模組
});
即你省略了模組名,以及自己需要依賴的模組。這不意味著你無需依賴於其他模組,而是可以讓你在需要的時候去require這些模組。define方法在執行的時候,會調用函式的toString方法,並掃描其中的require調用,提前幫助你載入這些模組,載入完成之後再執行。這使得快速開發成為可能。需要注意的一點是,Opera不能很好的支持函式的toString方法,因此,在瀏覽器中它的適用性並不是很強。但如果你是通過build工具打包所有的 JavaScript檔案,這將不是問題,構建工具會幫助你掃描require並強制載入依賴的模組。
Dojo
Dojo 在三月初正式發布了1.6版本,其中一個重要的變化就是引入了AMD機制,取代了原來的dojo.provide和dojo.require方法。但是現在仍然保持了向後兼容性,你仍然可以用dojo.provide和dojo.require來定義和載入模組。需要注意的是:在 Dojo 1.6 中, 針對 AMD 的重構仍然屬於一個過渡期的改動 , 用戶自己開發的 AMD 模組還不能被 Dojo 的載入器和 Build 系統支持 . 1.6 中現有的
編譯系統對AMD的支持還非常局限。 如果你自己開發了 AMD 格式的模組,並且你仍然在使用默認的 Dojo 同步模組載入器,那么你必須嚴格遵循 Dojo 模組的格式 ( 包括換行的格式 ) 來保證你自己的模組能夠成功編譯。總結起來有以下三點:
用傳統的方法 (dojo.require()/dojo.provide()) – 這些模組,只能被 Dojo 同步載入器 載入,但可以被 Dojo
編譯系統(Build System )正確的編譯
用 Dojo 同步載入器來載入 AMD 格式 ( define ()) 模組 – 這些模組可以被正常的載入,並且可以被其他兼容 AMD 格式的載入器載入 . 現在雖然 Dojo1.6 還沒有正式支持這種用法, 但在目前的 Dojo1.6 編譯系統中,是可以正常工作的 . ( 前提是你必須嚴格遵循 Dojo 模組定義的代碼規範 )
使用第三方載入器來載入 AMD 格式( define ())模組 – 模組可以被正常載入,並且可以被其他載入器所使用 . 這些模組可以使用 RequireJS 或 Backdraft 提供的
編譯系統正常編譯,但是 Dojo 還沒有正式的測試過和其他載入器的兼容性 .
以Calendar為例,用define方法來定義這個模組:
define("dijit/Calendar",
["dojo", "dijit", "text!dijit/templates/Calendar.html",
"dojo/cldr/supplemental", "dojo/date", "dojo/date/locale",
"dijit/_Widget", "dijit/_Templated", "dijit/_CssStateMixin", "dijit/form/DropDownButton"],
function(dojo, dijit) {
dojo.declare(
"dijit.Calendar",
[dijit._Widget, dijit._Templated, dijit._CssStateMixin],
{...}
);
return dijit.Calendar;
}
);
可以看到,模組標識就是模組檔案的路徑,模組本身一般都是dojo.declare定義的類。Dojo1.6中的dojo和dijit命名空間下的模組均已經用AMD的形式進行了重構,但dojox下仍然延用了傳統的dojo.provide和dojo.require形式。對AMD的引入是Dojo走向自動化包管理的重要一步,在後續文章中我們也將繼續關注Dojo在這方面的進展。
結論
AMD 規範是JavaScript開發的一次重要嘗試,它以簡單而優雅的方式統一了JavaScript的模組定義和載入機制,並迅速得到很多框架的認可和採納。這對開發人員來說是一個好訊息,通過AMD我們降低了學習和使用各種框架的門檻,能夠以一種統一的方式去定義和使用模組,提高開發效率,降低了套用維護成本。