什么是AMD规范
AMD
的全名叫做 Asynchronous Module Definition
,意思就 “异步模块定义”。AMD
的特点便是异步加载,模块的加载不会影响其他代码的运行。这就解决了 CommonJS 中必须等模块加载完成这个问题。所有依赖于某个模块的代码,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
AMD 规范简单到只有一个 API,即 define
函数,语法如下所示:
define([module-name?], [array-of-dependencies?], [module-factory-or-object]);
module-name
:模块标识,可以省略。array-of-dependencies
:所依赖的模块,可以省略。module-factory-or-object
:模块的实现,或者一个JavaScript对象。
define
函数中第一个第二个参数都是可以省略的,第三个参数是模块的具体实现本身。
从 AMD 中的A(Asynchronous),我们知道 define
函数的一个性质,即异步性。当 define
函数执行时,它首先会异步的曲调用第二参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。
require()函数
AMD
也采用 require()
语句加载模块,但是和 CommonJS 不同的是,它要求两个参数,语法如下所示:
require([module], callback);
第一个参数 [module]
,是一个数组,里面的成员就是要加载的模块。第二个参数 callback
,是加载成功之后的回调函数。
示例:
如果我们要使用 AMD 规范加载模块,可以像下面这样写:
require(['test'], function (test) {
test.add(1, 2);
});
这样 test
模块和 math.add()
加载是异步的,浏览器不会发生假死。
require.js库
要使用 require.js
,需要先去官网下载最新版本,下载后放到项目中,就可以使用了。
例如:
<script src="./require.js"></script>
加载这个文件,也可能造成网页失去响应,我们可以把它放在网页底部加载,或者像下面这样,加上 async
属性,表示这个文件需要异步加载,避免网页失去响应。
<script src="./require.js" defer async="true" ></script>
加上 defer
是因为 IE
不支持 async
这个属性,只支持 defer。
加载 require.js
以后,如果要加载自己的代码,可以这样写:
<script src="js/require.js" data-main="js/main"></script>
data-main
属性的作用是指定网页程序的主模块,例如上面的这句代码,表示 js
目录下的main.js
文件,这个文件会第一个被 require.js
加载。由于 require.js
默认的文件后缀名是 js
,所以可以把 main.js
简写成main
。
require.js
加载的模块,采用 AMD 规范。也就是说,模块必须按照AMD的规定来写。 具体来说,就是模块必须采用特定的 define()
函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在 define()
函数之中。
示例:
假设现在有一个 test.js 文件,这个文件定义了一个 test
模块,我们可以这样写:
define(function(){
var add = function(a, b){
return a + b;
};
return{
add:add
}
});
然后加载这个模块的方式如下:
require(['math'], function (math){
alert(math.add(1,1));
});
假设这个模块还依赖其他模块,那么 define()
函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['test'], function(test){
function show(){
test.doSomething();
}
return {
show : show
};
});
当 require()
函数加载上面这个模块的时候,就会先加载 test.js
文件。