require.js 文件使用详解

RequireJS 是一个 JavaScript 模块加载器，主要用于完成异步或动态加载 js 文件，它的模块管理恪守AMD标准（Asynchronous Module Definition）。经过 RequireJS 我们能够很好地处理 js文件间互相依赖关系及 js 文件过多招致的页面加载慢等问题，很好地进步了代码的性能和可维护性。

RequireJS的根本设计思想是：经过define办法将代码定义为模块然后经过require办法，完成代码的模块加载。下面简单说下 RequireJS 的运用办法：

require.js 文件的引入

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

• 官网地址：https://requirejs.org/
•  GitHub ：https://github.com/requirejs/requirejs

与其他的 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
});

第一个参数为依赖关系，第二个参数为回调函数。需求留意的是函数的参数与前面的依赖逐个对应。

感谢您的来访，获取更多精彩文章请收藏本站。