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中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
JS 创建对象的模式实例小结
Apr 28 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
Php Cookie的一个使用注意点
2008/11/08 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
jquery插件之easing使用
2010/08/19 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
7个JS基础知识总结
2014/03/05 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
python psutil库安装教程
2018/03/19 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
学习标兵获奖感言
2014/02/20 职场文书
党日活动总结
2014/05/07 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript