require.js 加载过程与使用方法介绍


Posted in Javascript onOctober 30, 2018

require.js简介

require.js是javascript模块化编程中常用的一个JS库。

现在的网页功能较以前已经丰富了许多,同时网页上需要导入越来越多的JS文件来实现这些功能。使用原有的script标签一个个导入js文件会导致代码的复杂与臃肿。并且导入的各个JS文件可能会有冲突,导致许多功能无法使用且会使bug非常难定位。

这样的情况下我们就需要一个合适的Javascript模块载入框架,来满足我们团队协作、模块复用、单元测试等等一系列复杂的需求。使用require.js进行模块化加载会使前端代码的质量得到提升。

require.js的优点

不使用require.js的写法

在以前的编程中,我们或许会这样导入js文件:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="xxx.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

而在xxx.js文件中我们会这样写:

function fun1(){
 alert("it works");
}

fun1();

上述的xxx.js文件中的fun1方法可能会与其他文件中的方法重名导致方法被重载覆盖,会导致一些未知的bug。所以一些有经验的程序员或许会更倾向与这样写:

(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})()

这样编码的好处在于限制了fun1方法的作用域,这样就不会被其他的fun1方法所重写。并且这样的写法也防止了污染全局变量。

我们运行以上的代码时,会发现xxx.js中的alert运行时,页面并未加载完成。(body标签中的span并未显示在页面中)。这是因为alert阻塞了浏览器渲染,等alert完成后浏览器才会继续进行渲染。(这里很像主进程被阻塞了,程序会等待当前操作完成后再继续进行)。

使用require.js

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

这里先导入了require.js,然后使用require([“xxx”])来加载xxx.JS文件

xxx.js
define(function(){
 function fun1(){
  alert("it works");
 }

 fun1();
})

运行上两个文件,我们发现alert时并未阻塞浏览器渲染,body中的span依然出现在了页面上。所以首先我们可以发现,使用require.js进行加载时我们不会阻塞浏览器渲染。

同时,我们会发现使用require.js加载时,也是完全避免了js文件中的方法被重写覆盖或js文件中的变量、方法污染全局变量、方法的情况。

我们使用程序代码加载模块,也避免了下面这样丑陋的情况:

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

require.js 的加载

使用require.js异步加载js文件时,相当于是另开一个线程来进行加载文件这个操作。在require.js的定义中,我们可以在要加载的文件中添加它的依赖项,这些依赖文件会该文件被加载之前先加载,再以参数的方式传入到该文件之中。
xxx.js写法如下:

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){



// some code here


});

此时xxx.js依赖于moduleA,moduleB,moduleC。 使用require.js加载xxx.js时,会先加载moduleA,moduleB,moduleC三个模块,然后以参数的方式传入xxx.js中。

这里我们原则上要避免循环依赖的出现。例如:A依赖与B,B又依赖与A。这样就出现了循环依赖。

虽然出现循环依赖不会导致加载失败,但是在加载A时,传入A的依赖项B中的A参数会为null值,导致一些无法预知的问题。所以我们还是要尽量避免循环依赖的情况出现。

这里的异步加载都不会影响该文件以外的所有变量与方法。

20181029 更新

在实际的使用中遇到了一些问题,发现实际上在同一个页面中,如果出现了A依赖于C,B同时也依赖与C。我们如果在此时出现一个文件同时依赖与A与B,在这种情况下A与B所依赖的C会是同一个实例。

也就是说,在一个页面中,使用require.js加载的文件,是以类似于单例的形式的存在的。在首次加载时异步加载,其他文件需要依赖时就将已加载完成的文件注入。

这样就会导致A与B使用的是C的同一个实例,C中的全局变量变化会同时影响到A、B两个模块。这是在开发过程中需要注意的。!

总结

以上所述是小编给大家介绍的require.js 加载过程与使用方法介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
js获取ajax返回值代码
Apr 30 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
Vue3为什么这么快
Sep 23 Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 #Javascript
微信小程序实现单选功能
Oct 30 #Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 #Javascript
小程序实现多选框功能
Oct 30 #Javascript
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php中session退出登陆问题
2014/02/27 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
js 提交和设置表单的值
2008/12/19 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[00:42]《辉夜杯》—职业组预选赛12月3日15点 正式打响
2015/12/03 DOTA
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python List cmp()知识点总结
2019/02/18 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
存储过程的优点有哪些
2012/09/27 面试题
Java面向对象面试题
2016/12/26 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
中专毕业自我鉴定
2013/10/16 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
仓库文员岗位职责
2014/04/06 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
兵马俑的导游词
2015/02/02 职场文书
奖学金个人总结
2015/03/04 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
python异步的ASGI与Fast Api实现
2021/07/16 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