摘要：我決定為初學(xué)者寫一篇博客來(lái)介紹一些常見(jiàn)編程技巧，這些技巧可以幫助你寫出更加規(guī)范，容易維護(hù)的代碼。不過(guò)，在這里我建議你使用一個(gè)常量名來(lái)代替，比如。自從年雙十一正式上線，累計(jì)處理了億錯(cuò)誤事件，得到了金山軟件等眾多知名用戶的認(rèn)可。

譯者按: 規(guī)范的代碼可以有效避免代碼bug，fundebug才會(huì)報(bào)警少一點(diǎn)！

原文: Tips for Writing Cleaner Code

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

我決定為初學(xué)者寫一篇博客來(lái)介紹一些常見(jiàn)編程技巧，這些技巧可以幫助你寫出更加規(guī)范，容易維護(hù)的代碼。

這個(gè)問(wèn)題哦不僅僅是寫JavaScript的開(kāi)發(fā)者們會(huì)遇到，在所有的開(kāi)發(fā)語(yǔ)言中都要避免。我們來(lái)看一個(gè)例子：

$elem.on("keydown", function(e) {
  if (e.keyCode == 27) {
    //...
  }
});

27到底代表什么？如果你經(jīng)常編程，很容易知道這個(gè)數(shù)字代表ESC鍵。但是對(duì)大多數(shù)開(kāi)發(fā)者，特別是初學(xué)者，他們要么記不住這些數(shù)字代號(hào)，要么根本就不知道。當(dāng)在閱讀源代碼的時(shí)候，遇到這樣的代碼段，那么就需要花費(fèi)時(shí)間去查找27和按鍵的對(duì)應(yīng)關(guān)系。當(dāng)然，你也可以在后邊加上注釋。不過(guò)，在這里我建議你使用一個(gè)常量名來(lái)代替，比如：KEY_ESC = 27。這樣更加直觀易懂！

我們經(jīng)常需要獲取某個(gè)元素(評(píng)論、博客、用戶、等等)的標(biāo)識(shí)符，然后做一些計(jì)算。比如：

var id = $(this).attr("id").substring(8);

正如我們已經(jīng)提過(guò)，閱讀這段代碼的開(kāi)發(fā)者需要去推測(cè)為什么用8。

我們?cè)倥e一個(gè)例子(來(lái)自一個(gè)實(shí)際的項(xiàng)目)：

var last_id = $("#answer_pid" + id + " li:first div").attr("id").substr(7);

html的布局稍有變動(dòng)，都將導(dǎo)致這部分代碼出錯(cuò)。

我們?cè)倏匆粋€(gè)：

var id = $(this).attr("id").substring("comment_".length);

這段代碼好一點(diǎn)，至少?zèng)]有使用看不懂的數(shù)字，但JavaScript代碼還是和html有太多的綁定。

我們可以使用data-*語(yǔ)法：

然后，用更加簡(jiǎn)潔的語(yǔ)法來(lái)獲取屬性值：

var id = $(this).attr("data-id");

或則：

var id = $(this).data("id");

我們都知道jQuery有一個(gè)ajax函數(shù)$.ajax。對(duì)于具體的操作，還有$.get, $..load, $.post, 等等。這些函數(shù)被我們頻繁的使用(上傳一段腳本，json文件，執(zhí)行一個(gè)post請(qǐng)求)，它們底層都是用$.ajax實(shí)現(xiàn)。

對(duì)于個(gè)人而言，我從不使用這些簡(jiǎn)化版的函數(shù)，接下來(lái)我會(huì)告訴你為什么。

對(duì)于初學(xué)者或則經(jīng)驗(yàn)不足的開(kāi)發(fā)者，你會(huì)發(fā)現(xiàn)寫代碼也會(huì)分為不同的層次：

a.初級(jí)

$.post(url, data, function(data) {
  data = $.parseJSON(data);             
  //...
});

b.考慮異常情況

$.post(url, data, function(data) {
  try {
      data = $.parseJSON(data);
  } catch (e) {
      return;
  }
  //... 
});

