欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-11-28 08:58:40
require.js简介 require.js是javascript模块化编程中常用的一个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 加载过程与使用方法介绍，希望对大家有所帮助

上一篇： PHP常用函数和常见疑难问题解答

下一篇： Oracle中获取执行计划的几种方法分析

推荐阅读