想必大家對于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代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。