怎么才能书写高质量jquery代码 -pg电子游戏网站

13顶
2踩

怎么才能书写高质量jquery代码

2014-09-04 15:03 by 见习记者 huoquan 评论(5) 有10433人浏览

众所周知,jquery现在已经非常流行,百度新pg电子游戏网站首页中也已经开始使用jquery,今天总结下怎么书写更好的jquery代码使jquery代码更好、更快的执行,希望本篇jquery教程一改大家以前不合理的做法。

 

1.正确引用jquery

  1. 尽量在body结束前才引入jquery,而不是在head中。

  2. 借助第三方提供的cdn来引入jquery,同时注意当使用第三方cdn出现问题时,要引入本地的jquery文件。

  3. 如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时dom已经加载完毕了。

        
        
    

     2.优化jquery选择器

高效正确的使用jquery选择器是熟练使用jquery的基础,而掌握jquery选择器需要一定的时间积累,我们开始学习jquery时就应该注意选择器的使用。

 

如果我们选择class为home的a元素时,可以使用下边代码:

$('.home');  //1
$('#nav a.home');  //2
$('#nav').find('a.home');  //3

 

方法1会使jquery在整个dom中查找class为home的a元素,性能可想而知。

  1. 方法2为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。

  2. 方法3使用了find方法,它的速度更快,所以方法三最好。

  3. 关于jquery选择器的性能优先级,id选择器快于元素选择器,元素选择器快于class选择器。因为id选择器和元素选择器是原生的javascript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。

3.缓存jquery对象

缓存jquery对象可以减少不必要的dom查找,关于这点大家可以参考下缓存jquery对象来提高性能。

4.正确使用事件委托

事件委托可以使事件更好的执行,在动态添加的元素上绑定事件也需要委托来实现,在新版本的jquery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。

我是单元格

比如我们要在上边的单元格上绑定一个单击事件,不注意的朋友可能随手写成下边的样子:

$('#t').find('td').on('click', function () {
    $(this).css({ 'color': 'red', 'background': 'yellow' });
});

 这样会为每个td绑上事件,在为100个单元格绑定click事件的测试中,两者性能相差7倍之多,好的做法应该是下边写法:

$('#t').on('click', 'td', function () {
    $(this).css({ 'color': 'red', 'background': 'yellow' });
});

 5.精简jquery代码

如在上述代码中我们对jquery代码进行了适当的合并,类似的还有.attr()方法等,我们没有写成下边的方式:

$('#t').on('click', 'td', function () {
    $(this).css('color', 'red').css('background', 'yellow');
});

 6.减少dom操作

刚开始使用jquery时可能会频繁的操作dom,这是相当耗费性能的。如我们要在body中动态输出一个表格,一些朋友会这样写:

var $t = $('body');
$t.append('');
$t.append('');
$t.append('
1
');

 好的做法:

$('body').append('
1
');

这样在拼接完table串后再添加到body中,对dom的操作只需一次。群里以前有朋友就因为这个导致在ie下输出时出现问题,而关于字符串的拼接可以参考下最快创建字符串的方法。

7.不使用jquery

原生函数总是最快的,这点不难理解,在代码书写中我们不应该忘记原生js。

就先总结这几条吧,每条建议并不难理解,但总结全面的话还是要花费不少时间的。如在减少代码段中,如果需要根据条件从数组中得到新数组时,可以使用$.grep() 方法,如果你在使用jquery时有自己心得的话,欢迎在留言中和大家分享!

13
2
评论 共 5 条 请登录后发表评论
5 楼 2014-09-10 09:47
yandou524 写道
根据css加载原理,jquery选择器的选择应该层数越少越好吧

4 楼 2014-09-09 14:14
cdn 会有很多的优化,比如说基于地理位置的,和fail over.举个例子
比如你的服务器在北京,用户在上海,如果你用cdn,上海的cdn就会响应用户请求,当然会比你北京的服务器发送好的多.当然,如果cdn有问题 你可以退回到本地js.
night舞夜 写道
"借助第三方提供的cdn来引入jquery,同时注意当使用第三方cdn出现问题时,要引入本地的jquery文件。"

我想问一下,既然还是要判断引入本地的js。为何还引入第三方js。直接引入本地不就好了么?

3 楼 2014-09-09 11:58
"借助第三方提供的cdn来引入jquery,同时注意当使用第三方cdn出现问题时,要引入本地的jquery文件。"

我想问一下,既然还是要判断引入本地的js。为何还引入第三方js。直接引入本地不就好了么?
2 楼 2014-09-09 10:53
.find() 和 .children() 方法类似,不过后者只沿着 dom 树向下遍历单一层级
1 楼 2014-09-04 19:04
根据css加载原理,jquery选择器的选择应该层数越少越好吧

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 如何书写高质量的jquery代码想必大家对于jquery这个最流行的javascript类库都不陌生,而且只要是前端开发人员肯定或多或少的使用或者接触过,在今天的这篇文章中,我们将介绍一些书写高质量jquery代码的原则,我们不...

  • 众所周知,jquery现在已经非常流行,百度新pg电子游戏网站首页中也已经开始使用jquery,今天总结下怎么书写更好的jquery代码使jquery代码更好、更快的执行,希望本篇jquery教程一改大家以前不合理的做法

  • 1、正确引用jquery 尽量在body结束前才引入jquery,而不是在head中。...如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时dom已经加载完毕了。 src="//lib.sinaapp.com/js/jque

  • 如何才能书写出高质量的jquery代码,困扰这不少人,不知何从下手。今天合肥达内php培训为大家总结的6条经验,拿走不谢!一、正确引用jquery尽量在body结束前才引入jquery,而不是在head中。借助第三方提供的cdn来...

  • 众所周知,jquery现在已经非常流行,百度新pg电子游戏网站首页中也已经开始使用jquery,今天总结下怎么书写更好的jquery代码使jquery代码更好、更快的执行,希望本篇jquery教程一改大家以前不合理的做法。   1.正确引用jquery ...

  • 众所周知,jquery现在已经非常流行,百度新pg电子游戏网站首页中也已经开始使用jquery,今天总结下怎么书写更好的jquery代码使jquery代码更好、更快的执行,希望本篇jquery教程一改大家以前不合理的做法。 ...

  • 1、正确引用jquery (1)、 尽量在body结束前才引入jquery,而不是在head中。 (2)、 借助第三方提供的cdn来...前引入script文件的话,就不用写document.ready了,因为这时执行js代码时dom已经加载 完毕了。 ...

  • 在jquery代码开发中,我们常常需要操作dom,dom操作是非常消耗资源的一个过程,而往往很多人都喜欢这样使用jquery: $ ( '#loading' ). html ( '完毕' ); $ ( '#loading' ). ...

  • vb语言vb光盘管理系统设计(源代码 系统)本资源系百度网盘分享地址

  • h型脚架疲劳测试机sw16可编辑_零件图_机械工程图_机械三维3d建模图打包下载.zip

  • 笔记.zip

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • 金属材料杂质自动检测设备sw17可编辑_零件图_机械工程图_机械三维3d建模图打包下载.zip

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。python社区提供了大量的第三方库,如numpy、pandas和requests,极大地丰富了python的应用领域,从数据科学到web开发。python库的丰富性是python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,matplotlib和seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。

  • stm32单片机fpga毕设电路原理论文报告基于mcs51单片机的微波脉冲功率测试系统本资源系百度网盘分享地址

  • vb语言vb报警管理系统设计(源代码 系统)本资源系百度网盘分享地址

global site tag (gtag.js) - google analytics
网站地图