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