首頁 > web前端 > js教程 > 主體

JavaScript的AMD規範

黄舟
發布: 2016-12-16 10:39:47
原創
1697 人瀏覽過

一、由來

由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)! 🎜🎜🎜🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板