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

2019-11-02 14:51:57

字体：大中小

来源：转载

供稿：网友

　　这篇文章主要介绍了在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; }

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

上一篇：对JavaScript的全文搜索实现相关度-评分的功能的方法

下一篇：javascript 实现跨域的方法汇总