在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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
jquery事件与绑定事件
Mar 16 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 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求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python字典改变value值方法总结
2019/06/21 Python
pandas如何处理缺失值
2019/07/31 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python函数式编程实例详解
2020/01/17 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
领导调研接待方案
2014/02/27 职场文书
人力资源主管职责范本
2014/03/05 职场文书
士力架广告词
2014/03/20 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书