Web应用程序，不管是简单的还是复杂的，都是由HTML、JavaScript和CSS文件组成的。通常，开发人员使用第三方JavaScript框架，如JQuery、淘汰赛、下划线等。要提高发展速度。由于这些JavaScript框架是为特定目的开发的，并且已经过“验证”，因此直接使用它们比从头开始实现所需的功能更合适。然而，随着应用程序复杂性的增加，编写干净、低耦合和可维护的代码变得越来越重要。在本文中，我将解释RequireJS框架如何帮助应用程序开发人员编写更模块化的代码，以及它如何通过延迟加载JavaScript文件来提高应用程序性能。一开始，我们不使用requires js框架，然后在下一章用requires js重新构建。

下面的HTML页面包含一个id为“message”的p元素。当用户访问此页面时，它将显示订单Id和客户名称信息。

常见。JS文件包含两个模块的定义：——Order和Customer。函数showData与页面的主体相结合，它通过调用write函数把要输出的信息放入页面。例如，我在showData函数中硬编码了Id 1和客户名称Prasad。

！DOCTYPE HTMl HTMl head title JAVAScript NonRequireJS/title script src=' http : common . js ' type=' text/JAVAScript '/script/head dystronglong显示无需求的数据/strong p id=' message '/script type=' text/JAVAScript ' show data()；/script/body/htmlCommon。JSfunction write(message){ document . getelementbyid(' message ')。innerHTML=message '/br '；}函数showData() { var o=new Order(1，' Prasad ')；写下('订单编号： ' o.id '客户名称： ' o .客户名称)；}函数Customer(name){ this . name=name；归还这个；}函数Order(id，customerName){ this . id=id；客户=新客户(客户名称)；归还这个；}在浏览器中打开此页面，您将看到以下信息。

虽然上面的代码可以显示输出，但它仍然存在一些问题：

常见。JS文件包含所有需要定义的函数(write、showData)，模块(Order、Customer)难以维护和重用。如果想在其他页面重用write函数，参考上面的JavaScript文件，也可以导入这个页面可能不需要的其他函数和模块。订单模块(或面向对象中的“类”)在初始化期间创建客户模块的实例。这意味着订单模块依赖于客户模块。这些模块之间的紧密耦合使得在未来的优化中很难重构和维护。每次客户端请求此页面时，公共。JS文件将被加载到DOM中。在上面的例子中，虽然我们只需要在页面上输出信息，但我们仍然将那些不必要的模块(客户、订单)加载到内存中。加载不必要的应用资源(JavaScript、CSS、图片文件等)。)会降低应用程序的性能。公共中的模块。JS文件可以拆分成不同的JavaScript文件，但是当应用变得越来越复杂时，就很难判断JavaScript文件之间的依赖关系以及需要加载的文件的加载顺序。RequireJS框架处理JavaScript文件之间的依赖关系，并根据需要按顺序加载它们。

根据需求构建应用程序

现在让我们看看重构的代码。下面的HTML代码引用了Require。JS文件。data-main属性定义了此页面的唯一入口点。在下面的场景中，它告诉RequireJS在启动时加载Main.js。

！DOCTYPE HTMl HTMl HeadTitle JAVAScript Requisitejs/title script src=' Http : Requisite。js ' type=' text/JavaScript ' data-main=' main . js '/script/headsdystrongdisplay使用require js/strong p id=' message '/body/html main显示数据。射流研究…

由于这个文件是由data-main属性指定的，RequireJS将尽快加载它。该文件使用RequireJS框架的功能来确定和定义对其他JavaScript文件的依赖。在下面的代码片段中，第一个参数表示依赖关系(取决于顺序。JS文件)，第二个参数是回调函数。RequireJS分析并加载所有依赖项，然后执行这个回调函数。请注意，第一个参数(顺序)的值必须与文件名(顺序)匹配。JS)。

需要(['Order']，函数(Order) { var o=new Order(1，' Prasad ')；书写(o . id o . customer . name)；});秩序。射流研究…

RequireJS框架提供了一种简单的方法来定义和维护JavaScript文件之间的依赖关系。下面代码中的定义函数声明客户。在处理订单回调函数之前，必须加载JS。

定义(['Customer']，函数(Customer){函数Order(id，cust name){ this . id=id；this.customer=新客户(cust name)；}退货单；});顾客。射流研究…

该文件不依赖于任何其他JavaScript文件，因此define函数的第一个参数的值是一个空数组。

定义([]，函数(){函数Customer(name){ this . name=name；}返回客户；});好了，现在用你的浏览器打开这个应用程序，你会看到下面的输出。请注意，RequireJS只加载必要的JavaScript文件。

摘要

在本文中，我们分析了RequireJS框架如何处理JavaScript文件之间的依赖关系，并根据需要加载它们。它可以帮助开发人员编写更加松散耦合、模块化和可维护的代码。

谢谢你

使用require js下载源代码：延迟加载(Prasad Honrao，co详情)