RequireJS 教程

RequireJS介绍

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。在浏览器中可以作为js文件的模块加载器,也可以用在Node和Rhino环境。 先来看一段常见的场景,通过示例讲解如何运用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的官方网站去下载js -> requirejs.rog,可能国内访问很慢,建议引用或下载CDN加速服务器文件: http://www.bootcdn.cn/require.js/ 目前最新版本是2.1.2
<script src="//cdn.bootcss.com/require.js/2.1.20/require.min.js"></script>
index.html:
<!DOCTYPE html>
<html>
 <head>
<script src="//cdn.bootcss.com/require.js/2.1.20/require.min.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>

我们需要您的支持

支付宝捐助

捐助记录

  • 操** 5.00 2019-8-2
  • 王** 23.33 2019-8-28
  • 吴** 10.00 2019-8-11
  • 竺** 0.10 2019-8-17
  • 童** 5.00 2019-8-18
  • 高** 10.00 2019-8-27
  • 孙** 10.00 2019-8-25
  • 刘** 1.00 2019-8-16
  • 王** 10.00 2019-8-30
  • 陈** 20.00 2019-8-27
  • 潘** 100.00 2019-8-6
  • 庾** 1.00 2019-8-24
  • 于** 50.00 2019-8-3
  • 李** 10.00 2019-8-30
  • 钟** 20.00 2019-8-17
  • 毛** 1.00 2019-8-28
  • 许** 10.00 2019-8-26
  • 吕** 0.80 2019-8-17
  • 爱心会员 0.29 2019-8-9
  • 郭** 10.00 2019-8-19
  • 贾** 20.00 2019-8-30
  • 李** 20.00 2019-8-6
  • 张** 1.00 2019-8-13
  • 陈** 10.00 2019-8-15
  • 黄** 20.00 2019-8-30
  • 时** 0.10 2019-8-10
  • 魏** 10.00 2019-8-17
  • 李** 0.70 2019-8-3
  • 冯** 0.30 2019-8-27
  • 石** 10.00 2019-8-6
  • 陈** 20.00 2019-8-24
  • 何** 20.00 2019-8-28
  • 成** 0.10 2019-8-4
  • 赵** 10.00 2019-8-5
  • 刘** 5.00 2019-8-15

扫一扫关注

Web前端中国