Webpack

AMD

AMD(Asynchronous Module Definition异步模块定义)，因为CommonJs模块系统不适用于浏览器，
因为CommonJs是同步的

规范

使用ddefine定义模块

define

AMD定义模块通过define函数，它是一个有参数的函数

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

id
定义模块的名称，可选择的
dependencies
指定定义该模块需要依赖其余的哪些模块，是一个模块标识的数组，缺省时默认值是 [“require”, “exports”, “module”].
factory
最后的这个参数就是谁定义了这个模块，它可以是一个对象也可以是一个函数（只调用一次），如果是函数
的话，函数的返回值就是模块暴露出去的值。

例子

定义一个叫myModule并且依赖jQuery的模块

1
2
3
4
5
6
define('myModule', ['jquery'], function($) {
    // $ is the export of the jquery module.
    $('body').text('hello world');
});
// and use it
require(['myModule'], function(myModule) {});

在webpack中一个命名模块仅局部可用，而在require.js中则全局可用

匿名模块

定义一个没有明确id的模块

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

多个依赖

注意每个模块的输出值将会传到factory函数中

1
2
3
4
define(['jquery', './math.js'], function($, math) {
    // $ and math are the exports of the jquery module.
    $('body').text('hello world');
});

输出值

定义一个输出本身的模块

1
2
3
4
5
6
7
8
define(['jquery'], function($) {

    var HelloWorldize = function(selector){
        $(selector).text('hello world');
    };

    return HelloWorldize;
});

使用require加载模块

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