幾點建議幫你寫出簡潔的JS代碼

譯者按: 規範的代碼能夠有效避免代碼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. 多元素事件

有時候，咱們須要給頁面元素綁定對應的事件(刪除消息的按鈕)。常常，咱們會這樣實現：

```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) {  
  // 該函數只會綁定到那些有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
});```

使用以下代碼移除：
```js
$('a').off('click.namespace2');

若是想更多瞭解，請參考: Event names and namespaces

這還只是我在閱讀別人代碼的時候，常常遇到的問題中的一小部分。我但願這篇文章能夠幫助你們提升寫代碼的質量！

版權聲明: 轉載時請註明做者Fundebug以及本文地址： https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/