譯者按: 規范的代碼可以有效避免代碼bug,fundebug才會報警少一點!
原文: Tips for Writing Cleaner Code
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用於學習。
我決定為初學者寫一篇博客來介紹一些常見編程技巧,這些技巧可以幫助你寫出更加規范,容易維護的代碼。
1. 常量
這個問題哦不僅僅是寫JavaScript的開發者們會遇到,在所有的開發語言中都要避免。我們來看一個例子:
$elem.on(
'keydown', function(e) {
if (e.keyCode == 27) {
//...
}
});
|
27
到底代表什么?如果你經常編程,很容易知道這個數字代表ESC鍵。但是對大多數開發者,特別是初學者,他們要么記不住這些數字代號,要么根本就不知道。當在閱讀源代碼的時候,遇到這樣的代碼段,那么就需要花費時間去查找27
和按鍵的對應關系。當然,你也可以在后邊加上注釋。不過,在這里我建議你使用一個常量名來代替,比如:KEY_ESC = 27
。這樣更加直觀易懂!
2. 標識符(identifiers)
我們經常需要獲取某個元素(評論、博客、用戶、等等)的標識符,然后做一些計算。比如:
var id = $(this).attr('id').substring(8);
|
正如我們已經提過,閱讀這段代碼的開發者需要去推測為什么用8
。
我們再舉一個例子(來自一個實際的項目):
var last_id = $('#answer_pid' + id + ' li:first div').attr('id').substr(7);
|
html的布局稍有變動,都將導致這部分代碼出錯。
我們再看一個:
<div
class="comment" id="comment_123"></div>
var id = $(this).attr('id').substring("comment_".length);
|
這段代碼好一點,至少沒有使用看不懂的數字,但JavaScript代碼還是和html有太多的綁定。
我們可以使用data-*
語法:
<div class="comment" data-id="123"></div>
|
然后,用更加簡潔的語法來獲取屬性值:
var id = $(this).attr('data-id');
|
或則:
var id = $(this).data('id');
|
3. $.post
我們都知道jQuery
有一個ajax
函數$.ajax
。對於具體的操作,還有$.get
, $..load
, $.post
, 等等。這些函數被我們頻繁的使用(上傳一段腳本,json文件,執行一個post請求),它們底層都是用$.ajax
實現。
對於個人而言,我從不使用這些簡化版的函數,接下來我會告訴你為什么。
對於初學者或則經驗不足的開發者,你會發現寫代碼也會分為不同的層次:
- a. 初級
$.post(url, data,
function(data) {
data = $.parseJSON(data);
//...
});
|
-
b. 考慮異常情況
$.post(url, data, function(data) {try {data = $.parseJSON(data);} catch (e) {return;}//...}); -
c. 如果認真閱讀
$.post
的文檔,我們就會發現最后一個參數應該是數據的類型dataType
, 但是我發現在大多數開發者寫的代碼中都忘記了!
$.post(url, data,
function(data) {
//...
},
'json');
|
我發現初學者很少在項目開發中考慮錯誤處理,他們通常不願意多花5分鍾額外的時間去完善這部分工作,或則自信的認為代碼不會有問題。
如果他們決定添加錯誤處理到$.post
,通常會像下面這樣寫:
$.post(url, data,
function(data) {
//...
},
'json').error(function() {
//...
});
|
這樣寫是很難理解的!每次都去寫出錯處理非常的繁瑣和耗時,你可以定義一個默認的錯誤處理句柄(default error handler)來應對所有的ajax請求。對於全局的異常,產品上線以后可以使用fundebug的JavaScript插件來抓取。
$.ajaxSetup({
error: function() {
// Error modal
}
});
|
我們回到$.post
函數,上面的寫法很難讀懂,而且dataType
作為最后一個參數很容易遺漏。我個人認為,如下的寫法更加容易閱讀和維護:
$.ajax({
type: "POST",
url: url,
data: data,
dataType: "json",
success: function(data) {
//...
},
error: function() {
//...
}
});
|
4. 多元素事件
有時候,我們需要給頁面元素綁定對應的事件(刪除消息的按鈕)。經常,我們會這樣實現:
$(
'.comment a.delete').click(function(){
//...
});
|
問題在於,如果我們要把同一個事件綁定到一個新的元素(比如一個新載入的評論)。我瀏覽過很多解法,其中一個典型的解法是重新定義所有元素上的事件:
$(
'.comment a.delete').unbind('click').click(function() {
//
});
|
在jQuery 1.7中有on
事件,可以把事件綁定到某個行為,並且可以通過選擇器(selector)過濾元素:
$(
'body').on('click', 'a.external', function(e) {
// 該函數只會綁定到那些有external類的元素上
});
|
值得一提的是,上面的代碼對於動態生成的對象也有效。應當大力提倡,不過也要小心!如下代碼會導致效率的降低,拖慢瀏覽器的速度:
$(
'body').on('mousemove', selector, function() {
//...
});
|
5. 帶命名空間的事件(namespaced events)
帶命名空間的事件(namespaced events)在jQuery 1.2就被加入了,但是沒有幾個人用。我敢打賭你也不知道!
舉個例子:
$(
'a').on('click', function() {
// Handler 1
});
$(
'a').on('click', function() {
// Handler 2
});
|
如果我們想要移除第二個handler, 使用$(‘a’).off(‘click’)
確會把兩個handler都移除掉!
但是如果使用帶命名空間的事件,就可以搞定:
$(
'a').on('click.namespace1', function() {
//Handler 1
});
$(
'a').on('click.namespace2', function() {
//Handler 2
});
|
使用如下代碼移除:
$(
'a').off('click.namespace2');
|
如果想更多了解,請參考: Event names and namespaces
這還只是我在閱讀別人代碼的時候,經常遇到的問題中的一小部分。我希望這篇文章可以幫助大家提高寫代碼的質量!
版權聲明: 轉載時請注明作者Fundebug以及本文地址: https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/