Webpack AMD規(guī)范

AMD（異步模塊定義）是為瀏覽器環(huán)境設(shè)計(jì)的，因?yàn)?CommonJS 模塊系統(tǒng)是同步加載的，當(dāng)前瀏覽器環(huán)境還沒(méi)有準(zhǔn)備好同步加載模塊的條件。

AMD 定義了一套 JavaScript 模塊依賴(lài)異步加載標(biāo)準(zhǔn)，來(lái)解決同步加載的問(wèn)題。

模塊通過(guò) define 函數(shù)定義在閉包中，格式如下：

define(id?: String, dependencies?: String[], factory: Function|Object);

id 是模塊的名字，它是可選的參數(shù)。

dependencies 指定了所要依賴(lài)的模塊列表，它是一個(gè)數(shù)組，也是可選的參數(shù)，每個(gè)依賴(lài)的模塊的輸出將作為參數(shù)一次傳入 factory 中。如果沒(méi)有指定 dependencies，那么它的默認(rèn)值是 ["require", "exports", "module"]。

define(function(require, exports, module) {}）

factory 是最后一個(gè)參數(shù)，它包裹了模塊的具體實(shí)現(xiàn)，它是一個(gè)函數(shù)或者對(duì)象。如果是函數(shù)，那么它的返回值就是模塊的輸出接口或值。

一些用例：

定義一個(gè)名為 myModule 的模塊，它依賴(lài) jQuery 模塊：

define('myModule', ['jquery'], function($) {
    // $ 是 jquery 模塊的輸出
    $('body').text('hello world');
});
// 使用
require(['myModule'], function(myModule) {});

注意：在 webpack 中，模塊名只有局部作用域，在 Require.js 中模塊名是全局作用域，可以在全局引用。

定義一個(gè)沒(méi)有 id 值的匿名模塊，通常作為應(yīng)用的啟動(dòng)函數(shù)：

define(['jquery'], function($) {
    $('body').text('hello world');
});

依賴(lài)多個(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)部引用依賴(lài)：

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});