如何编写更好的jQuery代码？

1、缓存变量DOM的遍历是非常昂贵的，所以尽量缓存一些可能会被重新用到的变量。/ badh = $('#element').height();$('#element').css('height',h-20); / good$element = $('#element');h = $element.height();$element.css('height',h-20); 避免全局变量使用jQuery和使用javascript一样，最好确保你的变量在你的函数作用域内。/ bad$element = $

2、('#element');h = $element.height();$element.css('height',h-20); / goodvar $element = $('#element');var h = $element.height();$element.css('height',h-20); 使用匈牙利命名法在变量前加上一个$符号，很容易看出来这是一个jQuery变量。/ badvar first = $('#first');var second = $('#second&

3、#39;);var value = $first.val(); / better - we use to put $ symbol before jQuery-manipulated objectsvar $first = $('#first');var $second = $('#second'),var value = $first.val(); 使用 Var 链（单 Var 模式） 不要使用多个var声明，可以将它们合并为一个var声明，建议将没有指定值的变量放在最后。var  $first = $(

4、9;#first'),  $second = $('#second'),  value = $first.val(),  k = 3,  cookiestring = 'SOMECOOKIESPLEASE',  i,  j,  myArray = ; 最好使用on 绑定事件最新版本的jQuery已经将click()改变为函数on('click')的简写。在之前的版本中实现的不同,click(

5、)简写bind()。在jQuery 1.7中,on()是首选方法用于附加事件处理程序。然而,对于一致性可以简单地使用on()。/ bad$first.click(function()    $first.css('border','1px solid red');    $first.css('color','blue');); $first.hover(function()    $first.css

6、('border','1px solid red');) / better$first.on('click',function()    $first.css('border','1px solid red');    $first.css('color','blue');) $first.on('hover',function()   &

7、#160;$first.css('border','1px solid red');) 压缩精简javascript一般来说，我们要尽可能的合并函数/ bad$first.click(function()    $first.css('border','1px solid red');    $first.css('color','blue');); / better$first.on('cl

8、ick',function()    $first.css(        'border':'1px solid red',        'color':'blue'    ););使用链式操作根据上面的规则，jQuery很容易将方法链接在一起，我们要利用这一优点。/ bad$sec

9、ond.html(value);$second.on('click',function()    alert('hello everybody'););$second.fadeIn('slow');$second.animate(height:'120px',500); / better$second.html(value);$second.on('click',function()    alert('hello e

10、verybody');).fadeIn('slow').animate(height:'120px',500);保持代码的可读性当精简了javascript代码和使用了链式操作，你的代码有时候会变得不可读，尽量使用缩进和换行使代码变得漂亮些。/ bad$second.html(value);$second.on('click',function()    alert('hello everybody');).fadeIn('slow').animate(height:

11、'120px',500); / better$second.html(value);$second    .on('click',function() alert('hello everybody');)    .fadeIn('slow')    .animate(height:'120px',500);使用短路求值短路求值是一个从左到右求值的表达式，用 &&（逻辑与）

12、或 | （逻辑或）操作符。/ badfunction initVar($myVar)     if(!$myVar)         $myVar = $('#selector');     / betterfunction initVar($myVar)     $myVar = $myVar | $('#selector');使用快捷的方式精简代码的方

13、式之一就是利用一些编码捷径。/ badif(collection.length > 0). / betterif(collection.length).复杂的操作要分离元素如果对DOM元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。/ badvar    $container = $("#container"),    $containerLi = $("#container li"),    

14、;$element = null; $element = $containerLi.first(); /. a lot of complicated things / bettervar    $container = $("#container"),    $containerLi = $container.find("li"),    $element = null; $element = $conta

15、inerLi.first().detach(); /.a lot of complicated things$container.append($element);了解技巧你可能对使用jQuery中的方法缺少经验，一定要查看的文档，可能会有一个更好或更快的方法来使用它。/ bad$('#id').data(key,value); / better (faster)$.data('#id',key,value);使用子查询缓存的父元素像之前提到的一样，DOM的遍历的代价很大，典型做法是缓存父元素并在选择子元素时重用这些缓存元素。/ badvar 

16、;   $container = $('#container'),    $containerLi = $('#container li'),    $containerLiSpan = $('#container li span'); / better (faster)var    $container = $('#container '),  

17、60; $containerLi = $container.find('li'),    $containerLiSpan= $containerLi.find('span');避免通用选择符当和其他的选择符一起使用时，通用选择符非常的慢。/ bad$('.container > *');  / better$('.container').children();避免使用隐式通用选择符当你漏下了选择符，通用选择符(*)仍然起作用/ bad$('.somecla

18、ss :radio');  / better$('.someclass input:radio');优化选择符例如，Id选择符应该是唯一的，所以没有必要添加额外的选择符。/ bad$('div#myid'); $('div#footer a.myLink'); / better$('#myid');$('#footer .myLink');避免多个ID选择符再次强调ID 选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。/ bad$('#outer #inner'); &#