JavaScript重構技巧-下降函數複雜度

John Au-Yeung
來源：medium
譯者：前端小智

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

JavaScript 是一種易於學習的編程語言，編寫運行並執行某些操做的程序很容易。然而，要編寫一段乾淨的JavaScript 代碼是很困難的。

在本文中，咱們將研究如何下降函數複雜度。

將重複的代碼移到同個位置

咱們應該將重複的代碼提取出來，合併放到同個位置，這樣當有須要修改的，咱們只須要改一個地方便可，同時也減小犯錯率。

假設咱們有可能很寫出下面的代碼：

const button = document.querySelector('button');
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    document.querySelector("p").style.color = 'red';
  } else {
    document.querySelector("p").style.color = 'green';
  }
})

上面代碼中有兩個document.querySelector(「p」)，咱們能夠這樣優化，把document.querySelector(「p」) 保存到一個變量中，而後使用該變量便可，以下所示：

const button = document.querySelector('button');
const p = document.querySelector("p");
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    p.style.color = 'red';
  } else {
    p.style.color = 'green';
  }
}

這樣咱們就沒必要寫長長的document.querySelector("p")，只需寫個變量 p 就好了。

另外一個常見的代碼實例中的數字，光看數字咱們很難知道其表示的含義：

let x = 1;
let y = 1;
let z = 1;

咱們不知道上面這三個一表示什麼，因此咱們能夠移除重複的代碼，並用一個合適的變量名來表示，以下所示：

const numPeople = 1;
let x = numPeople;
let y = numPeople;
let z = numPeople;

這樣咱們就能夠知道 numPeople 的值爲1，其表示的人的數量。

簡化函數

函數應儘量簡單，最好只作一件事，行數也不要太多，最多不能超過 30 行。

咱們不該該使用 ES5 類的方式，也不該將IIFE用於模塊或塊。相反，咱們應該使用類語法，其中能夠在類中包含該類的多個實例方法。這會大大減小了函數的體量。

一樣，只要咱們能夠定義函數，函數就應該是純函數，這意味着他們不該該產生反作用。

例如，最好的簡單函數是以下：

const add = (a, b) => a + b;

上面的函數沒有任何反作用，由於它不會在函數外部修改任何變量。 另外，它也是一個純函數，對於相同的輸入，輸出的結果也都同樣的。

使用衛語句代替嵌套語句

衛語句的定義用法

衛語句就是把複雜的條件表達式拆分紅多個條件表達式，好比一個很複雜的表達式，嵌套了好幾層的if - then-else語句，轉換爲多個if語句，實現它的邏輯，這多條的if語句就是衛語句

有時候條件式可能出如今嵌套n次才能真正執行，其餘分支只是簡單報錯返回的狀況，對於這種狀況，應該單獨檢查報錯返回的分支，當條件爲真時當即返回，這樣的單獨檢查就是衛語句（guard clauses).衛語句能夠把咱們的視線從異常處理中解放出來，集中精力到正常處理的代碼中。

好比咱們可能會編寫以下的代碼 ：

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName === 'string') {
    if (typeof lastName === 'string') {
      if (typeof greeting === 'string') {
        return `${greeting}, ${firstName}${lastName}`;
      }
    }
  }
}

咱們能夠這樣優化

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName !== 'string') {
    throw new Error('first name is required');
  }
  if (typeof lastName !== 'string') {
    throw new Error('last name is required');
  }
  if (typeof greeting !== 'string') {
    throw new Error('greeting is required');
  }
  return `${greeting}, ${firstName}${lastName}`;
}

在第二個示例中，若是每一個參數都不是字符串，則拋出錯誤，從而消除了嵌套的if語句。

這將嵌套的if語句在執行相同操做時減小爲沒有嵌套的if語句。

嵌套很難閱讀和理解，咱們應該在全部地方都擺脫它們。

總結

重複的代碼老是很差的。 咱們應該永遠記住「不要重複本身（DRY）」的原則。

另外應該使用一些新的方式來代替 ES5 時代的寫法。

最後，應將嵌套的if語句替換爲衛語句，由於它們能夠執行與嵌套的if語句相同的檢查，這樣有利於閱讀。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://levelup.gitconnected....

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。