下面的这个HTML页面包含了一个id为“message”的
元素。当用户访问这个页面的时候，它将展示订单Id和客户姓名信息。
Common.JS文件包含了两个模块的定义——Order和Customer。函数showData和页面的body结合在一起，它通过调用write函数来把要输出的信息放入页面中。作为示例，我在showData函数里硬编码了Id为1，客户姓名为Prasad。
JavaScript NonRequireJS Display data without RequireJS
在浏览器中打开这个页面，你将看到如下的信息。
虽然上面的代码能够显示输出，但是它仍有一些问题：
RequireJS框架处理了JavaScript文件间的依赖关系，并且根据需要按顺序加载它们。
用RequireJS搭建应用
现在让我们看看重构过的代码。下面的HTML代码引用了Require.JS文件。data-main属性定义了这个页面的唯一入口点。在下面这个场景中，它告诉了RequireJS在启动的时候加载Main.js。
JavaScript RequireJS
Main.JS
由于这个文件已经通过data-main属性指定，RequireJS将会尽快的加载它。这个文件使用了RequireJS框架的函数来确定和定义对于其它JavaScript文件的依赖关系。在下面的代码片段里，第一个参数表示依赖关系（依赖Order.JS文件），第二个参数为一个回调函数。RequireJS分析所有的依赖关系并载入它们，然后执行这个回调函数。请注意，第一个参数的值（Order）必须和文件名一致（Order.JS）。
Order.JS
RequireJS框架提供了一个定义和维护JavaScript文件间依赖关系的简便途径。下面代码中的define函数声明了Customer.JS必须在处理Order回调函数前载入。
Customer.JS
这个文件不依赖于任何其它JavaScript文件，所以define函数的第一个参数的值是一个空数组。
好了，现在用你的浏览器打开这个应用，你将会看到如下的输出。要注意的是RequireJS只载入了必需的JavaScript文件。
总结
在这篇文章里，我们分析了RequireJS框架是如何处理JavaScript文件间的依赖关系并根据需要载入它们的。它能够帮助开发者写出更松耦合、更模块化且更具有可维护性的代码。
谢谢
下载源代码: Lazy Loading using RequireJS (Prasad Honrao, Codetails)
下载本文