如何書寫高質量的jQuery代碼

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

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

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

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

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

請使用一個var來定義變量

如果你使用多個變量的話,請如下方式定義:

  1. var page = 0,
  2. $loading = $('#loading'),
  3. $body = $('body');

不要給每一個變量都添加一個var關鍵字,除非你有嚴重的強迫症

定義jQuery變量

申明或者定義變量的時候,請記住如果你定義的是jQuery的變量,請添加一個$符號到變量前,如下:

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

這裏定義成這樣的好處在於,你可以有效的提示自己或者其它閱讀你代碼的用戶,這是一個jQuery的變量。

DOM操作請務必記住緩存(cache)

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

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

代碼沒有任何問題,你也可以正常運行出結果,但是這裏注意你每次定義並且調用$('#loading')的時候,都實際創建了一個新的變量,如果你需要重用的話,記住一定要定義到一個變量裏,這樣可以有效的緩存變量內容,如下:

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

這樣性能會更好。

使用鏈式操作

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

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

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

精簡jQuery代碼

儘量把一些代碼都整合到一起,請勿這樣編碼:

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

應該這樣書寫:

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

避免使用全局類型的選擇器

請勿如下方式書寫:

  1. $('.something > *');

這樣書寫更好:

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

不要疊加多個ID

請勿如下書寫:

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

這樣就夠了:

  1. $('#children');

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

請勿如下書寫:

  1. if(!$something) {
  2. $something = $('#something ');
  3. }

這樣書寫性能更好:

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

儘量使用更少的代碼

與其這樣書寫

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

不如這樣書寫:

  1. if(string.length){..}

儘量使用 .on方法

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

儘量使用最新版本的jQuery

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

儘量使用原生的Javascript

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

以上就是所有的jQuery代碼書寫技巧,如果你也有其它的書寫技巧,請與我們分享!

轉載:http://www.gbtags.com/gb/share/2672.htm

發佈了9 篇原創文章 · 獲贊 3 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章