JS模块化编程之AMD规范

模块很重要
有了模块,我们就可以更方便的使用别人的代码想要什么功能,就加载什么模块。
目前,Javascript模块规范共有两种:CommonJSAMD
这里介绍AMD(Asynchronous Module Definition),意思是“异步模块定义”。

模块定义

define(id?, dependencies?, factory);
其中:
id: 模块标识,可以省略。
dependencies: 所依赖的模块,可以省略。
factory: 模块的实现,或者一个JavaScript对象。

代码示例1: 定义一个alpha模块,依赖require,exports,beta模块

1
2
3
4
5
6
7
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});

代码示例2: 定义个匿名模块,依赖alpha模块

1
2
3
4
5
6
7
define(["alpha"], function (alpha) {
return {
verb: function(){
return alpha.verb() + 2;
}
};
});

代码示例3: 使用JSON定义一个没有依赖的匿名模块。

1
2
3
4
5
define({
add: function(x, y){
return x + y;
}
});

代码示例4:定义一个兼容Modules/Wrappings模块化规范的匿名模块。

Modules/Wrappings是CommonJS Modules的浏览器端解决方案。AMD规范兼容Modules/Wrappings。

1
2
3
4
5
6
7
define(function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});

模块加载

require([module], callback)

AMD模块化规范中使用全局或局部的require函数实现加载一个或多个模块,所有模块加载完成之后的回调函数。

其中:

[module]:是一个数组,里面的成员就是要加载的模块;
callback:是模块加载完成之后的回调函数。
代码示例:加载一个math模块,然后调用方法 math.add(2, 3);

1
2
3
require(['math'], function (math) {
 math.add(2, 3);
});