想必大家對于jQuery這個最流行的javascript類庫都不陌生,而且只要是前端開發人員肯定或多或少的使用或者接觸過,在今天的這篇文章中,我們將介紹一些書寫高質量jQuery代碼的原則,我們不單單會告訴你如何去書寫,也會告訴你為什么這樣書寫,希望大家會覺得有所幫助。
注意定義jQuery變量的時候添加var關鍵字
這個不僅僅是jQuery,所有javascript開發過程中,都需要注意,請一定不要定義成如下:
?
1
|
$loading = $( '#loading' ); //這個是全局定義,不知道哪里位置倒霉引用了相同的變量名,就會郁悶至死的 |
如果你定義成這樣的話,運氣好,可能沒有任何問題,或者出現一個絕對會讓你debug一周,然后罵娘一個月的問題。
請使用一個var來定義變量
如果你使用多個變量的話,請如下方式定義:
?
1
2
3
|
var page = 0, $loading = $( '#loading' ), $body = $( 'body' ); |
不要給每一個變量都添加一個var關鍵字,除非你有嚴重的強迫癥
定義jQuery變量
申明或者定義變量的時候,請記住如果你定義的是jQuery的變量,請添加一個$符號到變量前,如下:
?
1
|
var $loading = $( '#loading' ); |
這里定義成這樣的好處在于,你可以有效的提示自己或者其它閱讀你代碼的用戶,這是一個jQuery的變量。
DOM操作請務必記住緩存(cache)
在jQuery代碼開發中,我們常常需要操作DOM,DOM操作是非常消耗資源的一個過程,而往往很多人都喜歡這樣使用jQuery:
?
1
2
|
$( '#loading' ).html( '完畢' ); $( '#loading' ).fadeOut(); |
代碼沒有任何問題,你也可以正常運行出結果,但是這里注意你每次定義并且調用$('#loading')的時候,都實際創建了一個新的變量,如果你需要重用的話,記住一定要定義到一個變量里,這樣可以有效的緩存變量內容,如下:
?
1
2
|
var $loading = $( '#loading' ); $loading.html( '完畢' );$loading.fadeOut(); |
原文轉自:http://www.admin10000.com/document/3968.html