如何書寫高質量的jQuery程式碼

　　想必大家對於jQuery這個最流行的javascript類庫都不陌生，而且只要是前端開發人員肯定或多或少的使用或者接觸過，在今天的這篇文章中，我們將介紹一些書寫高質量jQuery程式碼的原則，我們不單單會告訴你如何去書寫，也會告訴你為什麼這樣書寫，希望大家會覺得有所幫助。

　　注意定義jQuery變數的時候新增var關鍵字

　　這個不僅僅是jQuery，所有javascript開發過程中，都需要注意，請一定不要定義成如下：

$loading = $('#loading'); //這個是全域性定義，不知道哪裡位置倒黴引用了相同的變數名，就會鬱悶至死的

　　如果你定義成這樣的話，運氣好，可能沒有任何問題，或者出現一個絕對會讓你debug一週，然後罵娘一個月的問題。

　　請使用一個var來定義變數

　　如果你使用多個變數的話，請如下方式定義：

var page = 0,
  $loading = $('#loading'),
  $body = $('body');

　　不要給每一個變數都新增一個var關鍵字，除非你有嚴重的強迫症

　　定義jQuery變數

　　申明或者定義變數的時候，請記住如果你定義的是jQuery的變數，請新增一個$符號到變數前，如下：

var $loading = $('#loading');

　　這裡定義成這樣的好處在於，你可以有效的提示自己或者其它閱讀你程式碼的使用者，這是一個jQuery的變數。

　　DOM操作請務必記住快取（cache）

　　在jQuery程式碼開發中，我們常常需要操作DOM，DOM操作是非常消耗資源的一個過程，而往往很多人都喜歡這樣使用jQuery：

$('#loading').html('完畢');
$('#loading').fadeOut();

　　程式碼沒有任何問題，你也可以正常執行出結果，但是這裡注意你每次定義並且呼叫$('#loading')的時候，都實際建立了一個新的變數，如果你需要重用的話，記住一定要定義到一個變數裡，這樣可以有效的快取變數內容，如下：

var $loading = $('#loading');
$loading.html('完畢');$loading.fadeOut();

　　這樣效能會更好。

　　使用鏈式操作

　　上面那個例子，我們可以寫的更簡潔一些：

var $loading = $('#loading');
$loading.html('完畢').fadeOut();

　　這樣是不是更省力氣書寫呢？ 但是注意鏈式操作不要串的過多了，如果太多了，對於你自己的debug的眼力是一個巨大的挑戰

　　精簡jQuery程式碼

　　儘量把一些程式碼都整合到一起，請勿這樣編碼：

// ！！反面人物$button.click(function(){
	$target.css('width','50%');
	$target.css('border','1px solid #202020');
	$target.css('color','#fff');
});

　　應該這樣書寫：

$button.click(function(){
	$target.css({'width':'50%','border':'1px solid #202020','color':'#fff'});
});

　　避免使用全域性型別的選擇器

　　請勿如下方式書寫：

$('.something > *'); 

　　這樣書寫更好：

$('.something').children();

　　不要疊加多個ID

　　請勿如下書寫：

$('#something #children'); 

　　這樣就夠了：

$('#children'); 

　　多用邏輯判斷||或者&&來提速

　　請勿如下書寫：

	if(!$something) {
		$something = $('#something ');
	}

　　這樣書寫效能更好：

$something= $something|| $('#something');

　　儘量使用更少的程式碼

　　與其這樣書寫

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

　　不如這樣書寫：

if(string.length){..}

　　儘量使用 .on方法

　　如果你使用比較新版本的jQuery類庫的話，請使用.on，其它任何方法都是最終使用.on來實現的。

　　儘量使用最新版本的jQuery

　　最新版本的jQuery擁有更好的效能，但是最新的版本可能不支援ie6/7/8，所以大家需要自己針對實際情況選擇。

　　儘量使用原生的Javascript

　　如果使用原生的Javascript也可以實現jQuery提供的功能的話，推薦使用原生的javascript來實現。

　　以上就是所有的jQuery程式碼書寫技巧，如果你也有其它的書寫技巧，請與我們分享！