如何編寫更好的jQuery代碼？

1、緩存變量DOM的遍歷是非常昂貴的，所以盡量緩存一些可能會被重新用到的變量。/ badh = $('#element').height();$('#element').css('height',h-20); / good$element = $('#element');h = $element.height();$element.css('height',h-20); 避免全局變量使用jQuery和使用javascript一樣，最好確保你的變量在你的函數(shù)作用域內(nèi)。/ 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已經(jīng)將click()改變?yōu)楹瘮?shù)on('click')的簡寫。在之前的版本中實(shí)現(xiàn)的不同,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一般來說，我們要盡可能的合并函數(shù)/ 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'    ););使用鏈?zhǔn)讲僮鞲鶕?jù)上面的規(guī)則，jQuery很容易將方法鏈接在一起，我們要利用這一優(yōu)點(diǎn)。/ 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);保持代碼的可讀性當(dāng)精簡了javascript代碼和使用了鏈?zhǔn)讲僮鳎愕拇a有時候會變得不可讀，盡量使用縮進(jìn)和換行使代碼變得漂亮些。/ 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);使用短路求值短路求值是一個從左到右求值的表達(dá)式，用 &&（邏輯與）

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

13、式之一就是利用一些編碼捷徑。/ badif(collection.length > 0). / betterif(collection.length).復(fù)雜的操作要分離元素如果對DOM元素做大量操作（連續(xù)設(shè)置多個屬性或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中的方法缺少經(jīng)驗(yàn)，一定要查看的文檔，可能會有一個更好或更快的方法來使用它。/ 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');避免通用選擇符當(dāng)和其他的選擇符一起使用時，通用選擇符非常的慢。/ bad$('.container > *');  / better$('.container').children();避免使用隱式通用選擇符當(dāng)你漏下了選擇符，通用選擇符(*)仍然起作用/ bad$('.somecla

18、ss :radio');  / better$('.someclass input:radio');優(yōu)化選擇符例如，Id選擇符應(yīng)該是唯一的，所以沒有必要添加額外的選擇符。/ bad$('div#myid'); $('div#footer a.myLink'); / better$('#myid');$('#footer .myLink');避免多個ID選擇符再次強(qiáng)調(diào)ID 選擇符應(yīng)該是唯一的，不需要添加額外的選擇符，更不需要多個后代ID選擇符。/ bad$('#outer #inner'); &#