RequireJs的使用详解


Posted in Javascript onFebruary 19, 2017

一、为什么使用RequireJS?

  <script src="a.js"></script>
<script src="b.js"></script>

<script src="c.js"></script>

上述多个js文件加载的时候,浏览器会停止网页渲染(JS阻塞浏览器渲染),加载文件越多,网页失去响应的时间就会越长;另外各文件的依赖关系很难管理。

RequireJs的作用:

(1)实现js文件的异步加载,避免网页失去响应;

(2)管理模块之间的依赖性,便于代码的编写和维护。

(3)定义了一个作用域来避免全局名称空间污染。

二、require.js的加载

1.从官网下载最新版本的require,放在js目录下,使用script引入页面:

<script src="js/require.js"></script>

为了不阻塞页面渲染,可以把它放在HTML的最底部或改为如下方式:

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

async属性表明该文件需异步加载(defer属性兼容IE)。

2.加载页面逻辑代码:

假定代码文件是main.js,也放在js目录下,则用如下几种方式引入:

方式1:

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

data-main属性指定网页程序的主入口,这个文件会第一个被requirejs加载。requirejs默认所依赖的资源都是js,所以可以把main.js简写成main。

方式2:

在加载require.js后,通过requirejs加载config配置文件(如有),最后加载主模块:

require([‘configUrl'],function () { //config.js必须通过requirejs加载才能注册
 require([moduleAName],function(moduelA){
 //逻辑代码
 })
});

三、主模块的写法

// main.js
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){


// some code here

});

require()函数接受两个参数,第一个参数是一个数组,表示当前模块所依赖的模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该回调函数,从而在回调函数内部就可以使用这些模块(被依赖的模块有return的值)。

require()异步加载moduleA,moduleB和moduleC,浏览器不会失去响应;它指定的回调函数,只有当前面依赖的模块全部下载并执行对应的回调之后,才会运行。

四、模块的配置

require.config()方法可以定义模块的路径,并以短模块名的形式进行依赖的定义。该方法可以写在每个主模块(main.js)的前面,配合主模块一起使用。

参数是一个对象,这个对象的paths属性指定各个模块的加载路径。paths可以配置多个路径,如果远程cdn库没有加载成功,则加载本地的库。

如果不定义模块的配置,则在主模块中的依赖需要写完整路径。

在每个页面按需配置路径:

require.config({  //注册模块的配置,供后面的代码使用

baseUrl: '/js/', 
 paths: {
 
"jquery":”cdnUrl”, "Jquery/jquery-1.12.0.min"
  "fixheight": "login/fixheight"
 }
 });
 require(['jquery', 'fixheight'], function ($, fixHeight) {
 ...other code; 
 fixHeight.init();
});

或者将config配置作为一个单独的js文件,然后

require([“configJsUrl”],function(){  //需要在main文件中通过require先异步加载模块配置
 require([‘ModuleName'],function(Name){
 …other code
 })
})

为了避免每个页面都要嵌套require,还可以用如下方式:

先创建单独的config.js文件:

require.config({ //注册模块的配置,供后面的代码使用
 baseUrl: "/js/app/", //其他依赖都是对于此位置的相对路径
 // 路径配置
 paths: {
underscore: 'vender/underscore.min',   backbone:'vender/backbone.min'
 jquery: ‘cdnUrl','vender/jquery/jquery-1.12.0.min',
 “模块短名”:”相对于baseUrl的路径地址,省略模块文件的后缀.js”
 },
 // 非AMD模式编写的类库需要重新配置
 shim: {
 underscore: {
  exports:'_'
 },
 backbone(短模块名仍需要定义路径): {
  exports: 'Backbone',  
//类库输出的变量名,表明这个模块被外部调用时的名称
  deps:['jquery','underscore'] //该模块的依赖
 }
 },
 urlArgs: "bust=" + document.getElementById('publishDate').attributes['value'].value
//js资源的参数,控制版本刷新缓存
});
define([ 'marionette'], function () { }); //仍是会被执行的js代码,会依次加载需要的模块

然后通过如下方式使用:

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

通过主入口直接将模块配置注册到requirejs命名空间中,页面中后续的require方法无需再注册,可以直接使用短模块名进行依赖加载。

如果没有显式指定config及data-main,则默认的baseUrl为加载RequireJS的HTML页面所在目录。如果指定了data-main而没有在config中指定根路径,则该路径被设为baseUrl。

若想避开"baseUrl + paths"的解析过程,而是直接指定加载某一个目录下的脚本。可以这样做:如果一个module ID符合下述规则之一,其ID解析会避开常规的"baseUrl + paths"配置,而是直接将其加载为一个相对于当前HTML文档路径的脚本:

•    以 ".js" 结束.

•    以 "/" 开始.

•    包含 URL 协议, 如 "http:" or "https:".

eg. require(['/www/js/app/vender/underscore.min.js'], function (_) {…})

require.js要求,每个模块是一个单独的js文件。加载多个模块就会发出多次HTTP请求,影响网页的加载速度。因此require.js提供了一个优化工具(r.js),当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数,但又需要和缓存之间进行取舍。

六、AMD模块的写法

require.js加载的模块,必须按照AMD的规定来写。即模块必须采用特定的define()函数来定义,通常返回一个对象,该对象具有供别的模块使用的方法或属性;或只执行相关逻辑而无输出。

七、require.js的相关插件

text插件,允许require.js异步加载txt、css或html等文本资源供js使用,而不需要在script内构建Html字符串。

define(['text!components/multiple/template.html', 'image!cat.jpg'],
 function(template,cat){
 $('body').append($(template));
 document.body.appendChild(cat);
 }
);

注意:

模块的依赖既可以通过[]引入,也可以在回调函数里通过require()方法引入,效果一样。因为define方法会通过正则先扫描回调函数中require方法的依赖并下载,然后才执行该回调函数。但此时需要传入依赖require本身,否则会报错:

define(function(require){
 var helper=require(‘helpModuleUrI');//也会提前加载该依赖
 …
})

多个模块先后多次依赖同一个模块时,该模块只会被下载并初始化一次,之后require会保持对其的引用供别的模块再次使用。

区分require方法的执行和回调的执行:

require('config',callBack1);
require('b',callBack2);
// 两个require方法会立即执行,但callBack的执行顺序不确定,取决于下载的顺序。
//不同于以下代码,会严格按顺序执行
require('config',function(){
 require('b',callBack2)
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
AngularJS表单提交实例详解
Feb 18 #Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 #Javascript
JS实现数组去重复值的方法示例
Feb 18 #Javascript
bootstarp modal框居中显示的实现代码
Feb 18 #Javascript
You might like
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
详解vue组件通信的三种方式
2017/06/30 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
python操作ie登陆土豆网的方法
2015/05/09 Python
深入理解Python装饰器
2016/07/27 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
如何基于Python实现数字类型转换
2020/02/07 Python
python interpolate插值实例
2020/07/06 Python
python的数学算法函数及公式用法
2020/11/18 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
寒假思想汇报
2014/01/10 职场文书
我为自己代言广告词
2014/03/18 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
Golang map映射的用法
2022/04/22 Golang