一、为什么使用
当引入的文件太多,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
二、加载
commonJS
<script src="js/require.js" defer async="true" ></script>
async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上
加载要引入的代码
<script src="js/require.js" data-main="js/main"></script>
当要引入多个js文件时要写的require代码
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// some code here
});
path属性用来书写文件要引入的路径、当多个文件在同一个文件夹时baseUrl可以直接定义
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
当引入的文件不再同一个主机时
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
require.js要求,每个模块是一个单独的js文件。这样的话,如果加载多个模块,就会发出多次HTTP请求,会影响网页的加载速度。因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数
http://requirejs.org/docs/optimization.html
AMD书写
js文件
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
引入使用
require(['math'], function (math){
alert(math.add(1,1));
});