AMD：瀏覽器中的模塊規(guī)范
Modules/Wrappings 使得實(shí)現(xiàn)變?yōu)楝F(xiàn)實(shí)。雖然和NodeJS的模塊寫法不完全一致，但也有很多相似之處，使得熟悉NodeJS的程序員有一些親切感。
但NodeJS終究是服務(wù)器端的JavaScript，沒有必要把這些條條框框放到瀏覽器JavaScript環(huán)境中。這時(shí)AMD 誕生了，它的全稱為異步模塊定義。從名稱上看便知它是適合script tag的。也可以說AMD是專門為瀏覽器中JavaScript環(huán)境設(shè)計(jì)的規(guī)范。它吸取了CommonJS的一些優(yōu)點(diǎn)，但又不照搬它的格式。開始AMD作為CommonJS的transport format 存在，因無法與CommonJS開發(fā)者達(dá)成一致而獨(dú)立存在。它有獨(dú)立的wiki 和討論組 。
AMD設(shè)計(jì)出一個(gè)簡潔的寫模塊API：define 。
define(id?, dependencies?, factory);
其中：
◆ id: 模塊標(biāo)識(shí)，可以省略。
◆ dependencies: 所依賴的模塊，可以省略。
◆ factory: 模塊的實(shí)現(xiàn)，或者一個(gè)JavaScript對(duì)象。
id遵循CommonJS Module Identifiers 。dependencies元素的順序和factory參數(shù)一一對(duì)應(yīng)。
以下是使用AMD模式開發(fā)的簡單三層結(jié)構(gòu)(基礎(chǔ)庫/UI層/應(yīng)用層)：
base.js
- define(function() {
- return {
- mix: function(source, target) {
- }
- };
- });
ui.js
- define(['base'], function(base) {
- return {
- show: function() {
- // todo with module base
- }
- }
- });
page.js
- define(['data', 'ui'], function(data, ui) {
- // init here
- });
data.js
- define({
- users: [],
- members: []
- });
以上同時(shí)演示了define的三種用法，
1，定義無依賴的模塊(base.js)
2，定義有依賴的模塊(ui.js，page.js)
3，定義數(shù)據(jù)對(duì)象模塊(data.js)
細(xì)心的會(huì)發(fā)現(xiàn)，還有一種沒有出現(xiàn)，即具名模塊
- define('index', ['data','base'], function(data, base) {
- // todo
- });
具名模塊多數(shù)時(shí)候是不推薦的，一般由打包工具合并多個(gè)模塊到一個(gè)js文件中時(shí)使用。
前面提到dependencies元素的順序和factory一一對(duì)應(yīng)，其實(shí)不太嚴(yán)謹(jǐn)。AMD開始為擺脫CommonJS的束縛，開創(chuàng)性的提出了自己的模塊風(fēng)格。但后來又做了妥協(xié)，兼容了 CommonJS Modules/Wrappings 。即又可以這樣寫
- define(function(require, exports, module) {
- var base = require('base');
- exports.show = function() {
- // todo with module base
- }
- });
不考慮多了一層函數(shù)外，格式和NodeJS還比較象的。使用require獲取依賴模塊，使用exports導(dǎo)出API。
除了define外，AMD還保留一個(gè)關(guān)鍵字require。require 作為規(guī)范保留的全局標(biāo)識(shí)符，可以實(shí)現(xiàn)為 module loader。也可以不實(shí)現(xiàn)。
目前，實(shí)現(xiàn)AMD的庫有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules 等。
也有很多庫支持AMD規(guī)范，即將自己作為一個(gè)模塊存在，如MooTools 、jQuery 、qwery 、bonzo 甚至還有 firebug 。
原文：http://www.cnblogs.com/snandy/archive/2012/03/12/2390782.html
【編輯推薦】
