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

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供婁煩網(wǎng)站建設(shè)、婁煩做網(wǎng)站、婁煩網(wǎng)站設(shè)計(jì)、婁煩網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、婁煩企業(yè)網(wǎng)站模板建站服務(wù)，十余年婁煩做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

• 原文: Tips for Writing Cleaner Code

• 譯者: Fundebug

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

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

1. 常量

這個(gè)問(wèn)題哦不僅僅是寫(xiě)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。這樣更加直觀易懂！

2. 標(biāo)識(shí)符(identifiers)

我們經(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è)：

<div class="comment" id="comment_123"></div>
var id = $(this).attr('id').substring("comment_".length);

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

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

<div class="comment" data-id="123"></div>

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

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

或則：

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

3. $.post

我們都知道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)寫(xiě)代碼也會(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ā)者寫(xiě)的代碼中都忘記了！

$.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ì)像下面這樣寫(xiě)：

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

這樣寫(xiě)是很難理解的！每次都去寫(xiě)出錯(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ù)，上面的寫(xiě)法很難讀懂，而且dataType作為最后一個(gè)參數(shù)很容易遺漏。我個(gè)人認(rèn)為，如下的寫(xiě)法更加容易閱讀和維護(hù)：

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

### 4. 多元素事件

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

```js
$('.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() {
  //...
});

5. 帶命名空間的事件(namespaced events)

帶命名空間的事件(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
});```

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

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

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

關(guān)于Fundebug

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

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/07/12/tips_for_writing_cleaner_code/

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：幾點(diǎn)建議幫你寫(xiě)出簡(jiǎn)潔的JS代碼-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://jinyejixie.com/article4/dedcoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、虛擬主機(jī)、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、Google、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)