AMD(異步模塊定義)是為瀏覽器環(huán)境設(shè)計(jì)的计呈,因?yàn)?CommonJS 模塊系統(tǒng)是同步加載的,當(dāng)前瀏覽器環(huán)境還沒有準(zhǔn)備好同步加載模塊的條件征唬。
AMD 定義了一套 JavaScript 模塊依賴異步加載標(biāo)準(zhǔn)捌显,來解決同步加載的問題。
模塊通過 define 函數(shù)定義在閉包中总寒,格式如下:
define(id?: String, dependencies?: String[], factory: Function|Object);
id 是模塊的名字扶歪,它是可選的參數(shù)。
dependencies 指定了所要依賴的模塊列表,它是一個(gè)數(shù)組善镰,也是可選的參數(shù)妹萨,每個(gè)依賴的模塊的輸出將作為參數(shù)一次傳入 factory 中。如果沒有指定 dependencies炫欺,那么它的默認(rèn)值是 ["require", "exports", "module"]乎完。
define(function(require, exports, module) {})
factory 是最后一個(gè)參數(shù),它包裹了模塊的具體實(shí)現(xiàn)品洛,它是一個(gè)函數(shù)或者對(duì)象树姨。如果是函數(shù),那么它的返回值就是模塊的輸出接口或值桥状。
一些用例:
定義一個(gè)名為 myModule 的模塊帽揪,它依賴 jQuery 模塊:
define('myModule', ['jquery'], function($) {
// $ 是 jquery 模塊的輸出
$('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});
注意:在 webpack 中,模塊名只有局部作用域辅斟,在 Require.js 中模塊名是全局作用域转晰,可以在全局引用。
定義一個(gè)沒有 id 值的匿名模塊砾肺,通常作為應(yīng)用的啟動(dòng)函數(shù):
define(['jquery'], function($) {
$('body').text('hello world');
});
依賴多個(gè)模塊的定義:
define(['jquery', './math.js'], function($, math) {
// $ 和 math 一次傳入 factory
$('body').text('hello world');
});
模塊輸出:
define(['jquery'], function($) {
var HelloWorldize = function(selector){
$(selector).text('hello world');
};
// HelloWorldize 是該模塊輸出的對(duì)外接口
return HelloWorldize;
});
在模塊定義內(nèi)部引用依賴:
define(function(require) {
var $ = require('jquery');
$('body').text('hello world');
});