入门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的使用

入门require.js