requireJS的基本用法

最新推荐文章于 2024-05-23 09:31:17 发布

置顶

g-Jack

最新推荐文章于 2024-05-23 09:31:17 发布

阅读量1.2w

点赞数 5

分类专栏： ————【angularJS】文章标签： requireJS 模块化加载

本文链接：https://blog.csdn.net/hao134838/article/details/51834609

版权

引言

目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣，在开始的

时候对这个框架不是很懂，因为里面有很多平台自己封装的东西，所以在理解起来不是很容易，经过这一段时间在项

目中的运用有了一定的理解，下面先来总结总结一下其中的一个技术点——RequireJS的基本用法。

基本介绍

RequireJS是一个JavaScript文件或者模块的加载器。它可以提高JavaScript文件的加载速度，避免不必要的

堵塞。它针对于在浏览器环境中使用做过专门的优化，但它也可以在其他的JavaScript环境中使用，像Node.js一样

可以在服务器上运行。说了这么多废话，其实它为我们提供了两种思路解决大量加载js文件带来的问题：

1、模块化组织JS

2、异步加载js文件

为什么需要用RequireJS？

当我们业务比较负载时候我们有时候需要在一个页面中引入大量的js文件，之前的ITOO中会见到一个页面引入

了很多的js文件，原先我们的写法是这样的：

<script src="js/app/a.js"></script>

<script src="js/app/b.js"></script>

 <script src="js/app/c.js"></script>

这样写的有很多的缺点：

1、页面在加载的时候从上往下开始加载和渲染的，当页面有很多分散的JS文件的时候，页面会先加载和解析

头部的js文件（同步加载），此时页面渲染就被堵塞了，如果这些js文件请求的数量比较多，那么网页失去响应的时

间就会加长。

2、如果js文件之间是有相互依赖关系的，那么我们的js文件引入的顺序需要我们一定要注意，依赖性大的文件

一定在最后引入，但是当依赖关系非常复杂的时候，代码的编写和维护就非常复杂了。

然上面引入JS时候，对于第1点：首先：我们可以放在底部去加载，把所有JS放在</body>之前去，这样就会解决

了游览器堵塞的问题，其次我们可以把所有的JS文件打包成一个JS文件，但是依赖性(也就是顺序)我们还是没有办法

解决掉，所以我们引入了requireJS（优点：1、实现JS文件的异步加载，避免网页被堵塞。2、管理模块之间的依赖

性，便于代码的编写和维护。）。

requireJS的基本语法及用法

1、在官网上下载requireJS包，在我们页面的头部引入require.js文件，基本用法如下：

<head>
    <meta charset="UTF-8">
    <title>RequirJS测试</title>
    <scri

关注