如何编写更好的jQuery代码

缓存变量DOM的遍历是非常昂贵的，所以尽量缓存一些可能会被重新用到的变量。//badh=$('#element').height();$('#element').css('height',h-20);//good$element=$('#element');h=$element.height();$element.css('height',h-20);避免全局变量使用jQuery和使用javascript一样，最好确保你的变量在你的函数作用域内。//bad$element=$('#element');h=$element.height();$element.css('height',h-20);//goodvar$element=$('#element');varh=$element.height();$element.css('height',h-20);使用匈牙利命名法在变量前加上一个$符号，很容易看出来这是一个jQuery变量。//badvarfirst=$('#first');varsecond=$('#second');varvalue=$first.val();//better-weusetoput$symbolbeforejQuery-manipulatedobjectsvar$first=$('#first');var$second=$('#second'),varvalue=$first.val();使用Var链（单Var模式）不要使用多个var声明，可以将它们合并为一个var声明，建议将没有指定值的变量放在最后。var$first=$('#first'),$second=$('#second'),value=$first.val(),k=3,cookiestring='SOMECOOKIESPLEASE',i,j,myArray={};最好使用on绑定事件最新版本的jQuery已经将click()改变为函数on('click')的简写。在之前的版本中实现的不同,click()简写bind()。在jQuery1.7中,on()是首选方法用于附加事件处理程序。然而,对于一致性可以简单地使用on()。//bad$first.click(function(){$first.css('border','1pxsolidred');$first.css('color','blue');});$first.hover(function(){$first.css('border','1pxsolidred');})//better$first.on('click',function(){$first.css('border','1pxsolidred');$first.css('color','blue');})$first.on('hover',function(){$first.css('border','1pxsolidred');})压缩精简javascript一般来说，我们要尽可能的合并函数//bad$first.click(function(){$first.css('border','1pxsolidred');$first.css('color','blue');});//better$first.on('click',function(){$first.css({'border':'1pxsolidred','color':'blue'});});使用链式操作根据上面的规则，jQuery很容易将方法链接在一起，我们要利用这一优点。//bad$second.html(value);$second.on('click',function(){alert('helloeverybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);//better$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);保持代码的可读性当精简了javascript代码和使用了链式操作，你的代码有时候会变得不可读，尽量使用缩进和换行使代码变得漂亮些。//bad$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);//better$second.html(value);$second.on('click',function(){alert('helloeverybody');}).fadeIn('slow').animate({height:'120px'},500);使用短路求值短路求值是一个从左到右求值的表达式，用&&（逻辑与）或||（逻辑或）操作符。//badfunctioninitVar($myVar){if(!$myVar){$myVar=$('#selector');}}//betterfunctioninitVar($myVar){$myVar=$myVar||$('#selector');}使用快捷的方式精简代码的方式之一就是利用一些编码捷径。//badif(collection.length0){..}//betterif(collection.length){..}复杂的操作要分离元素如果对DOM元素做大量操作（连续设置多个属性或css样式），建议首先分离元素然后在添加。//badvar$container=$(#container),$containerLi=$(#containerli),$element=null;$element=$containerLi.first();//...alotofcomplicatedthings//bettervar$container=$(#container),$containerLi=$container.find(li),$element=null;$element=$containerLi.first().detach();//...alotofcomplicatedthings$container.append($element);了解技巧你可能对使用jQuery中的方法缺少经验，一定要查看的文档，可能会有一个更好或更快的方法来使用它。//bad$('#id').data(key,value);//better(faster)$.data('#id',key,value);使用子查询缓存的父元素像之前提到的一样，DOM的遍历的代价很大，典型做法是缓存父元素并在选择子元素时重用这些缓存元素。//badvar$container=$('#container'),$containerLi=$('#containerli'),$containerLiSpan=$('#containerlispan');//better(faster)var$container=$('#container'),$containerLi=$container.find('li'),$containerLiSpan=$containerLi.find('span');避免通用选择符当和其他的选择符一起使用时，通用选择符非常的慢。//bad$('.container*');//better$('.container').children();避免使用隐式通用选择符当你漏下了选择符，通用选择符(*)仍然起作用//bad$('.someclass:radio');//better$('.someclassinput:radio');优化选择符例如，Id选择符应该是唯一的，所以没有必要添加额外的选择符。//bad$('div#myid');$('div#footera.myLink');//better$('#myid');$('#footer.myLink');避免多个ID选择符再次强调ID选择符应该是唯一的，不需要添加额外的选择符，更不需要多个后代ID选择符。//bad$('#outer#inner');//better$('#inner');尽量使用最新版本新版本通常更好：更轻量级，更高效。显然，你需要考虑你要支持的代码的兼容性。例如，2.0版本不支持ie6/7/8。不要使用被弃用的方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。//bad-liveisdeprecated$('#stuff').live('click',function(){console.log('hooray');});//better$('#stuff').on('click',function(){console.log('hooray');});利用CDN加载加载jQuery谷歌的CND能保证选择离用户最近的缓存并迅速响应,地址是：必要时组合jQuery和javascript原生代码上所述，jQuery就是javascript，这意味着用jQuery能做的事情，同样可以用原生代码来做。原生代码的可读性和可维护性可能不如jQuery，而且代码更长。但也意味着更高效（通常更接近底层代码可读性越差，性能越高，例如：汇编，当然需要更强大的人才可以）。记住没有任何框架能比原生代码更小，更轻，更高效。