# AMD 規范
AMD(異步模塊定義)是為瀏覽器環境設計的,因為 CommonJS 模塊系統是同步加載的,當前瀏覽器環境還沒有準備好同步加載模塊的條件。
AMD 定義了一套 JavaScript 模塊依賴異步加載標準,來解決同步加載的問題。
模塊通過 `define` 函數定義在閉包中,格式如下:
```js
define(id?: String, dependencies?: String[], factory: Function|Object);
```
`id` 是模塊的名字,它是可選的參數。
`dependencies` 指定了所要依賴的模塊列表,它是一個數組,也是可選的參數,每個依賴的模塊的輸出將作為參數一次傳入 `factory` 中。如果沒有指定 `dependencies`,那么它的默認值是 `["require", "exports", "module"]`。
```js
define(function(require, exports, module) {})
```
`factory` 是最后一個參數,它包裹了模塊的具體實現,它是一個函數或者對象。如果是函數,那么它的返回值就是模塊的輸出接口或值。
一些用例:
定義一個名為 `myModule` 的模塊,它依賴 `jQuery` 模塊:
```js
define('myModule', ['jquery'], function($) {
// $ 是 jquery 模塊的輸出
$('body').text('hello world');
});
// 使用
define(['myModule'], function(myModule) {});
```
注意:在 webpack 中,模塊名只有局部作用域,在 Require.js 中模塊名是全局作用域,可以在全局引用。
定義一個沒有 `id` 值的匿名模塊,通常作為應用的啟動函數:
```js
define(['jquery'], function($) {
$('body').text('hello world');
});
```
依賴多個模塊的定義:
```js
define(['jquery', './math.js'], function($, math) {
// $ 和 math 一次傳入 factory
$('body').text('hello world');
});
```
模塊輸出:
```js
define(['jquery'], function($) {
var HelloWorldize = function(selector){
$(selector).text('hello world');
};
// HelloWorldize 是該模塊輸出的對外接口
return HelloWorldize;
});
```
在模塊定義內部引用依賴:
```js
define(function(require) {
var $ = require('jquery');
$('body').text('hello world');
});
```