引言
目前项目中的前端架构采用的是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