使用require.js

require.js 是一个js模块加载器。

官网：require.js

require.js是为了解决两个问题：

• 传统多个js文件会导致网页响应时间变长，require.js实现了js文件的异步加载以避免网页失去响应。
• 管理模块之间的依赖性，便于代码的维护。

使用require.js

1. 官网下载require.js，放到js目录下。
2. 在代码中引入require.js，可以把它放到网页底部，或者可以放在head中（如下）。

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

3. 引入自己的js文件，如果我们自己的js文件名叫main.js，则这样引入。

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

书写主模块

上面的main.js是主模块，也就是js的入口文件。

可以在主模块中依赖其他模块，使用 require() （AMD规范定义的）就可以引入其他模块。

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

上面的三个模块会被异步加载，加载完毕才会运行。

那么js代码写在哪里呢？

其实只要写在require()中的回调函数中就可以。

加载模块

在上面的require()语句中使用了三个模块，require.js默认三个模块都和main.js在同一目录下，如果要加载其他目录的模块则需要配置 require.config() 方法。

require.config() 写在main.js中，参数是一个对象。

require.config({
    paths: {
        'moduleA': 'lib/moduleA.min',
        'moduleB': 'lib/moduleB.min',
        'moduleC': 'lib/moduleC.min',
        'remoteD': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
    }
});

也可以设置base目录：

require.config({
    baseUrl: 'js/lib';

    paths: {
        'moduleA': 'lib/moduleA.min',
        'moduleB': 'lib/moduleB.min',
        'moduleC': 'lib/moduleC.min',
        'remoteD': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
    }
});

require.js每个模块都是一个单独的js文件。
可以使用requirejs optimizer工具将多个模块合并到一个模块中以减少http请求。

AMD模块写法

require.js加载的模块采用AMD书写规范。

定义一个名为module.js的module模块，下面是一个单独的文件。

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

    return {
        add: add
    };
});

使用模块：

require(['module'], function(module) {
    module.add(1, 2);
});

如果要定义的模块依赖其他的模块，则这样写：

define(['module1', 'module2'], function() {
    var add = function(x, y) {
        return x + y;
    };

    return {
        add: add
    };
});

加载非规范的模块

比如要加载 underscore 和 backbone 这两个模块：

require.config({
    shim: {
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        }
    }
});

exports字段配置输出的变量名。
deps字段表示依赖的模块。

实例：定义jquery插件

require.config({
    shim: {
        'jquery.scroll': {
            deps: ['jquery'],
            exports: 'jQuery.fn.scroll'
        }
    }
});

插件

• domready：让回调函数在DOM加载完毕后运行。
• text、image：允许require.js加载文本和图片。
• json：用于加载json。
• markdown：加载markdown文件。

tips

• 类似require.js的还有SeaJS