編寫更好的jQuery代碼

討論jQuery和Javascript性能的文章有不少。不過在這裏我仍是要總結一下jQuery的提速策略，還有我本身的一些建議，但願這些建議能幫助你寫出更好的jQuery和JavaScript代碼。更好的代碼意味着更快的應用和無垃圾的網站。更快的渲染和響應意味着更好的用戶體驗。

首先，別忘了jQuery 是 JavaScript。這意味着咱們應該使用相同的代碼約定，風格指南和最佳實踐。

若是你是JavaScript新手，我建議你在嘗試jQuery以前先閱讀給新手的JavaScript最佳實踐，還有這篇編寫優質JavaScript代碼。

當你準備使用jQuery的時候，我強烈建議你遵照下面的指導。

變量緩存

遍歷DOM是很昂貴的，因此須要重用的元素要緩存起來。

// 很差

h = $('#element').height();
$('#element').css('height',h-20);

// 好

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

避免全局變量

和通常的JavaScript同樣，jQuery下也最好把你的變量的做用域限制在函數以內。

// 很差

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 好

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

使用匈牙利標記

在包含jQuery對象的變量前加上美圓符號，易於識別。

// 很差

var first = $('#first');
var second = $('#second');
var value = $first.val();

// 好一點 -  咱們在jQuery對象前加上了 $ 符號

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

單一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()。

// 很差

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

// 好一些
$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

通常傾向於儘量地組合函數：

// 很差

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

// 好一些

$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

使用連鎖

jQuery下連鎖使用函數很容易，要好好利用這一特性讓代碼更精煉。

// 很差

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

// 好一些

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

保持可讀性

過於追求簡短，濫用連鎖，代碼會所以變得不可讀。嘗試使用縮進和換行來保持可讀性。

// 很差

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 更好

$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

善用短路

使用&&和||運算符。

// 很差

function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

// 更好

function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

優先使用簡寫形式

這也是精煉代碼的好方法

// 很差

if(collection.length > 0){..}

// 更好

if(collection.length){..}

大量操做時分離元素

若是要對DOM元素進行大量操做，建議先分離出來，過後從新添加。

// 很差

var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first(); 
//... a lot of complicated things

// 更好

var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach(); 
//...a lot of complicated things

$container.append($element);

學習竅門

當你使用不熟悉的jQuery方法時，必定要看看文檔，可能有更好更快的方法。

// 很差

$('#id').data(key,value);

// 更好 （更快）

$.data('#id',key,value);

緩存父元素

前面已經提到了，遍歷DOM是很是昂貴的。通常而言，最好將父元素緩存起來，這樣選定子元素的時候能夠重複使用。

// 很差

var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

// 更好 (更快)

var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

避免使用通用選擇符

當與其餘selector組合使用時，universal selector極度緩慢。

// 很差

$('.container > *'); 

// 好一些

$('.container').children();

避免隱式通用選擇符

隱式通用選擇符一樣要避免。

// 很差

$('.someclass :radio'); 

// 更好

$('.someclass input:radio');

優化選擇符

例如，使用ID就已經足夠，沒必要再多此一舉。

// 很差

$('div#myid'); 
$('div#footer a.myLink');

// 更好
$('#myid');
$('#footer .myLink');

不要descend多個ID

ID已經足夠選定元素了，因此沒有必要使用後代選擇符。

// 很差

$('#outer #inner'); 

// 更好

$('#inner');

儘可能使用最新版

最新一般意味着最好：有時更輕量，有時更快速。顯然，你須要考慮代碼兼容性。例如，別忘了2.0起jQuery不支持IE 6/7/8了。

不要使用廢棄的方法

重要的是老是關注每次升級時廢棄的方法，儘可能避免使用它們。

// 很差 - live已廢棄

$('#stuff').live('click', function() {
  console.log('hooray');
});

// 更好
$('#stuff').on('click', function() {
  console.log('hooray');
});

從CDN加載jQuery代碼

Google CDN從離用戶最近的緩存提供代碼。只需使用此url便可享受Google CDN的好處：http://code.jquery.com/jQuery-latest.min.js

有必要的時候混合原生JavaSCript代碼

正如我前面說的，jQuery是JavaScript，這就意味着咱們能夠在jQuery下作原生JavaScript下能夠作的事。編寫原生（原味）JavaScript代碼有時意味着可讀性和可維護性的降低，文件變長，可是這也意味着更快的代碼。牢記沒有一個框架能夠比原生JavaScript操做更小、更輕、更快。（點擊圖片可運行測試。）

http://blog.mathewdesign.com/wp-content/uploads/2013/10/jq.png
http://jsperf.com/jQuery-vs-JavaScript-performance-comparison

因爲原生JavaScript和jQuery的性能差別，我強烈建議明智地混合二者，狀況容許的時候使用jQuery函數的原生替代品。

最後的考慮

最後，我推薦提升jQuery性能一文，它包括了其餘一些良好實踐。若是你打算深刻的話，你會以爲它們頗有意思。

牢記使用jQuery不是必需的，它只是一個選擇。想一想爲何你使用它。操做DOM？Ajax？模板？CSS動畫？選擇符引擎？有時候，也許值得考慮使用一個JavaScript微框架，或者使用適合你需求的jQuery定製構建。

---

原文 Writing Better jQuery Code
翻譯 SegmentFault