c.如果認(rèn)真閱讀$.post的文檔，我們就會(huì)發(fā)現(xiàn)最后一個(gè)參數(shù)應(yīng)該是數(shù)據(jù)的類型dataType， 但是我發(fā)現(xiàn)在大多數(shù)開(kāi)發(fā)者寫的代碼中都忘記了！

$.post(url, data, function(data) {
  //...
}, "json");

我發(fā)現(xiàn)初學(xué)者很少在項(xiàng)目開(kāi)發(fā)中考慮錯(cuò)誤處理，他們通常不愿意多花5分鐘額外的時(shí)間去完善這部分工作，或則自信的認(rèn)為代碼不會(huì)有問(wèn)題。

如果他們決定添加錯(cuò)誤處理到$.post，通常會(huì)像下面這樣寫：

$.post(url, data, function(data) {
  //...
}, "json").error(function() {
  //... 
});

這樣寫是很難理解的！每次都去寫出錯(cuò)處理非常的繁瑣和耗時(shí)，你可以定義一個(gè)默認(rèn)的錯(cuò)誤處理句柄(default error handler)來(lái)應(yīng)對(duì)所有的ajax請(qǐng)求。對(duì)于全局的異常，產(chǎn)品上線以后可以使用fundebug的JavaScript插件來(lái)抓取。

$.ajaxSetup({
  error: function() {
    // Error modal
  } 
});

我們回到$.post函數(shù)，上面的寫法很難讀懂，而且dataType作為最后一個(gè)參數(shù)很容易遺漏。我個(gè)人認(rèn)為，如下的寫法更加容易閱讀和維護(hù)：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: "json",
  success: function(data) {
    //...
  },
  error: function() {
    //...
  }
});

有時(shí)候，我們需要給頁(yè)面元素綁定對(duì)應(yīng)的事件(刪除消息的按鈕)。經(jīng)常，我們會(huì)這樣實(shí)現(xiàn)：

$(".comment a.delete").click(function(){
  //...
});

問(wèn)題在于，如果我們要把同一個(gè)事件綁定到一個(gè)新的元素(比如一個(gè)新載入的評(píng)論)。我瀏覽過(guò)很多解法，其中一個(gè)典型的解法是重新定義所有元素上的事件：

$(".comment a.delete").unbind("click").click(function() {
  //
});

在jQuery 1.7中有on事件，可以把事件綁定到某個(gè)行為，并且可以通過(guò)選擇器(selector)過(guò)濾元素：

$("body").on("click", "a.external", function(e) {  
  // 該函數(shù)只會(huì)綁定到那些有external類的元素上
});

值得一提的是，上面的代碼對(duì)于動(dòng)態(tài)生成的對(duì)象也有效。應(yīng)當(dāng)大力提倡，不過(guò)也要小心！如下代碼會(huì)導(dǎo)致效率的降低，拖慢瀏覽器的速度：

$("body").on("mousemove", selector, function() {
  //...
});

帶命名空間的事件(namespaced events)在jQuery 1.2就被加入了，但是沒(méi)有幾個(gè)人用。我敢打賭你也不知道！

舉個(gè)例子：

$("a").on("click", function() {
  // Handler 1
}); 
$("a").on("click", function() {
  // Handler 2
});

如果我們想要移除第二個(gè)handler, 使用$(‘a(chǎn)’).off(‘click’)確會(huì)把兩個(gè)handler都移除掉！

但是如果使用帶命名空間的事件，就可以搞定：

$("a").on("click.namespace1", function() {
  //Handler 1
}); 
$("a").on("click.namespace2", function() {
  //Handler 2
});

使用如下代碼移除：

$("a").off("click.namespace2");

如果想更多了解，請(qǐng)參考: Event names and namespaces

這還只是我在閱讀別人代碼的時(shí)候，經(jīng)常遇到的問(wèn)題中的一小部分。我希望這篇文章可以幫助大家提高寫代碼的質(zhì)量！

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了6億+錯(cuò)誤事件，得到了Google、360、金山軟件等眾多知名用戶的認(rèn)可。歡迎免費(fèi)試用！

https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/