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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
json数据的列循环示例
Sep 06 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
php生成word并下载代码实例
2019/03/15 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
python并发和异步编程实例
2018/11/15 Python
Python3分析处理声音数据的例子
2019/08/27 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python是什么 Python的用处
2020/05/26 Python
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
班组长岗位职责范本
2014/01/05 职场文书
导购员的岗位职责
2014/02/08 职场文书
书香校园活动方案
2014/02/28 职场文书
食品安全责任书
2014/04/15 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
Java 在生活中的 10 大应用
2021/11/02 Java/Android