JavaScript AMD规范简介(一)

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义".
AMD定义了我们所用的模块都是是异步加载的,所以我们要将依赖模块的代码片段要放在一个回调函数中,当异步加载模块完毕后(也就是此模块已可用时)触发回调函数
常用的AMD库有require.js、sea.js
点击这里这里有一个我自己的示例级别的AMD实现

AMD标准中定义了以下两个API
(1) require([module], callback);
(2) define([depends], callback);

require接口用来加载一系列模块,define接口用来定义并暴露一个模块

在AMD中我们js的代码都是放在require的回调中的,require函数帮我们加载依赖的模块并且处理器深层次的依赖关系(依赖的依赖等等)并在一切依赖加载完毕后,将模块作为回调函数的传参,并调用回调函数.
看以下场景
我们的js代码需要B,C模块.B模块不依赖于任何模块,C模块依赖于D模块

require([B,C],function(B,C){
var A = {};
A.say = B.say;
A.run = C.run;
return A;
});

B.js
define([], function(){
var B = {};
B.say = function() {
console.info('say hello!');
}
return B;
});

C.js
define([D], function(D){
var C={};
c.run = function() {
console.info(D.name + ' free running!');
}
return C;
})

D.js
define([],function(){
var D={'name':'songzheng'};
return D;
});

先假设一切模块都还未加载,整个加载过程如下
(1)代码依赖着B、C模块,调用require加载B、C模块
(2)B模块不依赖于任何模块当加载成功后,回调factoryB,安装B模块
(3)在加载C模块时发现C模块依赖着D模块于是调用require加载D模块
(4)D模块不依赖任何模块,加载成功后,回调factoryD加载安装D模块
(5)C依赖的D模块加载成功后,回调factoryC,安装C模块
(6)所有依赖安装完毕,执行回调函数

我在自己的AMD实现的步骤中加了一些日志打印,可以更清晰的看到模块的加载过程

<script type="text/javascript">
require(['Iris','cookie'], function(Iris, Cookie){
console.info(Iris);
console.info(Cookie);
});
</script>