RequireJS入门（一）

requireJS，是JavaScript的加载模块。让你可以不去烦恼页面加载JS的顺序。而且在项目发布时候，可以使用其提供的打包工具，方便的将所用的JS压缩成一个文件。

安装

官网上去download一个require.js文件。然后在你的项目中的页面上，加上标签<script data-main="scripts/main" src="scripts/require.js"></script>, 这里需要说明的是，data-main参数，这个定义的main就是主要的配置文件。文件中的路径，就是加载它的HTML文件的路径。

require.config

这个文件中，主要的参数有：

• baseUrl: 指定配置文件的相对路径， 以后require的文件的相对路径。注意，写这个路径的时候相对的是添加的data-main属性的HTML文件。
• paths: 这个属性定义一些需要用到但又不在baseUrl下的module。路径的相对关系还是baseUrl.
• shim: 写path中的module的依赖关系。比如有些module需要依赖jQuery来运行，那么需要在shim中写明。
• waitSeconds: 默认是7s， 表示7s还没加载就放弃加载。设置为0的话，表示没有加载时长限制。

写完require.config({})之后， 可以使用require([<module>], function(module) {})的方式引入相关文件。

实例

这里我以使用jQuery为例，写一个通过requireJS加载jQuery的例子。

项目结构如下：

├── index.html
├── js
    ├── vendors
    │   └── jquery-1.9.1.min.js
    ├── tools
    │   └── utils.js
    ├── main.js
    └── require.js

index.html页面中通过标签<script data-main="js/main" src="js/require.js"></script>引入main.js文件。main.js文件如下：

require.config({
    // 默认载入的路径
    baseUrl: './js',
    // 相关文件，相当于require过来，相对于baseURL路径
    paths: {
        // jquery还是exports了$和jquery, 所以function的参数可以使用$或jquery
        'jquery': 'vendors/jquery-1.9.1.min'
    }
});

// 文件按照require的顺序加载
require(['jquery', 'tools/utils'],
function ($, utils) {
    console.log(utils);
    console.log($(window).jquery);
});

这里的utils.js是我写的一个模块，如下：

define(function() {
    var result = {};
    result.sayTest = function() {
        console.log('test');
    };

    result.name = 'testName';

    return result;
})

这样，在通过require加载模块时，在函数的参数中可以自定义一个变量，引用的就是return的对象。

最后，我们点击index.html，发现控制台下打印如下：

Object
1.9.1 

这样，你应该就算会使用requireJS了。