1. 诞生
- 实现 js 文件的异步加载,避免网页失去响应
- 管理 js 文件间的依赖关系,便于代码的编写及维护
2. 加载require.js
<script src="js/require.js" defer async="true" ></script>
* 注: async设置为true,来异步加载requirejs,避免阻塞。ie不是被async,所以还要加上defer。*
3. 基本API
require定义三个变量,define,require,requirejs。其中 require===requirejs。
- define。用来定义模块
- require。加载模块,并执行加载后的回调函数。
// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
4. 主模块
<script src="js/require.js" data-main="js/main"></script>
主模块: 使用data-main属性指定网页的主模块。该文件会首先加载,是网页的入口代码。
require.config()
使用该方法,我们可以对模块的加载行为进行自定义。写在主模块的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
paths
属性
require.config({
paths: {
"a": "lib/a",
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
}
})
可以使用本地路径,也可以直接指定网址。
注意: 模块路径默认是main.js的路径。例如: main.js 处于名为 js 的文件夹下,对以上 a.js 的实际查找路径的 js/lib/a 。
如果想要修改基目录,可以使用 baseUrl: “js/lib”。
require.config({
baseUrl: "js/lib",
paths: {
"a": "a",
"b": "b",
}
})
shim
属性
require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。所以,利用shim
属性能够实现加载非规范的模块。
例如: backbone,underscore都没有采用AMD规范,所以在加载模块的时候使用shim来定义模块的特征。
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
require.config({
shim: {
"underscore": {
exports: "_"
},
"backbone": {
deps: ["underscore", "jquery"],
exports: "backbone",
}
// jquery的插件可以这样配置
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
})
5. 模块加载
例如: math.js 定义了一个math模块。
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
如果math模块依赖于其他模块,那么define的第一个参数是一个数组,指明依赖关系。
define(["someModule"], function (moduleA){
function func(){
moduleA.dosomething();
}
return {
func: func
};
});
加载math模块
require(['math'], function(math){
console.log(math.add(1,2));
})