編寫更好的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

谷歌的CND能保證選擇離用戶最近的緩存並迅速響應,地址是http://code.jQuery.com/jQuery-latest.min.js

必要時組合jQuery和javascript原生代碼

上所述，jQuery就是javascript，這意味着用jQuery能作的事情，一樣能夠用原生代碼來作。原生代碼的可讀性和可維護性可能不如jQuery，並且代碼更長。但也意味着更高效（一般更接近底層代碼可讀性越差，性能越高，例如：彙編，固然須要更強大的人才能夠）。記住沒有任何框架能比原生代碼更小，更輕，更高效。

最後忠告

最後，寫這篇文章的目的是提升jQuery的性能和給出一些好的建議。若是你想深刻的研究對這個話題你會發現不少樂趣。記住，jQuery並不是不可或缺，僅是一種選擇。思考爲何要使用它。DOM操做？ajax？模版？css動畫？仍是選擇符引擎？有時候，javascript微型框架或jQuery的需求定製版一樣是值得考慮的。

 

原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/