对于前端来说，jQuery应该很熟悉吧，但是我们如何写出高质量的jQuery代码呢？看看这5个建议吧。让我们重新审视自己的代码，重新学习jQuery http://www.maiziedu.com/course/789/。
1、正确引用jQuery
· 尽量在body结束前才引入jQuery，而不是在head中。
· 借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。
· 如果在前引入script文件的话，就不用写document.ready了，因为这时执行js代码时DOM已经加载完毕了。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---示例代码----*/ function echo (){ var a="this is a example"; alert("hello world "+a); } /* ---示例代码----*/ |
2、优化jQuery选择器
高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。
|
1 2 3 4 |
<div id="nav" class="nav"> <a class="home" href="">jQuery学习网</a> <a class="articles" href="">jQuery教程</a> </div> |
如果我们选择class为home的a元素时，可以使用下边代码：
|
1 2 3 |
$(’.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选择符应该是唯一的，所以没有必要添加额外的选择符。
|
1 2 3 4 5 6 |
// 糟糕 $(’div#myid’); $(’div#footer a.myLink’); // 建议 $(’#myid’); $(’#footer .myLink’); |
在此强调，ID 选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。
|
1 2 3 4 |
// 糟糕 $(’#outer #inner’); // 建议 $(’#inner’); |
2.3、避免隐式通用选择符
通用选择符有时是隐式的，不容易发现。
|
1 2 3 4 |
// 糟糕 $(’.someclass :radio’); // 建议 $(’.someclass input:radio’); |
2.4、避免通用选择符
将通用选择符放到后代选择符中，性能非常糟糕。
|
1 2 3 4 |
// 糟糕 $(’.container > *’); // 建议 $(’.container’).children(); |
2.5、选择捷径
精简代码的其中一种方式是利用编码捷径。
|
1 2 3 4 |
// 糟糕 if(collection.length > 0){..} // 建议 if(collection.length){..} |
2.6、为选择器指定上下文
默认情况下，当把一个选择器传递给jQuery时，它将遍历整个DOM，jQuery方法还具有一个未充分利用的参数，既可以将一个上下文参数传入jQuery，以限制它只搜索DOM中特定的一部分。
|
1 2 3 4 |
//糟糕，会遍历整个DOM $(".class"); //建议，只搜索#id元素 $(".class","#id"); |
jQuery选择器的性能比较：
|
1 |
$(".class","#id") > $("#id .class") > $(".class") |
3、缓存jQuery对象
缓存jQuery对象可以减少不必要的DOM查找，关于这点大家可以参考下缓存jQuery对象来提高性能。
|
1 2 3 4 5 6 7 |
// 糟糕 h = $(’#element’).height(); $(’#element’).css(’height’,h-20); // 建议 $element = $(’#element’); h = $element.height(); $element.css(’height’,h-20); |
3.1、使用子查询缓存的父元素
正如前面所提到的，DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。
|
1 2 3 4 5 6 7 8 9 10 |
// 糟糕 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一样，一般来说,最好确保你的变量在函数作用域内。
|
1 2 3 4 5 6 7 8 |
// 糟糕 $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对象。
|
1 2 3 4 5 6 7 8 |
// 糟糕 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语句合并为一条语句，我建议将未赋值的变量放到后面
|
1 2 3 4 5 6 7 8 |
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()方法。
|
1 2 3 4 5 |
<table id="t"> <tr> <td>我是单元格</td> </tr> </table> |
比如我们要在上边的单元格上绑定一个单击事件，不注意的朋友可能随手写成下边的样子：
|
1 2 3 |
$(’#t’).find(’td’).on(’click’, function () { $(this).css({ ’color’: ’red’, ’background’: ’yellow’ }); }); |
这样会为每个td绑上事件，在为100个单元格绑定click事件的测试中，两者性能相差7倍之多，好的做法应该是下边写法：
|
1 2 3 |
$(’#t’).on(’click’, ’td’, function () { $(this).css({ ’color’: ’red’, ’background’: ’yellow’ }); }); |
原文来自：mybry.com