书写高质量jQuery代码的6条经验

一、正确引用jQuery

  1. 尽量在body结束前才引入jQuery,而不是在head中。
  2. 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。
  3. 如果在前引入script文件的话,就不用写document.ready了,因为这时执行js代码时DOM已经加载完毕了。

二、优化jQuery选择器

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

<div id="nav" class="nav"> 
<a class="home" href="http://eaoyou.com">网站</a> 
<a class="articles" href="http://eaoyou.com">网站</a> 
</div>

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

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

方法1:会使jQuery在整个DOM中查找class为home的a元素,性能可想而知。 方法2:为要查找的元素添加了上下文,在这里变为查找id为nav的子元素,查找性能得到了很大提升。 方法3:使用了find方法,它的速度更快,所以方法三最好。 关于jQuery选择器的性能优先级,ID选择器快于元素选择器,元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。

2.1、一些规则

  • CSS解析引擎将自右向左计算每一条规则,它从关键选择器开始,自右向左计算每一个选择器,直到发现一个匹配的选择器,如果没有找到匹配的选择器则放弃查找。
  • 使用较低层的规则通常更有效率。
  • 尽可能的具体化的选择器——ID要比tag更好。
  • 避免不必要的冗余。

通常请情况下,请保持选择器简单明了(比如充分使用ID选择器),尽可能的使用关键选择器更具体,无论对JavaScript还是CSS,这都可以加块网站的速度。到目前为止,无论使用哪一种浏览器,使用ID选择器和当个类选择器都是选中元素最快的方式。

2.2、避免多个ID选择符

Id选择符应该是唯一的,所以没有必要添加额外的选择符。

// 糟糕$('div#myid');$('div#footer a.myLink');// 建议$('#myid');$('#footer .myLink');

在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。

// 糟糕$('#outer #inner');// 建议$('#inner');

2.3、避免隐式通用选择符

通用选择符有时是隐式的,不容易发现。

// 糟糕$('.someclass :radio');// 建议$('.someclass input:radio');

2.4、避免通用选择符

将通用选择符放到后代选择符中,性能非常糟糕。

// 糟糕$('.container > *');// 建议$('.container').children();

2.5、选择捷径

精简代码的其中一种方式是利用编码捷径。

// 糟糕if(collection.length > 0){..}// 建议if(collection.length){..}

2.6、为选择器指定上下文

默认情况下,当把一个选择器传递给jQuery时,它将遍历整个DOM,jQuery方法还具有一个未充分利用的参数,既可以将一个上下文参数传入jQuery,以限制它只搜索DOM中特定的一部分。

//糟糕,会遍历整个DOM$(".class");//建议,只搜索#id元素$(".class","#id");

jQuery选择器的性能比较:

$(".class","#id") > $("#id .class") > $(".class")

3、缓存jQuery对象

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

// 糟糕h = $('#element').height();$('#element').css('height',h-20);
// 建议$element = $('#element');h = $element.height();$element.css('height',h-20);

3.1、使用子查询缓存的父元素

正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。

// 糟糕var    $container = $('#container'),    $containerLi = $('#container li'),    $containerLiSpan = $('#container li span');
// 建议 (高效)var    $container = $('#container '),    $containerLi = $container.find('li'),    $containerLiSpan= $containerLi.find('span');

4、变量

4.1、避免全局变量

jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。

// 糟糕$element = $('#element');h = $element.height();$element.css('height',h-20);
// 建议var $element = $('#element');var h = $element.height();$element.css('height',h-20);

4.2、使用匈牙利命名法

在变量前加$前缀,便于识别出jQuery对象。

// 糟糕var first = $('#first');var second = $('#second');var value = $first.val();
// 建议 - 在jQuery对象前加$前缀var $first = $('#first');var $second = $('#second'),var value = $first.val();

4.3、使用 Var 链(单 Var 模式)

将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。

var $first = $('#first'),      
$second = $('#second'),      
value = $first.val(),      
k = 3,      
cookiestring = 'SOMECOOKIESPLEASE',      
i,      
j,      
myArray = {};

5、正确使用事件委托

在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法

<table id="t"><tr> <td>我是单元格</td> </tr>  </table>

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

$('#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' });});

6、精简jQuery代码

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

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

6.1、合并函数

一般来说,最好尽可能合并函数。

// 糟糕$first.click(function(){    $first.css('border','1px solid red');    $first.css('color','blue');});
// 建议$first.on('click',function(){    $first.css({        'border':'1px solid red',        'color':'blue'    });});

6.2、链式操作

jQuery实现方法的链式操作是非常容易的。下面利用这一点。

// 糟糕$second.html(value);$second.on('click',function(){    alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);// 建议$second.html(value);$second.on('click',function(){    alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);

原文发布于微信公众号 - php(phpdaily)

原文发表时间:2017-08-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

PHP中性能优化之生成器

问题背景 PHP生成器是PHP的5.5.0版本引入的功能,生成器实际上就是简单的迭代器。生成器会根据需求计算产出迭代的值,而标准的PHP迭代器经常在内存中执行迭...

1909
来自专栏Golang语言社区

gorilla/mux类库解析

golang自带的http.SeverMux路由实现简单,本质是一个map[string]Handler,是请求路径与该路径对应的处理函数的映射关系。实现简单功...

3808
来自专栏日常分享

JSP/Servlet Web 学习笔记 DayTwo

   定义JSP文件中的全局属性、一个JSP页面可以包含多个page指令、除了Import以外,其他page指令定义的属性/值只能出现一次。

822
来自专栏海天一树

小朋友学Python(12):运算符

一、基本运算符 Python运算符多数与C/C++/Java类似,但有两个不一样。“//”表示求商,“**”表示求幂 例1 a = 10 b = 3 x = a...

2515
来自专栏从流域到海域

Python函数参数总结(位置参数、默认参数、可变参数、关键字参数和命名关键字参数)

Python函数的参数多达5种,不像Java那样参数只有一种,而是像C++那样提供默认参数,除此之外,还提供可变参数、关键字参数、命名关键字参数,这样就使...

23710
来自专栏C/C++基础

CC++变参函数

C语言中,有时需要变参函数来完成特殊的功能,比如C标准库函数printf()和scanf()。C中提供了省略符“…”能够帮主programmer完成变参函数的书...

491
来自专栏java一日一条

Java的内存机制

Java 把内存划分成两种:一种是栈内存,另一种是堆内存。在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时...

250
来自专栏C/C++基础

C++中的作用域与生命周期

Pascal之父Nicklaus Wirth曾经提出一个公式,展示出了程序的本质:程序=算法+数据结构。后人又给出一个公式与之遥相呼应:软件=程序+文档。这两个...

472
来自专栏H2Cloud

C++使用ffpython嵌入和扩展python

摘要: 在服务器编程中,经常会用到python脚本技术。Python是最流行的脚本之一,并且python拥有定义良好的C API接口,同时又有丰富的文档,与C+...

3204
来自专栏每日一篇技术文章

weex-07-通用布局

weex 常用的两种布局 分别为 flex弹性布局 和 绝对定位布局 一般情况下都是这两种配合使用!

571

扫描关注云+社区