require.js 加载过程与使用方法介绍
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 加载过程与使用方法介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
js基于FileSaver.js 浏览器导出Excel文件的示例
本篇文章主要介绍了js基于FileSaver.js 浏览器导出Excel文件的示例，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
让textarea自动调整大小的js代码，需要的朋友可以参考下。2011-04-04
下面小编就为大家带来一篇js事件驱动机制 浏览器兼容处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了细数localStorage的用法及使用注意事项，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这几天不是很忙，就找了些拖动布局方面的资料看看，也学着写了个拖动布局的效果，没想到花了好多时间，七拼八凑，总算是把这个效果写出来了。2010-10-10
这篇文章主要介绍了js鼠标悬浮出现遮罩层的方法,以实例形式较为详细的分析了html及css页面布局与js特效的实现方法,是非常实用的技巧,需要的朋友可以参考下2015-01-01
最近由于公司需要研究了一下微信小程序的开发,特此记录一下小程序获取授权的流程,便于自己理解,下面这篇文章主要给大家介绍了关于如何通过大白话理解微信小程序获取授权的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了微信小程序 调用远程接口 给全局数组赋值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
跨标签页通信是指在浏览器中的不同标签页之间进行数据传递和通信的过程,这篇文章为大家整理了前端常见的跨标签页通信方式,有需要的小伙伴可以了解下2023-10-10
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景，而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料，需要的朋友可以参考借鉴，下面来一起学习学习吧。2017-09-09
最新评论