RequireJS入门：解决JS阻塞渲染与模块化加载

RequireJS简介与背景

随着网站功能日益丰富，网页中的JavaScript代码变得愈发复杂和庞大。传统的通过script标签逐个导入js文件的方式，已难以满足当前互联网开发模式的需求。现代开发需要支持团队协作、模块复用以及单元测试等一系列复杂场景。

RequireJS是一个轻量级的JavaScript模块载入框架，也是AMD（Asynchronous Module Definition）规范的优秀实现之一。其最新版本压缩后仅14K，体积非常小巧。此外，它还能与其他框架协同工作，使用RequireJS有助于提升前端代码的整体质量。

requirejs能带来什么好处

官方对requirejs的描述：

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

大致意思：

在浏览器中可作为js文件的模块加载器，也可应用于Node和Rhino环境。这段描述概括了requirejs的基本功能——“模块化加载”。那么，什么是模块化加载？我们将在后续内容中逐一解释。

传统加载与RequireJS对比

先来看一段常见的场景，通过示例讲解如何运用requirejs

正常编写方式 index.html:

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

a.js:

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

可能你更喜欢这样写

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

第二种方法利用块作用域声明function，以避免污染全局变量，其本质与第一种方法相同。当运行上述两种示例时，可能会注意到：在alert执行期间，HTML内容显示为空白，即<span>body</span>并未立即显示。只有点击确定后，内容才会出现。这是JS阻塞浏览器渲染导致的结果。

RequireJS配置与使用示例

requirejs写法

首先，需从requirejs官网下载js文件 -> requirejs.rog index.html:

<!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>

a.js:

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

浏览器提示“it works”，表明运行正确。但与之前不同的是，此次浏览器并未显示空白，body已正常出现在页面中。至此可知，requirejs具备以下优点：

1、防止js加载阻塞页面渲染 2、使用程序调用的方式加载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模块化工具有所帮助。