require.js 主要用法

1. 诞生

• 实现 js 文件的异步加载，避免网页失去响应
• 管理 js 文件间的依赖关系，便于代码的编写及维护

2. 加载require.js

<script src="js/require.js" defer async="true" ></script>

* 注： async设置为true，来异步加载requirejs，避免阻塞。ie不是被async，所以还要加上defer。*

3. 基本API

require定义三个变量，define，require，requirejs。其中 require===requirejs。

• define。用来定义模块
• require。加载模块，并执行加载后的回调函数。

　　// main.js
　　require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
　　　　// some code here
　　});

4. 主模块

<script src="js/require.js" data-main="js/main"></script>

主模块： 使用data-main属性指定网页的主模块。该文件会首先加载，是网页的入口代码。

require.config()

  使用该方法，我们可以对模块的加载行为进行自定义。写在主模块的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

paths属性

require.config({
    paths: {
        "a": "lib/a",
        "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min",
    }
})

    可以使用本地路径，也可以直接指定网址。

    注意： 模块路径默认是main.js的路径。例如： main.js 处于名为 js 的文件夹下，对以上 a.js 的实际查找路径的 js/lib/a 。

    如果想要修改基目录，可以使用 baseUrl: “js/lib”。

require.config({
    baseUrl: "js/lib",
    paths: {
        "a": "a",
        "b": "b",
    }
})

shim 属性

require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。所以，利用shim属性能够实现加载非规范的模块。
例如： backbone，underscore都没有采用AMD规范，所以在加载模块的时候使用shim来定义模块的特征。
（1）exports值（输出的变量名），表明这个模块外部调用时的名称；
（2）deps数组，表明该模块的依赖性。

require.config({
    shim: {
        "underscore": {
            exports: "_"
        },
        "backbone": {
            deps: ["underscore", "jquery"],
            exports: "backbone",
        }
        // jquery的插件可以这样配置
        'jquery.scroll': {
    　　　　　deps: ['jquery'],
    　　　　　exports: 'jQuery.fn.scroll'
        }
    }
})

5. 模块加载

例如： math.js 定义了一个math模块。

define(function (){
　　var add = function (x,y){
　　　　return x+y;
　　};
　　return {
　　　　add: add
　　};
});

如果math模块依赖于其他模块，那么define的第一个参数是一个数组，指明依赖关系。

define(["someModule"], function (moduleA){
　　function func(){
        moduleA.dosomething();
    }
　　return {
　　　　func: func
　　};
});

加载math模块

require(['math'], function(math){
    console.log(math.add(1,2));
})