JavaScript的AMD規范

一、由來

由CommonJS組織提出了許多新的JavaScript架構方案和標准，希望能為前端開發提供統一的指引。AMD規范就是其中比較著名一個，全稱是Asynchronous Module Definition，即異步模塊加載機制。完整描述了模塊的定義，依賴關系，引用關系以及加載機制。該規范已被requireJS，NodeJs，Dojo，JQuery使用，可以看出它具有很大的價值。

二、簡介

作為一個規范，只需定義其語法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函數具有的另外一個性質，異步性。當define函數執行時，
1）首先會異步的去調用第二個參數中列出的依賴模塊
2）當所有的模塊被載入完成之后，如果第三個參數是一個回調函數則執行
3）然后告訴系統模塊可用，也就通知了依賴於自己的模塊自己已經可用。

三、AMD實例

1、如何定義一個模塊

下面代碼定義了一個alpha模塊，並且依賴於內置的require，exports模塊，以及外部的beta模塊。可以看到，第三個參數是回調函數，可以直接使用依賴的模塊，他們按依賴聲明順序作為參數提供給回調函數。
1）require函數讓你能夠隨時去依賴一個模塊，即取得模塊的引用，從而即使模塊沒有作為參數定義，也能夠被使用；
2）exports是定義的alpha 模塊的實體，在其上定義的任何屬性和方法也就是alpha模塊的屬性和方法。通過exports.verb = ...就是為alpha模塊定義了一個verb方法。
3）例子中是簡單調用了模塊beta的verb方法。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
　　exports.verb = function() {
　　　　return beta.verb();
　　　　//或者:
　　　　return require("beta").verb();
　　}
});

 

2、匿名模塊

define 方法允許你省略第一個參數，這樣就定義了一個匿名模塊，這時候模塊文件的文件名就是模塊標識。
如果這個模塊文件放在a.js中，那么a就是模塊名。可以在依賴項中用"a"來依賴於這個匿名模塊。
好處就是模塊是高度可重用，一個匿名模塊隨便放在一個位置就可以使用它，模塊名就是它的文件路徑。
下面的代碼就定義了一個依賴於alpha模塊的匿名模塊：

define(["alpha"], function (alpha) {
　　return {
　　　　verb: function(){
　　　　　　return alpha.verb() + 2;
　　　　}
　　};
});

3、僅有一個參數的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並強制載入依賴的模塊。