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

 　　这篇文章主要介绍了在JavaScript应用中实现延迟加载的方法,利用RequireJS框架,需要的朋友可以参考下

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

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

　　下面的这个HTML页面包含了一个id为“message”的

元素。当用户访问这个页面的时候，它将展示订单Id和客户姓名信息。

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

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!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

　　?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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;
}

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


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

　　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。

　　?

1
2
3
4
5
6
7
8
9
10
11

<!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)。

　　?

1
2
3
4

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

　　Order.JS

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

　　?

1
2
3
4
5
6
7
8
9

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

　　Customer.JS

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

　　?

1
2
3
4
5
6
7
8

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

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


　　总结

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

时间： 2024-08-24 22:13:45

在JavaScript应用中实现延迟加载的方法的相关文章

在JavaScript应用中实现延迟加载的方法_基础知识

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

异步JavaScript编程中的Promise使用方法_node.js

异步? 我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做"已经很清楚"(*￣?￣). 如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明.在这里,我会对JavaScript的异步做一点额外解释. 看一下这段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Time elap

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

  这篇文章主要介绍了在JavaScript应用中使用RequireJS来实现延迟加载,JavaScript是一款人气JS库,需要的朋友可以参考下 无论简单还是复杂的Web应用,都由一些HTML.JavaScript.CSS文件组成.通常开发者会通过JQuery.Knockout.Underscore等等这样的第三方JavaScript框架来提高开发速度.由于这些JavaScript框架都针对特定的用途开发而且已经得到了"验证",所以直接使用它们就比自己从头实现所需要的功能显得更为合适

在JavaScript的AngularJS库中进行单元测试的方法

这篇文章主要介绍了在JavaScript的AngularJS库中进行单元测试的方法,主要针对AngularJS中的控制器相关,需要的朋友可以参考下 开发者们都一致认为单元测试在开发项目中十分有好处.它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心. 测试驱动开发流程图 AngularJS的代码声称其较高的可测性确实是合理的.单单文档中列出端对端的测试实例就能说明.就像AngularJS这样的项目虽然都说单元测试很简单但真正做好却不容易.即使官方文档中以提供了详尽的实例,但

简述JavaScript中正则表达式的使用方法

  这篇文章主要介绍了JavaScript中正则表达式的使用方法,正则表达式是JS进阶学习中的重要知识,本文简述了JS对正则表达式的支持情况,需要的朋友可以参考下 正则表达式是一个对象,它描述了字符模式. JavaScript的RegExp类表示正则表达式和字符串和正则表达式定义,使用正则表达式来进行强大的模式匹配和搜索和替换文本功能的方法. 语法: 正则表达式可以用RegExp( ) 构造这样的定义: ? 1 2 3 4 5 var pattern = new RegExp(pattern,

javascript中数组的concat()方法的具体使用

 数组的concat()方法想必大家比不陌生吧,在本文为大家介绍下javascript中数组的concat()方法的具体使用,感兴趣的朋友可以参考下 代码如下: <html>  <head>  <title>数组的concat()方法</title>    <script>  /*  数组的concat()方法:  1.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本.  2.返回一个新的数组.该数组是通过把所有 arrayX 参数添加

JavaScript通过元素索引号删除数组中对应元素的方法

 这篇文章主要介绍了JavaScript通过元素索引号删除数组中对应元素的方法,涉及javascript操作数组的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了JavaScript通过元素索引号删除数组中对应元素的方法.分享给大家供大家参考.具体分析如下: JavaScript通过元素的索引号删除数组中的元素,如果要删除第3个元素,则使用RemoveValByIndex(2)即可,JS数组从0开始 ? 1 2 3 4 5 6 7 8 9 10 11 function Rem

JavaScript中扩展Array contains方法实例

 这篇文章主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下     javascript的Array没有contains方法,有时候这会不方便,contains方法实现很简单: 代码如下: function contains(a, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; } 当然我们也可以扩

JavaScript中神奇的call()方法

 这篇文章主要介绍了JavaScript中神奇的call()方法,本文用浅显的语言帮助你加深理解call()方法,需要的朋友可以参考下     先看看关于call()的官方解释,"调用一个对象的一个方法,以另一个对象替换当前对象.",看了这样的解释,或许让你更摸不着头脑了.看例子: 代码如下: var x = "我是全局变量"; //定义全局变量x function a(){ //定义函数类结构a this.x = "我是在函数类结构a中声明的哦"