怎么使用javascript AMD

這篇文章主要介紹“怎么使用javascript AMD”，在日常操作中，相信很多人在怎么使用javascript AMD問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么使用javascript AMD”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

Modules/Wrappings  使得實(shí)現(xiàn)變?yōu)楝F(xiàn)實(shí)。雖然和NodeJS的模塊寫(xiě)法不完全一致，但也有很多相似之處，使得熟悉NodeJS的程序員有一些親切感。

但NodeJS終究是服務(wù)器端的JavaScript，沒(méi)有必要把這些條條框框放到瀏覽器JavaScript環(huán)境中。這時(shí)AMD  誕生了，它的全稱(chēng)為異步模塊定義。從名稱(chēng)上看便知它是適合script  tag的。也可以說(shuō)AMD是專(zhuān)門(mén)為瀏覽器中JavaScript環(huán)境設(shè)計(jì)的規(guī)范。它吸取了CommonJS的一些優(yōu)點(diǎn)，但又不照搬它的格式。開(kāi)始AMD作為CommonJS的transport  format 存在，因無(wú)法與CommonJS開(kāi)發(fā)者達(dá)成一致而獨(dú)立存在。它有獨(dú)立的wiki 和討論組 。

AMD設(shè)計(jì)出一個(gè)簡(jiǎn)潔的寫(xiě)模塊API：define 。

define(id?, dependencies?, factory);

其中：

◆ id: 模塊標(biāo)識(shí)，可以省略。

◆ dependencies: 所依賴(lài)的模塊，可以省略。

◆ factory: 模塊的實(shí)現(xiàn)，或者一個(gè)JavaScript對(duì)象。

id遵循CommonJS Module Identifiers 。dependencies元素的順序和factory參數(shù)一一對(duì)應(yīng)。

以下是使用AMD模式開(kāi)發(fā)的簡(jiǎn)單三層結(jié)構(gòu)(基礎(chǔ)庫(kù)/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，定義無(wú)依賴(lài)的模塊(base.js)

2，定義有依賴(lài)的模塊(ui.js，page.js)

3，定義數(shù)據(jù)對(duì)象模塊(data.js)

細(xì)心的會(huì)發(fā)現(xiàn)，還有一種沒(méi)有出現(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開(kāi)始為擺脫CommonJS的束縛，開(kāi)創(chuàng)性的提出了自己的模塊風(fēng)格。但后來(lái)又做了妥協(xié)，兼容了  CommonJS Modules/Wrappings 。即又可以這樣寫(xiě)

define(function(require, exports, module) {     var base = require('base');     exports.show = function() {         // todo with module base     }  });

不考慮多了一層函數(shù)外，格式和NodeJS還比較象的。使用require獲取依賴(lài)模塊，使用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的庫(kù)有RequireJS 、curl 、Dojo 、bdLoad、JSLocalnet 、Nodules 等。

也有很多庫(kù)支持AMD規(guī)范，即將自己作為一個(gè)模塊存在，如MooTools 、jQuery 、qwery 、bonzo 甚至還有 firebug 。

到此，關(guān)于“怎么使用javascript AMD”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！