編寫更好的jQuery代碼

 這是一篇關於jQuery的文章，寫到這裡現在已經有很多文章討論jQuery和JavaScript的效能問題，然而，在這篇文章中我計劃總結一些提升速度的技巧和一些我自己的建議來改善你的jQuery和JavaScript代碼。更好的代碼意味著更快的應用程式，快速渲染和反應性意味著一個更好的使用者體驗。 首先，我們要記住最重要的一點是：jQuery也是javascript，也就是意味著我們要對jQuery和javascript使用相同的編碼規則和風格指南，還有最佳實務。 另外，如果你是一個javascript的初學者，那麼我建議你在開始jQuery之前看一下JavaScript best practices for beginners 和 writing high quality JavaScript這兩篇文章。 如果你已經開始使用jQuery了，那麼我強烈建議遵守下面的建議： 緩衝變數 DOM的遍曆是非常昂貴的，所以盡量緩衝一些可能會被重新用到的變數。 // bad h = $('#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); // good var $element = $('#element');var h = $element.height();$element.css('height',h-20);使用匈牙利命名法 在變數前加上一個$符號，很容易看出來這是一個jQuery變數。 // bad var first = $('#first');var second = $('#second');var value = $first.val(); // better - we use to put $ symbol before jQuery-manipulated objects var $first = $('#first');var $second = $('#second'),var value = $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()。在jQuery 1.7中,on()是首選方法用於附加事件處理常式。然而,對於一致性可以簡單地使用on()。 // bad $first.click(function(){$first.css('border','1px solid red');$first.css('color','blue');}); $first.hover(function(){$first.css('border','1px solid red');}) // better$first.on('click',function(){$first.css('border','1px solid red');$first.css('color','blue');}) $first.on('hover',function(){$first.css('border','1px solid red');})壓縮精簡javascript 一般來說，我們要儘可能的合并函數 // bad $first.click(function(){$first.css('border','1px solid red');$first.css('color','blue');}); // better $first.on('click',function(){$first.css({'border':'1px solid red','color':'blue'});});使用鏈式操作 根據上面的規則，jQuery很容易將方法連結在一起，我們要利用這一優點。 // bad $second.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 everybody');}).fadeIn('slow').animate({height:'120px'},500);保持代碼的可讀性 當精簡了javascript代碼和使用了鏈式操作，你的代碼有時候會變得不可讀，盡量使用縮排和換行使代碼變得漂亮些。 // bad $second.html(value);$second.on('click',function(){alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500); // better $second.html(value);$second.on('click',function(){ alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);使用短路求值 短路求值是一個從左至右求值的運算式，用 &&（邏輯與）或 || （邏輯或）操作符。 // bad function initVar($myVar) {if(!$myVar) {$myVar = $('#selector');}} // better function initVar($myVar) {$myVar = $myVar || $('#selector');}使用快捷的方式 精簡代碼的方式之一就是利用一些編碼捷徑。 // bad if(collection.length > 0){..} // better if(collection.length){..}複雜的操作要分離元素 如果對DOM元素做大量操作（連續設定多個屬性或css樣式），建議首先分離元素然後在添加。 // bad var $container = $("#container"),$containerLi = $("#container li"),$element = null; $element = $containerLi.first(); //... a lot of complicated things // better var $container = $("#container"),$containerLi = $container.find("li"),$element = null; $element = $containerLi.first().detach(); //...a lot of complicated things $container.append($element);瞭解技巧 你可能對使用jQuery中的方法缺少經驗，一定要查看的文檔，可能會有一個更好或更快的方法來使用它。 // bad $('#id').data(key,value); // better (faster) $.data('#id',key,value);使用子查詢緩衝的父元素 像之前提到的一樣，DOM的遍曆的代價很大，典型做法是緩衝父元素並在選擇子項目時重用這些緩衝元素。 // bad var $container = $('#container'),$containerLi = $('#container li'),$containerLiSpan = $('#container li span'); // better (faster) var $container = $('#container '),$containerLi = $container.find('li'),$containerLiSpan= $containerLi.find('span');避免通用選擇符 當和其他的選擇符一起使用時，通用選擇符非常的慢。 // bad $('.container > *');  // better $('.container').children();避免使用通用選擇符 當你漏下了選擇符，通用選擇符(*)仍然起作用 // bad $('.someclass :radio');  // better $('.someclass input:radio');最佳化選擇符 例如，Id選擇符應該是唯一的，所以沒有必要添加額外的選擇符。 // bad $('div#myid'); $('div#footer a.myLink'); // better$('#myid');$('#footer .myLink');避免多個ID選擇符 再次強調ID 選擇符應該是唯一的，不需要添加額外的選擇符，更不需要多個後代ID選擇符。 // bad $('#outer #inner');  // better $('#inner');盡量使用最新版本 新版本通常更好：更輕量級，更高效。顯然，你需要考慮你要支援的代碼的相容性。例如，2.0版本不支援ie 6/7/8。 不要使用被棄用的方法 關注每個新版本的廢棄方法是非常重要的並盡量避免使用這些方法。   / bad - live is deprecated $('#stuff').live('click', function() {  console.log('hooray');}); // better$('#stuff').on('click', function() {  console.log('hooray');});　利用CDN載入載入jQuery Google的CND能保證選擇離使用者最近的緩衝並迅速響應,地址是http://code.jQuery.com/jQuery-latest.min.js 必要時組合jQuery和javascript原生代碼 上所述，jQuery就是javascript，這意味著用jQuery能做的事情，同樣可以用原生代碼來做。原生代碼的可讀性和可維護性可能不如jQuery，而且代碼更長。但也意味著更高效（通常更接近底層代碼可讀性越差，效能越高，例如：彙編，當然需要更強大的人才可以）。記住沒有任何架構能比原生代碼更小，更輕，更高效。 最後忠告 最後，寫這篇文章的目的是提高jQuery的效能和給出一些好的建議。如果你想深入的研究對這個話題你會發現很多樂趣。記住，jQuery並非不可或缺，僅是一種選擇。思考為什麼要使用它。DOM操作？ajax？模版？css動畫？還是選擇符引擎？有時候，javascript微型架構或jQuery的需求定製版同樣是值得考慮的。給初學者一些建議