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 相关文章推荐
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Python底层封装实现方法详解
2020/01/22 Python
python使用建议与技巧分享(二)
2020/08/17 Python
介绍一下EJB的体系结构
2012/08/01 面试题
会计自荐书
2013/12/02 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2015年人事科工作总结
2015/04/28 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL