譯者按: 規(guī)范的代碼可以有效避免代碼bug，fundebug才會報警少一點！
原文: Tips for Writing Cleaner Code
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。
我決定為初學(xué)者寫一篇博客來介紹一些常見編程技巧，這些技巧可以幫助你寫出更加規(guī)范，容易維護的代碼。
這個問題哦不僅僅是寫JavaScript的開發(fā)者們會遇到，在所有的開發(fā)語言中都要避免。我們來看一個例子：
重慶分公司
重慶分公司
$elem.on('keydown', function(e) {
if (e.keyCode == 27) {
//...
}
});27到底代表什么？如果你經(jīng)常編程，很容易知道這個數(shù)字代表ESC鍵。但是對大多數(shù)開發(fā)者，特別是初學(xué)者，他們要么記不住這些數(shù)字代號，要么根本就不知道。當(dāng)在閱讀源代碼的時候，遇到這樣的代碼段，那么就需要花費時間去查找27和按鍵的對應(yīng)關(guān)系。當(dāng)然，你也可以在后邊加上注釋。不過，在這里我建議你使用一個常量名來代替，比如：KEY_ESC = 27。這樣更加直觀易懂！
我們經(jīng)常需要獲取某個元素(評論、博客、用戶、等等)的標(biāo)識符，然后做一些計算。比如：
var id = $(this).attr('id').substring(8);正如我們已經(jīng)提過，閱讀這段代碼的開發(fā)者需要去推測為什么用8。
我們再舉一個例子(來自一個實際的項目)：
var last_id = $('#answer_pid' + id + ' li:first div').attr('id').substr(7);html的布局稍有變動，都將導(dǎo)致這部分代碼出錯。
我們再看一個：
var id = $(this).attr('id').substring("comment_".length);這段代碼好一點，至少沒有使用看不懂的數(shù)字，但JavaScript代碼還是和html有太多的綁定。
我們可以使用data-*語法：
然后，用更加簡潔的語法來獲取屬性值：
var id = $(this).attr('data-id');或則：
var id = $(this).data('id');我們都知道jQuery有一個ajax函數(shù)$.ajax。對于具體的操作，還有$.get, $..load, $.post, 等等。這些函數(shù)被我們頻繁的使用(上傳一段腳本，json文件，執(zhí)行一個post請求)，它們底層都是用$.ajax實現(xiàn)。
對于個人而言，我從不使用這些簡化版的函數(shù)，接下來我會告訴你為什么。
對于初學(xué)者或則經(jīng)驗不足的開發(fā)者，你會發(fā)現(xiàn)寫代碼也會分為不同的層次：
$.post(url, data, function(data) {
data = $.parseJSON(data);
//...
});b. 考慮異常情況
$.post(url, data, function(data) {
try {
data = $.parseJSON(data);
} catch (e) {
return;
}
//...
});$.post的文檔，我們就會發(fā)現(xiàn)最后一個參數(shù)應(yīng)該是數(shù)據(jù)的類型dataType， 但是我發(fā)現(xiàn)在大多數(shù)開發(fā)者寫的代碼中都忘記了！$.post(url, data, function(data) {
//...
}, 'json');我發(fā)現(xiàn)初學(xué)者很少在項目開發(fā)中考慮錯誤處理，他們通常不愿意多花5分鐘額外的時間去完善這部分工作，或則自信的認為代碼不會有問題。
如果他們決定添加錯誤處理到$.post，通常會像下面這樣寫：
$.post(url, data, function(data) {
//...
}, 'json').error(function() {
//...
});這樣寫是很難理解的！每次都去寫出錯處理非常的繁瑣和耗時，你可以定義一個默認的錯誤處理句柄(default error handler)來應(yīng)對所有的ajax請求。對于全局的異常，產(chǎn)品上線以后可以使用fundebug的JavaScript插件來抓取。
$.ajaxSetup({
error: function() {
// Error modal
}
});我們回到$.post函數(shù)，上面的寫法很難讀懂，而且dataType作為最后一個參數(shù)很容易遺漏。我個人認為，如下的寫法更加容易閱讀和維護：
$.ajax({
type: "POST",
url: url,
data: data,
dataType: "json",
success: function(data) {
//...
},
error: function() {
//...
}
});```
### 4. 多元素事件
有時候，我們需要給頁面元素綁定對應(yīng)的事件(刪除消息的按鈕)。經(jīng)常，我們會這樣實現(xiàn)：
```js
$('.comment a.delete').click(function(){
//...
});問題在于，如果我們要把同一個事件綁定到一個新的元素(比如一個新載入的評論)。我瀏覽過很多解法，其中一個典型的解法是重新定義所有元素上的事件：
$('.comment a.delete').unbind('click').click(function() {
//
});在jQuery 1.7中有on事件，可以把事件綁定到某個行為，并且可以通過選擇器(selector)過濾元素：
$('body').on('click', 'a.external', function(e) {
// 該函數(shù)只會綁定到那些有external類的元素上
});值得一提的是，上面的代碼對于動態(tài)生成的對象也有效。應(yīng)當(dāng)大力提倡，不過也要小心！如下代碼會導(dǎo)致效率的降低，拖慢瀏覽器的速度：
$('body').on('mousemove', selector, function() {
//...
});帶命名空間的事件(namespaced events)在jQuery 1.2就被加入了，但是沒有幾個人用。我敢打賭你也不知道！
舉個例子：
$('a').on('click', function() {
// Handler 1
});
$('a').on('click', function() {
// Handler 2
});如果我們想要移除第二個handler, 使用$(‘a(chǎn)’).off(‘click’)確會把兩個handler都移除掉！
但是如果使用帶命名空間的事件，就可以搞定：
$('a').on('click.namespace1', function() {
//Handler 1
});
$('a').on('click.namespace2', function() {
//Handler 2
});```
使用如下代碼移除：
```js
$('a').off('click.namespace2');如果想更多了解，請參考: Event names and namespaces
這還只是我在閱讀別人代碼的時候，經(jīng)常遇到的問題中的一小部分。我希望這篇文章可以幫助大家提高寫代碼的質(zhì)量！
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了7億+錯誤事件，得到了Google、360、金山軟件、百姓網(wǎng)等眾多知名用戶的認可。歡迎免費試用！
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
