当前位置:首页 > 日记 > 正文

使用requirejs实现延迟加载Javascript应用程序

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

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

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

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

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

RequireJS建筑中的应用

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

Javascript requirejs
使用requirejs显示数据

main.js

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

要求({订单}、函数(命令){)
var o =新秩序(1,Prasad );
写(o.id + o.customer。名称);
});
order.js

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

定义({客户}),
函数(客户){
功能命令(ID,custname){
this.id = ID;
this.customer =新客户(custname);
}
返回命令;
}
);
customer.js
这个文件不依赖于任何其他Javascript文件,所以定义函数的第一个参数的值是一个空数组。

定义({ }),
函数(){
函数客户(名称){
this.name =名称;
}
回报客户;
}
);
好,现在打开你的浏览器应用程序,你会看到如下输出。需要注意的是,requirejs只加载必需的Javascript文件的重要。
总结

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

相关文章

PS让你设计一个免费的15草图插件,效

PS让你设计一个免费的15草图插件,效

插件,让你,草图,效率高,电脑软件,以下萧边推荐的PS为你设计草图15免费插件,设计效率高。我相信这些插件一定会让你设计得更好更快。现在让我们看一看。 虽然波希米亚编码团队一直试图更新草图的可用性,改善其功能和特性,但它仍然不能满足设计…

深入了解Javascript的范围和上下文

深入了解Javascript的范围和上下文

上下文,电脑软件,Javascript,总结 The implementation of the scope and context in Javascript is a unique feature of the Javascript language and, to some extent, the Javascript language is very flexible.The functions in Javascript can…

Excel如何改变列宽和行基于Excel的

Excel如何改变列宽和行基于Excel的

高度,电脑软件,Excel,Office Excel是微软公司开发的一个电子表格程序,是微软Office系列的核心组件之一。它可以为XML和新功能提供支持,使分析和共享信息更加方便。 以下是学习excel知识。 Excel提供了几种改变列宽度和行高度的方法。 1。改变…

WPS如何使表如何合并单元格WPS表教

WPS如何使表如何合并单元格WPS表教

教程,合并单元格,电脑软件,WPS,无论是在工作或学习或生活中我们可以使用WPS,我们经常遇到需要做表格,表格是为了做WPS Excel,但我不爱很小,有时它太麻烦做一个小桌子,所以小份额中文字如何美丽的形式和WPS形式和分享如何合并单元格我们希望与WPS…

如何在PSPNG8位格式导出文件

如何在PSPNG8位格式导出文件

导出文件,格式,如何在,电脑软件,如何在PS PNG8位格式导出文件ps是一个图像处理软件。功能强大,想要全面全面地了解,需要时间。接下来,分享在PS.出口PNG8格式文件的具体方法 ps是一个图像处理软件。它的功能和它的强度,要全面全面的了解,不是日夜…

excel函数应用程序的基本excel库

excel函数应用程序的基本excel库

应用程序,函数,电脑软件,excel,Excel函数应用基础 1。函数与公式 (1)什么是功能 Excel函数是预定义的特殊公式,进行计算、分析,以及数据的任务,其他处理。以常见的求和函数为例,它的语法是和(number1,number2,…),SUM称为函数名称,一个函数只有一个独特…

jQuery插件slicebox三维动画轮播切

jQuery插件slicebox三维动画轮播切

插件,三维动画,电脑软件,jQuery,slicebox,美丽的3D动画图片轮播切换效果的jQuery插件jquery.slicebox.js,基于jQuery的插件,使用CSS 3D动画,支持回调调用,支持自定义的配置参数,如:速度:600、自动播放:真正的开关速度是自动在浏览器兼容播放,需要一…

关闭和显示Javascript广告效果的示例

关闭和显示Javascript广告效果的示例

显示,示例,效果,广告,电脑软件,本文介绍了javascript广告的关闭和显示效果,供大家参考,具体的实现方法如下: js代码部分如下所示: 函数显示(){ 如果(oglead.style.visibility = = 'visible){ oglead.style.visibility =隐藏; document.getelementbyid('…

用ps绘制平面长投影按钮

用ps绘制平面长投影按钮

投影,绘制,平面,按钮,电脑软件,本教程主要是教你用ps绘制平面和长投影效果按钮,效果非常逼真,渲染过程也不难。有兴趣的朋友可以学习一下。 本教程教PS用户使用ps来绘制一个漂亮的长平面投影效果按钮,渲染出来的按钮效果非常好,渲染也不难,方法…

获取指定对象大小的Javascript方法

获取指定对象大小的Javascript方法

方法,对象,大小,电脑软件,Javascript,本文演示了Javascript如何获得指定对象的大小: 功能objectsize(the_object){ 函数来验证键是否存在 在对象中获取有效键的数量。 无功object_size = 0; 对于(关键在the_object){ 如果(the_object.hasownproperty(关键…

PS图象处理软件街与暗黄绿色的美

PS图象处理软件街与暗黄绿色的美

黄绿色,图象,处理软件,电脑软件,PS,天空中的图像有点白颜色,需要使用渐变填充颜色时,则底色的主要部分是蓝色,高光橙色可以增加。 天空中的图像有点白颜色,需要使用渐变填充颜色时,则底色的主要部分是蓝色,高光橙色可以增加。 原 最终效果 1,打…

Math.sin()方法在Javascript中使用详解

Math.sin()方法在Javascript中使用详解

方法,详解,电脑软件,Math,sin,该方法返回一个数的正弦值,方法返回1到1之间的值,该值表示参数的正弦值。 语法 Math.sin(X); 下面是参数的详细信息: X:一个数字 返回值: 返回一个数字的正弦值。 实例uff1a Javascript数学的罪恶()方法 VaR值= math.sin…