AMD规范
- AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"
- 它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行
- AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:require([module], callback)
- 第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数
require.js
- require.js是符合AMD规范的js库,通常使用require.js来实现AMD规范,进行模块的导出与导入
- 导入require.js的时候,需要添加data-main属性,代表网页程序的主模块
<script src="js/require.js" data-main="js/main"></script>
- 在主模块中,仍然符合AMD规范,使用require()函数来实现。第一个参数为数组,保存要依赖的模块,第二个参数为回调函数
- 使用require.config()方法对模块的加载方式进行自定义。该方法写在主模块main.js的头部
- 参数为对象,对象中的paths属性可以指定对应模块的名称以及路径
- baseUrl属性,可以指定对应模块公共的路径部分
require.js加载
- 对于使用require.js进行加载的模块,也符合AMD规范
- 使用define()方法进行加载,加载之后的模块可以被主模块所调用。define()方法与require()方法一致,有两个参数,分别是依赖的模块数组以及回调函数
- 当需要加载非AMD规范的模块时,不能直接使用,首先需要使用require.config()方法进行配置
- 在参数对象中添加shim属性进行非AMD规范模块的配置,shim属性是一个对象
- shim属性的值为要添加的模块名称,在模块中添加exports与deps属性
- exports属性代表外部模块引入时调用的模块名称;deps属性为一个数组,代表该模块引入时所依赖的其他模块
- moduleA.js
define(function() {
let data = 'moduleA.js'
function getData() {
return data;
}
return {getData}
});
define(['moduleA'], function(moduleA) {
let msg = "moduleB.js"
function getMsg() {
console.log(msg, moduleA.getData());
}
return {getMsg}
});
(function () {
require.config({
baseUrl: "js/modules/",
paths: {
moduleA: "moduleA",
moduleB: "moduleB",
},
shim: {
moduleC: {
exports: "moduleC",
},
},
});
require(["moduleB", "moduleC"], function (moduleB, moduleC) {
moduleB.getMsg();
moduleC.showTest();
});
})();