一、由來
由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 require("beta").verb();
}
});
2、匿名模組
2、匿名模組
2、匿名模組
2、匿名模組
如果這個模組檔放在a.js中,那麼a就是模組名。可以在依賴項中用"a"來依賴這個匿名模組。
好處就是模組是高度可重複使用,一個匿名模組隨便放在一個位置就可以使用它,模組名稱就是它的檔案路徑。下面的程式碼就定義了一個依賴alpha模組的匿名模組:
define(["alpha"], function (alpha) {
return { ;
}
});
3、僅有一個參數的define
define(['china'], function(china){ //在這裡使用中國省市資料});
透過這種方式,這個模組是真正高度可重複使用的,無論是用遠端的,還是Copy到本地項目,都節省了開發時間和維護時間。
如果參數是一個函數,其用途之一是快速開發實作。適用於較小型的應用,你無需事先關注自己需要什麼模組,自己給誰用。在函數中,可以隨時require自己需要的模組。例如:
define(function(){
var p = require('china');
//使用china這個模組});
這個模組});
這個模組});這不代表你不需要依賴其他模組,而是可以讓你在需要的時候去require這些模組。 define方法執行的時候,會呼叫函數的toString方法,並掃描其中的require調用,提前幫你載入這些模組,載入完成之後再執行。這使得快速開發成為可能。
需要注意的一點是,Opera不能很好的支援函數的toString方法,因此,在瀏覽器中它的適用性並不是很強。但如果你是透過build工具打包所有的 JavaScript文件,這將不是問題,建置工具會幫助你掃描require並強制載入依賴的模組。