RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
首先先看正常编写方式(一个index.html,一个a.js):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<span>body</span>
</body>
</html>
/**
* Created by qsong on 2016/3/3.
*/
/*书写函数*/
function fun1(){
alert("it works");
}
/*调用函数*/
fun1();
/*JS阻塞浏览器渲染,先出现弹出框,其次才能看到网页内容*/
然后去运行该index.html文件,alert执行的时候,html内容是一片空白的,即<span>body</span>
并未被显示,当点击确定后,才出现,这就是JS阻塞浏览器渲染导致的结果。
接下来看requirejs写法(一个index.html,一个a.js):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>requireJS练习</title>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
/*使用程序调用的方式加载js*/
/*require中的依赖是一个数组,必须用数组来定义*/
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html>
define(function(){
function fun1(){
alert("it works");
}
fun1();
});
浏览器提示了"it works",说明运行正确,但是有一点不一样,这次浏览器并不是一片空白,body已经出现在页面中
目前为止可以知道requirejs具有如下优点:
- 防止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>