require.js
为什么要用require.js
- 实现js文件的异步加载,避免网页失去响应
- 管理模块之间的依赖性,便于代码的编写和维护
require.js的加载
<script src="js/require.js" defer async="true" ></script>
这样使requrie.js也被异步加载,IE不支持async,只支持defer.
加载require.js后,下一步加载自己的代码,假设自己的代码文件是main.js,同时放在和require.js相同的js目录下,只需要如下:
<script src="js.require.js" data-main="js/mian"><script>
由于require.js默认文件后缀名是js,所以可以把main.js简写成main.
主模块的写法
main.js称为主模块,意为整个网页的入口代码,一般情况下,主模块依赖于其他模块,使用AMD规范定义的require()函数。
// main.js
requrie(['moduleA', 'moduleB', 'moduleC'], function(moduleA, moduleB, moduleC){
// some code
});
require([module],callback)函数接受两个参数,第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数。加载的模块会以参数形式传入回调函数,从而可以在其内部使用。
模块的加载
默认情况下,require.js假定加载的模块与主模块(main.js)在同一个目录,然后自动加载。
使用require.config()方法,可以对模块的加载行为进行自定义。require.config()写在主模块(main.js)的头部,参数是一个对象,该对象的paths属性指定各个模块的加载路径。
指定模块加载路径有两种方法:
1. 逐一指定路径
require.config({
paths: {
"moduleA": "lib/moduleA",
"moduleB": "lib/moduleB",
"moduleC": "lib/moduleC"
}
});
2. 直接改变基目录(baseUrl)
require.config({
baseUrl: "js/lib",
paths: {
"moduleA": "moduleA",
"moduleB": "moduleB",
"moduleC": "moduleC"
}
});
```
也可以直接指定模块的网址
require.js要求,每个模块是一个单独的js文件。
###AMD模块的写法
require.js加载的模块,采用AMD规范,意味着模块必须按照AMD规定来写。
模块必须采用define()函数来定义,如果一个模块不依赖其他模块,可以直接定义在define()函数中。如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明模块的依赖性。
###加载非规范的模块
加载非AMD规范的模块时,要在用require()加载之前,先用require.config()定义模块的特征。
require.config({
angularRoute: {
deps: [“angular”],
exports: “angular”
},
shim: {
‘zepto’: {
exports: “$”
}
}
})
“`
require.config()接受的配置对象除了paths属性外,还有shim属性,专门用来配置不兼容的模块。
对于不兼容的模块,需要定义:
(1)exports值(输出的变量名),表明这个模块外部调用的名称
(2)deps数组,表明该模块的依赖性