JavaScript的重構技巧-js教程-PHP中文網

JavaScript的重構技巧

hzc

發布： 2020-06-23 09:35:58

轉載

2095 人瀏覽過

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

#按讚再看，養成習慣
本文GitHub https://github.com/qq44924588... 上已經收錄，更多往期高讚文章的分類，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參考考場複習，希望我們一起有點東西。

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

在本文中，我們將介紹一些最佳化條件表達式相關的重構思路。

分解條件式

我們可以將長的條件式分解成有命名的短小條件表達式多，這樣有利於閱讀。例如我們可能會寫這樣的程式碼：

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

登入後複製

上面的程式碼太冗長了，不利於閱讀，我們可以把它分解成幾個短小且有名字的條件表達式，如下所示：

let userAgent = navigator.userAgent.toLowerCase();
let isMac = userAgent.includes("mac");
let isIE = userAgent.toLowerCase().includes("ie");
let isMacIE = isMac && isIE;

登入後複製

合併條件表達式

與上面相反的，如果有多個簡短的條件表達式，則可以將它們合併成一個。例如我們可能會寫這樣的程式碼：

const x = 5;
const bigEnough = x > 5;
const smallEnough = x < 6;
const inRange = bigEnough && smallEnough;

登入後複製

我們可以這樣合併：

const x = 5;
const inRange = x > 5 && x < 6;

登入後複製

因為表達式很短，即使把它們組合在一起也不會使表達式變長，所以我們可以這樣做。

合併重複的條件片段

如果我們在條件區塊中有重複的表達式或語句，則可以將它們移出。例如我們可能會寫這樣的程式碼：

if (price > 100) {
  //...
  complete();
} else {
  //...
  complete();
}

登入後複製

我們可以把重複的內容移到條件表達式外面，如下所示：

if (price > 100) {
  //...  
} else {
  //...  
}
complete();

登入後複製

這樣，我們不必重複不必要地呼叫complete函數。

刪除控制標誌

如果我們在迴圈中使用了控制標誌，那應該會這樣程式碼：

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

登入後複製

在上面的程式碼中，done 是控制標，在condition為true時，將done設定為true停止while循環。

相對於上面，我們可以使用break來停止循環，如下所示：

let done = false;
while (!done) {
  if (condition) {
    break;
  }
  //...
}

登入後複製

用衛語句取代巢狀條件

衛語句就是把複雜的條件表達式拆分成多個條件表達式，例如一個很複雜的表達式，嵌套了好幾層的if-then-else語句，轉換為多個 if語句，實作它的邏輯，這多條的if語句就是衛語句。

巢狀條件語句很難閱讀，所以我們可以使用衛語句來取代它們。例如我們可能會寫這樣的程式碼：

const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

登入後複製

我們可以這樣優化：

  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

登入後複製

在上面的程式碼中，衛語句是：

if (!foo) {
  return;
}

登入後複製

和

if (!bar) {
  return;
}

登入後複製

如果這些條件為假，它們會提前傳回函數，這樣，我們就不需要嵌套了。

用多態取代條件

我們可以使用switch語句為不同種類的資料建立相同的子類，而不是使用switch語句對不同類型的資料執行相同的操作，然後針對物件的類型使用不同的方法。

例如我們可能會寫這樣的程式碼：

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
  getSpeed() {
    switch (this.type) {
      case ('cat'): {
        return getBaseSpeed() * 1.5
      }
      case ('dog'): {
        return getBaseSpeed() * 2
      }
      default: {
        return getBaseSpeed()
      }
    }
  }
}

登入後複製

我們可以這樣重構：

class Animal {
  constructor(type) {
    this.type = type;
  }
  getBaseSpeed() {
    return 100;
  }
}
class Cat extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 1.5;
  }
}
class Dog extends Animal {
  getSpeed() {
    return super.getBaseSpeed() * 2;
  }
}

登入後複製

當switch語句很長時，應該為不同類型的物件自訂case區塊。

採用空物件

如果我們重複檢查null或undefined，則可以定義一個代表該類別的null或undefined版本的子類，然後使用它。

例如我們可能會寫這樣的程式碼：

class Person {
  //...
}

登入後複製

我們可以這樣重構：

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

登入後複製

然後，我們將Person#設定為null或undefined 的物件屬性，而不是將其設為NullPerson實例。

這樣就不需要使用條件來檢查這些值。

推薦教學：《JS教學》

以上是JavaScript的重構技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！