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 require("beta").verb();
　　}
});


 

2、匿名模組

 

2、匿名模組

 

2、匿名模組


 

2、匿名模組

這時候模組檔案的檔名就是模組標識。

如果這個模組檔放在a.js中，那麼a就是模組名。可以在依賴項中用"a"來依賴這個匿名模組。

好處就是模組是高度可重複使用，一個匿名模組隨便放在一個位置就可以使用它，模組名稱就是它的檔案路徑。

下面的程式碼就定義了一個依賴alpha模組的匿名模組：

define(["alpha"], function (alpha) {

　　return {

　　　　　;
　　　　}

　　};

});

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並強制載入依賴的模組。

🎜 以上就是JavaScript的AMD規格內容，更多相關文章請關注PHP中文網（www.php.cn）！ 🎜🎜🎜🎜