这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了在 JavaScript 应用中实现延迟加载的方法, 利用 RequireJS 框架, 需要的朋友可以参考下
无论简单还是复杂的 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;
- }
在浏览器中打开这个页面,你将看到如下的信息。
虽然上面的代码能够显示输出,但是它仍有一些问题:
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 文件。
总结
在这篇文章里,我们分析了 RequireJS 框架是如何处理 JavaScript 文件间的依赖关系并根据需要载入它们的。它能够帮助开发者写出更松耦合、更模块化且更具有可维护性的代码。
谢谢
下载源代码: Lazy Loading using RequireJS (Prasad Honrao, Codetails)
来源: http://www.phperz.com/article/17/0410/270670.html