如何書寫高質量的jQuery代碼

想必你們對於jQuery這個最流行的javascript類庫都不陌生，並且只要是前端開發人員確定或多或少的使用或者接觸過，在今天的這篇文章中，參考了一些資料及實際使用效率，將介紹一些書寫高質量jQuery代碼的原則，不僅僅會告訴你如何去書寫，也會告訴你爲何這樣書寫，但願你們會以爲有所幫助。

注意定義jQuery變量的時候添加var關鍵字

　　這個不單單是jQuery，全部javascript開發過程當中，都須要注意，請必定不要定義成以下：

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

請使用一個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();

精簡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來實現。