AMD规范
- AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
- AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
require([module], callback);
第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。例如:
require(["fun"], function(fun) {
console.log("content finish...")
fun.fun();
});
为什么要用requirejs
- 首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长
- 由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
所以requirejs就是解决这个两个问题的,实现js的异步加载,管理模块之间的依赖性
require的用法:
1. 引入requirejs
<script src="js/lib/require.js"></script>
2. 设置入口文件
<script data-main="js/main" src="js/lib/require.js"></script>
data-main用于设置requirejs的入口,这个文件会被requirejs第一个加载,可以省略.js后缀
3. 配置
在js/main中配置requirejs
require.config({
baseUrl : 'js',
paths : {
'util' : 'util/util',
'server' : "util/server"
},
shim : {
}
});
baseUrl用于设置requirejs的根路径,如util的完整路径就是js/util/util.js
几种配置的情况:
- 配置远程服务器的文件
paths: {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
sendReq: "../lib/sendReq",
vue: ['https://cdn.bootcss.com/vue/2.2.2/vue']
}
jquery配置,如果远程服务器访问不到,则访问本地的js/jquery
- 非AMD规范的的模块,可以这样配置
require.config({
paths : {
underscore : "js/underscore"
},
shim: {
"underscore" : {
deps: ['underscore', 'jquery'],
exports : "_";
}
}
})
require(["underscore"], function(_){
_.each([1,2,3], alert);
})
deps:表名模块的依赖,exports表名外部调用时候的名称
4.定义模块
define(function(){
var fun = function(){
console.log("call fun...");
}
return {
fun : fun
}
})
5. 使用
require(["util"], function(fun) {
console.log("load finish...")
fun.fun();
});
回调函数中的fun就是util模块导出的对象
注意
- 需要注意的是,requirejs的默认路径的几种情况
- 如果不配置入口文件,那么如果调用require(['util']),requirejs的默认目录为自身目录,就是说requirejs会从自身目录下读取util.js
- 如果不配置baseUrl,那么默认目录是入口文件所在的目录
- 配置了baseUrl,默认目录是baseUrl
- 如果一个module ID符合下述规则之一,其ID解析会避开常规的"baseUrl + paths"配置,而是直接将其加载为一个相对于当前HTML文档的脚本:
- 以".js"结尾;
- 以"/"开头;
- 包含URL协议,如"http:"、"https:"
- 关于data-main加载的问题
你在data-main中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载,则不能保证它们所依赖的JS已经加载成功。
require单页面用法
console.log("config...")
require.config({
//baseUrl : 'js',
paths : {
'util' : 'util/util',
'server' : "util/server"
},
shim : {
}
});
require(['util'], function(util){
util.fun();
});
require的多页面用法
多页面使用时,可以服用config的配置,但是就需要在页面引入页面对应的js,例如:
<script data-main="js/require-config" src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
<script src="js/module/index.js" type="text/javascript" charset="utf-8"></script>
但是因为data-main是异步加载,所以如果在index.js使用require的时候,可能require-config还没加载,所以导致加载失败,所以需要去掉data-main,并且在index.js中这样写,例如:
require(['js/require-config'], function() {
require(["util"], function(fun) {
console.log("load finish...")
fun.fun();
});
});
具体api参考:点击打开链接