在JavaScript应用中使用RequireJS来实现延迟加载


Posted in Javascript onJuly 01, 2015

无论简单还是复杂的Web应用,都由一些HTML、JavaScript、CSS文件组成。通常开发者会通过JQuery、Knockout、Underscore等等这样的第三方JavaScript框架来提高开发速度。由于这些JavaScript框架都针对特定的用途开发而且已经得到了“验证”,所以直接使用它们就比自己从头实现所需要的功能显得更为合适。然而,伴随着应用的复杂度不断上升,写出干净、低耦合、可维护的代码变得越来越重要。在这篇文章里,我将解释 RequireJS框架如何帮助应用开发者写出更加模块化的代码,以及它是如何通过延迟加载JavaScript文件来提高应用性能的。

开始的部分我们先不用RequireJS框架,然后在下一个章节用RequireJS来重构它。

下面的这个HTML页面包含了一个id为“message”的<p>元素。当用户访问这个页面的时候,它将展示订单Id和客户姓名信息。

Common.JS文件包含了两个模块的定义——Order和Customer。函数showData和页面的body结合在一起,它通过调用write函数来把要输出的信息放入页面中。作为示例,我在showData函数里硬编码了Id为1,客户姓名为Prasad。
 

<!DOCTYPE html>
<html>
<head>
<title>JavaScript NonRequireJS</title>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<strong>Display data without RequireJS</strong>
<p id="message" />
<script type="text/javascript">
showData();
</script>
</body>
</html>
Common.JS
 
function write(message) {
  document.getElementById('message').innerHTML += message + '</br>';
}
 
function showData() {
  var o = new Order(1, "Prasad");
  write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
 
function Customer(name) {
  this.name = name;
  return this;
}
 
function Order(id, customerName) {
  this.id = id;
  this.customer = new Customer(customerName);
  return this;
}

在浏览器中打开这个页面,你将看到如下的信息。

在JavaScript应用中使用RequireJS来实现延迟加载

虽然上面的代码能够显示输出,但是它仍有一些问题:

  •     Common.JS文件包含了所有需要定义的函数(write,showData),而且模块(Order,Customer)很难维护和复用。假如你想在其它页面里复用write函数并引用了上面的JavaScript文件,那么你也导入了这个页面可能不需要的其它函数和模块。
  •     Order模块(或者在面向对象中叫做“类”)在初始化过程中创建了一个Customer模块的实例。这意味着Order模块依赖于Customer模块。这些模块间的紧耦合使得将来在优化时很难重构与维护。
  •     每当客户端请求这个页面时,Common.JS文件就会被载入DOM。在上面这个例子中,尽管我们只需要在页面上输出信息,但我们仍把那些不需要的模块(Customer,Order)载入了内存。载入不必要的应用资源(JavaScript、CSS、图片文件等等)会降低应用的性能。
  •     Common.JS文件里的模块可以被分离到不同的JavaScript文件里,但是当应用变得越来越复杂时,很难判断JavaScript文件之间的依赖关系与需要被加载的文件的加载顺序。

RequireJS框架处理了JavaScript文件间的依赖关系,并且根据需要按顺序加载它们。

用RequireJS搭建应用

现在让我们看看重构过的代码。下面的HTML代码引用了Require.JS文件。data-main属性定义了这个页面的唯一入口点。在下面这个场景中,它告诉了RequireJS在启动的时候加载Main.js。
 

<!DOCTYPE html>
<html>
<head>
<title>JavaScript RequireJS</title>
<script src="Require.Js" type="text/javascript" data-main="Main.js"></script>
</head>
<body>
<strong>Display data using RequireJS</strong>
<p id="message" />
</body>
</html>

Main.JS

由于这个文件已经通过data-main属性指定,RequireJS将会尽快的加载它。这个文件使用了RequireJS框架的函数来确定和定义对于其它JavaScript文件的依赖关系。在下面的代码片段里,第一个参数表示依赖关系(依赖Order.JS文件),第二个参数为一个回调函数。RequireJS分析所有的依赖关系并载入它们,然后执行这个回调函数。请注意,第一个参数的值(Order)必须和文件名一致(Order.JS)。
 

require(["Order"], function (Order) {
  var o = new Order(1, "Prasad");
  write(o.id + o.customer.name);
});

Order.JS

RequireJS框架提供了一个定义和维护JavaScript文件间依赖关系的简便途径。下面代码中的define函数声明了Customer.JS必须在处理Order回调函数前载入。
 

define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);
Customer.JS

这个文件不依赖于任何其它JavaScript文件,所以define函数的第一个参数的值是一个空数组。
 

define([],
function () {
function Customer(name) {
this.name = name;
}
return Customer;
}
);

好了,现在用你的浏览器打开这个应用,你将会看到如下的输出。要注意的是RequireJS只载入了必需的JavaScript文件。

在JavaScript应用中使用RequireJS来实现延迟加载

 总结

在这篇文章里,我们分析了RequireJS框架是如何处理JavaScript文件间的依赖关系并根据需要载入它们的。它能够帮助开发者写出更松耦合、更模块化且更具有可维护性的代码。

Javascript 相关文章推荐
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 #Javascript
优化RequireJS项目的相关技巧总结
Jul 01 #Javascript
JavaScript的RequireJS库入门指南
Jul 01 #Javascript
Backbone.js的一些使用技巧
Jul 01 #Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 #Javascript
javascript常用的方法分享
Jul 01 #Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
JavaScript实现连连看连线算法
2019/01/05 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python中list查询及所需时间计算操作示例
2018/06/21 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
新闻学毕业生自荐信
2013/11/15 职场文书
医学检验专业个人求职信范文
2013/12/04 职场文书
建筑工程毕业生自我鉴定
2014/01/14 职场文书
货车司机岗位职责
2014/03/18 职场文书
安全生产承诺书范文
2014/05/22 职场文书
绘画专业自荐信
2014/07/04 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
庆六一宣传标语
2014/10/08 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书