在JavaScript应用中实现延迟加载的方法


Posted in Javascript onJune 25, 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应用中实现延迟加载的方法

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

  •     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框架是如何处理JavaScript文件间的依赖关系并根据需要载入它们的。它能够帮助开发者写出更松耦合、更模块化且更具有可维护性的代码。

谢谢

下载源代码: Lazy Loading using RequireJS (Prasad Honrao, Codetails)

Javascript 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jquery+json实现的搜索加分页效果
Mar 31 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
JS鼠标滚动分页效果示例
Jul 05 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 #Javascript
深入分析JSON编码格式提交表单数据
Jun 25 #Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 #Javascript
jquery使整个div区域可以点击的方法
Jun 24 #Javascript
jQuery寻找n以内完全数的方法
Jun 24 #Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 #Javascript
Javascript常用小技巧汇总
Jun 24 #Javascript
You might like
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP获取文件行数的方法
2015/06/10 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python实现的快速排序算法详解
2017/08/01 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
校长四风对照检查材料
2014/09/27 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
辞职信怎么写
2015/02/27 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书