在javaｓｃｒｉｐｔ应用中实现延迟加载的方法

简单的和复杂的Web应用程序由一些HTML，Javaｓｃｒｉｐｔ和CSS文件。开发商通常会增加发展的速度通过第三方的Javaｓｃｒｉｐｔ框架如jQuery、基因敲除、下划线等等。由于这些Javaｓｃｒｉｐｔ框架已经制定了具体的目的，得到了验证，这是更适合直接比他们需要的完成从零开始使用它们。然而，随着应用的日益复杂，越来写干净、低耦合、可维护的代码更重要。在这篇文章中，我将解释如何requirejs框架可以帮助应用程序开发人员编写更多的代码模块，以及如何提高应用程序的性能通过延迟加载javaｓｃｒｉｐｔ文件。

在开始的时候，我们不使用requirejs框架首先，然后调整它在下一章RequireJS。

下面的HTML页面包含id消息的一个元素。当用户访问页面时，它显示订单ID和客户姓名信息。

的common.js文件包含两个模块-订单和客户的定义，功能showdata结合页面的主体，它调用写函数将被输出到页面上的信息。例如，我硬编码的ID 1在showdata功能，和客户的名字是Prasad。

Javaｓｃｒｉｐｔ nonrequirejs
显示数据而不需要requirejs
showdata（）；
common.js
函数写入（消息）{
document.getelementbyid（消息）.innerHTML =信息+；
}

功能showdata（）{
var o =新秩序（1，Prasad ）；
写（订单ID+ o.id +客户名称：+ o.customer。名称）；
}

函数客户（名称）{
this.name =名称；
返回此；
}

功能命令（ID，CustomerName）{
this.id = ID；
this.customer =新客户（客）；
返回此；
}

在浏览器中打开此页，您将看到以下信息。
虽然上面的代码可以显示输出，但仍然存在一些问题：

的common.js文件包含的所有功能，需要定义（写，showdata），和模块（订单、客户）是难以维护和重用。如果你想回写功能在其他页面，请参阅上面的Javaｓｃｒｉｐｔ文件，导入等功能和模块，此页可能不需要。
订单模块（或面向对象的类）在初始化过程中创建客户模块的实例，这意味着订单模块依赖于客户模块，这些模块之间的紧密耦合使得在优化时很难对未来进行重构和维护。
当客户端请求这个页面，这common.js文件加载到DOM中。在上面的例子中，我们只需要在页面输出的信息，我们仍然负载不需要的模块（客户、订单）到内存，加载不必要的应用程序资源（Javaｓｃｒｉｐｔ、CSS、图片文件等）会降低应用程序的性能。
在common.js文件模块可以分为不同的Javaｓｃｒｉｐｔ文件，但是当应用程序变得越来越复杂，很难确定Javaｓｃｒｉｐｔ文件和需要加载文件的加载顺序之间的依赖关系。
的requirejs框架处理Javaｓｃｒｉｐｔ文件并加载它们之间的依赖关系，需要。
RequireJS建筑中的应用

现在让我们在重构代码看。下面的HTML代码是指require.js文件。数据主要属性定义了页面的独特的切入点。在以下的情况下，它告诉requirejs负载main.js当它开始。

Javaｓｃｒｉｐｔ requirejs
使用requirejs显示数据

main.js

由于该文件已由数据主要属性指定，requirejs将它尽快。该文件使用的requirejs框架来确定其他Javaｓｃｒｉｐｔ文件的依赖关系的功能。在下面的代码片段中，第一个参数是一个依赖（依赖于order.js文件），和第二参数是一个回调function.requirejs分析所有的依赖并加载它们，然后执行回调函数。注意，第一个参数的值（阶）必须与文件名一致（顺序。JS）。

要求（{订单}、函数（命令）{）
var o =新秩序（1，Prasad ）；
写（o.id + o.customer。名称）；
}）；
order.js

的requirejs框架提供了一种简单的方法来定义和维护的Javaｓｃｒｉｐｔ文件之间的依赖关系。定义函数在以下代码中声明的顺序customer.js之前必须回调函数处理装。

定义（{客户}），
函数（客户）{
功能命令（ID，custname）{
this.id = ID；
this.customer =新客户（custname）；
}
返回命令；
}
）；
customer.js

这个文件不依赖于任何其他Javaｓｃｒｉｐｔ文件，所以定义函数的第一个参数的值是一个空数组。

定义（{ }），
函数（）{
函数客户（名称）{
this.name =名称；
}
回报客户；
}
）；
好，现在打开你的浏览器应用程序，你会看到如下输出。需要注意的是，requirejs只加载必需的Javaｓｃｒｉｐｔ文件的重要。
总结

在这篇文章中，我们分析了requirejs框架处理Javaｓｃｒｉｐｔ文件并加载它们的需要之间的关系。它可以帮助开发人员编写更宽松、更模块化，更易于维护的代码。

谢谢你

下载源代码：懒加载使用requirejs（Prasad Honrao，codetails）