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 });
第一个参数为依赖关系,第二个参数为回调函数。需求留意的是函数的参数与前面的依赖逐个对应。
感谢您的来访,获取更多精彩文章请收藏本站。
![](https://www.gyzsq.com/wp-content/uploads/2022/07/9259adea4619.gif)
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
![头像](/wp-content/themes/zibll/img/avatar-default.png)
- 最新
- 最热
只看作者