require.js的诞生是为了解决两大问题

• 实现js文件的异步加载，避免网页失去响应；
• 管理模块之间的依赖性，便于代码的编写和维护。

引用

首先，点击‘下载’require.js.
这里可以采用网页底部加载的方式，或者

1

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

async属性表明这个文件需要异步加载，避免网页失去响应。IE不支持这个属性，只支持defer，所以把defer也写上。

定义模块目录

1. data-main指定网页中的主模块，在require.js加载完成后加载js目录下的main.js，默认后缀为js，所以写main即可,其他模块也是按照datamain的目录js/查找

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

2. 定义baseUrl作为模块目录路径，config的使用见下文

   1 2 3

   require.config({ baseUrl: 'js })

这样的话，在页面引用时

1
2

<script src="js/require.js"></script>
<script src='js/main.js></script>

主模块的写法

1
2
3

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　// main.js内容
});

require()函数接受两个参数。
第一个参数是一个数组，表示所依赖的模块，依次填入依赖的模块名，异步加载依赖模块；
第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块返回的模块对象会以参数形式传入该函数，参数的顺序和加载的顺序相同，从而在回调函数内部就可以使用这些模块。

模块的加载

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部或者单独文件。

需要单独定义requireConfig文件时，要在main.js之前引用，或作为main的依赖模块引入

使用baseUrl和path配置模块路径

1
2
3
4
5
6
7

require.config({
    baseUrl: "js",  
    paths: {
        "jquery": "lib/jquery",
        "模块名": "模块路径"
    }
});

path用于映射放于baseUrl下的模块名，模块路径不止可以是字符串，还可以是数组，写法如下

1
2
3
4
5
6

path: {
    'jquery': [
        "lib/jquery"，
        "//cdn.bootcss.com/jquery/2.2.4/jquery"
    ]
}

会对数组内容按顺序加载，第一个加载失败后会加载第二个，作为备用路径

模块加载之后会立刻执行

其他配置

• map

  1 2 3 4 5 6 7 8 9 10 11

  map: { '*'： { 'jquery': 'libs/jquery' }, 'app/module1': { 'jquery': 'lib/jquery1' }, 'app/module2': { 'jquery': 'lib/jquery2' } },

使用map就可以实现，在加载不同的模块时，依赖不同版本的jquery

• waitSeconds
  下载js等待的时间，默认为7s，如果设置为0，则禁用等待超时，会一直加载
• urlArgs
  加载文件时，在文件名后面增加额外的query参数
• deps
  依赖模块，在加载requireConfig之后作为依赖模块加载

模块定义

使用define方法定义AMD规范模块，如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中

1. 函数式定义

   1 2 3 4 5 6 7

   define('name'，['依赖模块']， function(){ return { add : function (x,y){ return x+y; }; } })

模块名可以不写，依赖模块可有可无，可以直接define(function(){}),可以返回任何值，函数方法，对象，变量

在加载依赖模块之后，使用name.add(x, y)即可调用。

1. 定义对象

   1 2 3 4 5

   define({ name: 'zhangsan', age: 20, gender: '男' })

加载非规范模块

加载不支持AMD的库,在用require()加载之前，要先用require.config()方法，定义它们的一些特征

1
2
3
4
5
6
7
8
9
10
11

require.config({
　　shim: {
　　　　'name': { 
　　　　　　deps: ['jquery'],
　　　　　　exports: 'obj',
           init: function($) {
               return $;
           }
　　　　}
　　}
});

• name, 模块名
• deps数组，依赖的模块。
• exports值（输出的变量名），表明这个模块外部调用时的名称，即模块对象名；
• init,初始化函数，返回的对象代替exports作为模块对象

以bootstrap为例，在没有返回对象和init函数的情况下，在加载时可以直接写deps数组
shim: {
‘bootstrap’: [‘jquery’]
}

举个栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//app.js
require.config({
    baseUrl: "js",  
    paths: {
        "jquery": "lib/jquery",
        'api': 'app/api',
        'user': 'app/user'
    }
});
require(['jquery', 'api'], function($, api){
    $('#btn').click(function(){
        api.getUser().then(function(user){
            console.log(user);
        })
    })
})
//api.js
define(['jquery'], function($){
    return {
        getUser: function(){
            var def = $.deferred();
            require(['user'],function(user) {
                def.resolve(user);
            });
            return def;
        }
    }
});
//user.js
define({
    name: 'zhangsan',
    age: 20,
    gender: '男'
})

<button id='btn'>打印用户信息</button>