首页 > 代码库 > requireJS的初步掌握

requireJS的初步掌握

2024-09-03 01:15:49   216人阅读

前一段时间，因为一些事吧这个习惯落下了，现在争取重新捡起来。

最近开始自学requireJS,为了更好的掌握，所以写出一个自我理解的博客供参考。

分割线-------------------------

 

首先，学习requireJS，要知道什么是requireJS.

requireJS是一个可在js和node环境下运行的一个非常小巧的一个AMD规范下的js模块载入框架，通俗的理解为模块加载器。

相信开始学习requireJS的一定对JS代码的模块化有一个初步的了解了。而requireJS主要解决了两大问题

第一。在传统的模块化封装中一定对那难堪入目的引入方式和引入的先后顺序有很大的排斥和烦恼。

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

而requireJS很好的解决了这个问题，（在之后的讲述中会讲到解决方式）

第二。相信大家应该也遇到过JS阻塞浏览器渲染这个问题。

<!DOCTYPE html>
<html>
    <head>
          <title></title>
    </head>
    <body>
      <span>hello world</span>
      <script type="text/javascript">
            alert(‘1‘);
       </script> 
    </body>
</html>

你会发现，浏览器运行后会先执行alert，这时候页面应该是一片空白，点击确定后在加载body中的内容。

这就是JS阻塞浏览器渲染导致的。

有写同学就会说，可以增加async和defer什么的，也可以避免出现阻塞！

其实这个想法很好，我之前也是这么想的。但是我没考虑到的是，当引入外部js过多的情况下，这种方式不好控制异步加载的顺序，导致出现错误。

而如何控制加载顺序，那么就有回到了第一个问题了。requireJS会有好的帮我们处理好这些顾虑。

这也就是我们下一章要讲的依赖的问题。

 

这里顺便给同学们简单的描述下AMD和CMD的概述和区别

AMD：是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

CMD：是"Common Module Definition"的缩写,意思就是“常用模块定义”。它采用的是延迟加载模块，使用的时候加载所需要的模块，定义在唯一的参数里面边封装，边加载，边依赖。

AMD和CMD的本质区别就是：amd采用的是依赖前置，而cmd采用的是延迟依赖。

 

requireJS的初步了解先讲到这里，相信大家应该和我一样，有了一定的了解。

下一章节描述，requireJS的依赖和常用的API。也希望和大家能共同进步

 

 

   

 

requireJS的初步掌握


联系
我们