AMD规范的总结整理
学习参考网址:http://www.ruanyifeng.com/blog/2012/11/require_js.html
1、什么是AMD
AMD规范全称是Asynchronous Module Definition,即异步模块加载机制。它完整描述了模块的定义,依赖关系,引用关系以及加载机制。
AMD对应的就是很有名的RequireJS
2、require.js的使用
a、去requirejs官网下载最新版本
b、引用
<script src="js/require.js" data-main="js/main"></script>
//data-main属性的作用是,指定网页程序的主模块,它会在require.js加载完成后首个加载
c、语法
define([id], [dependencies], factory)
参数:
id:可选,字符串类型,定义模块标识,如果没有提供参数,默认为文件名
dependencies:可选,字符串数组,AMD 推崇依赖前置,即当前模块依赖的其他模块,模块依赖
必须在真正执 行具体的factory方法前解决
factory:必需,工厂方法,初始化模块需要执行的函数或对象。如果为函数,它只被执行一次。如果是对象,此对象会作为模块的输出值。
3、模块的写法
一般情况下主模块都会依赖于其他模块,此时则需要使用AMD规范定义的的require()函数
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// 代码
});
require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是[‘moduleA’, ‘moduleB’, ‘moduleC’],即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。
加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。
require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
例子:假定主模块main.js依赖jquery、underscore和backbone这三个模块,就可以这样写:
require(['jquery', 'underscore', 'backbone'], function (Backbone){
// 代码
});
require.js会先加载jQuery、underscore和backbone,然后再运行回调函数。主模块的代码就写在回调函数中。
4、通常情况下不同功能的模块存放在不同路径下,在调用时要严格按照路径加载,此时可以通过require.config()方法来配置各个模块的加载路径,在引用时只需要加载配置文件即可(配置时默认为js文件,不用加.js后缀)
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
上面是逐一指定路径的模式,还有一种是直接改变基目录(baseUrl,此路径参照于引入这个js文件的html页面的相对路径,路径配置错误会导致加载时找不到对应js文件而出错)
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
5、AMD模块的写法
define(['jquery'], function () {
// 方法
function myFunc(){};
// 暴露公共方法
return myFunc;
});
来源:CSDN
作者:熬夜不秃头
链接:https://blog.csdn.net/qq_43267592/article/details/103918703