入门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的使用
网友评论