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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
javascript数组去掉重复
2011/05/12 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
vue动态注册组件实例代码详解
2019/05/30 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python pip如何手动安装二进制包
2020/09/30 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
高中毕业生的个人自我评价
2014/02/21 职场文书
道德之星事迹材料
2014/05/03 职场文书
数学教育专业求职信
2014/07/22 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
社区干部培训心得体会
2016/01/06 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python