入门require.js
1.为什么使用require.js
传统依次加载多个js文件
<script src="1.js"></script>
<script src="2.js"></script>
<script src="3.js"></script>
传统方法的缺点:
(1) 加载时,浏览器会停止网页渲染;加载文件越多,网页失去响应的时间就会越长
(2) js文件之间存在依赖关系,必须严格保证加载顺序。依赖关系越复杂,维护越困难
require.js
主要为了解决上面两个缺点。
2. data-main
,defer
async="true"
(1)在index.html
中加载require.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" data-main="main" src="https://cdn.bootcss.com/require.js/2.3.3/require.js" defer async="true"></script>
</head>
<body>
</body>
</html>
(2)data-main
,require.js
加载完成之后会根据data-main
设置的路径去加载这个js
文件。不需要设置.js
后缀。我设置的index.html
跟main.js
在同一目录下。
(3)async
属性表明这个文件需要异步加载,。IE不支持这个属性,只支持defer
,所以把defer
也写上。
3.require
加载依赖模块,并执行加载完后的回调函数
main.js
文件
require.config({
paths: {
"moduleAAA": "js/moduleA"
}
});
require(['moduleAAA'], function (moduleA){
// some code here
console.log("加载A模块");
console.log(moduleA.add(5,6));
});
(1)require.config
是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字。
(2)paths还有一个重要的功能,就是可以配置多个路径,如果远程cdn库没有加载成功,可以加载本地的库
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"]
}
})
(3)require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,上例就是['moduleAAA'],即主模块依赖这个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。
4.define
定义一个模块
moduleA.js
文件
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
(1)定义一个模块,调用方法参加上面的require
的使用