RequireJS 是一个 JavaScript 模块加载器,主要用于实现异步或动态加载 js 文件,它的模块管理遵守AMD规范(Asynchronous Module Definition)。通过 RequireJS 我们可以很好地解决 js文件间相互依赖关系及 js 文件过多导致的页面加载慢等问题,很好地提高了代码的性能和可维护性。

RequireJS的基本设计思想是:通过define方法将代码定义为模块然后通过require方法,实现代码的模块加载。下面简单说下 RequireJS 的使用方法:

require.js 文件的引入

在引入 require.js 文件之前,我们需要先获取它。

与其他的 js 文件一样,require.js 同样通过 script 便签引入,代码如下:

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

注意:data-main 指向配置文件位置,比如上面代码中为 js文件下的 main.js 文件。省略此参数则在 require.js 文件底部配置亦可。

require.js 的基本配置

require.js 通过 config 方法进行配置,config 方法接受一个对象作为参数。完整的配置代码如下:

require.config({
    baseUrl:'js/libs',
    paths: {
        'qrcode'        : 'libs/jquery.qrcode.min',
	'lazyload'      : 'libs/lazyload.min',
	'videojs'       : 'libs/videojs.min'
    }, 
    shim: { 
        'jquery.scroll': { 
            deps: [ 'jquery' ], 
            exports: 'jQuery.fn.scroll' 
        }, 
    }
});

其中,baseURL 与 shim 可以省略。

baseURL:设置基准路径。默认为当前位置所在路径。

paths:指定各个模块的位置。这个位置可以是同一个服务器上的相对位置,也可以是外部网址。其中每一组参数的左侧定义模块的ID,右侧定义模块的路径,路径不包含“.js”扩展名。可以为每个模块定义多个位置,如果第一个位置加载失败,则加载第二个位置。

shim:有些库不是AMD兼容的,这时就需要指定shim属性的值。shim可以理解成“垫片”,用来帮助require.js加载非AMD规范的库。其中 deps 定义依赖关系, exports 定义输出方式。

如何请求 require.js

定义好的模块需要调用时采用如下方式调用:

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // Some Code
});

如果需要加载错误处理函数,可以这么写:

require(
    ['moduleA', 'moduleB', 'moduleC'],
    function (moduleA, moduleB, moduleC){ 
        // Some Code 
    },
    function (err){
        // Some Code
    }
);

require 的三个参数分别为依赖关系、回调函数、错误处理函数。

定义一个自己的模块

除了一些现有的模块文件,我们也可以使用 define 定义一个自己的模块。定义方法如下:

define(['moduleA','moduleB'], function(moduleA, moduleB) { 
    // Some Code
});

第一个参数为依赖关系,第二个参数为回调函数。需要注意的是函数的参数与前面的依赖一一对应。