JavaScript重構技巧 — 對象和值

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

點贊再看，養成習慣

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

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

在本文中，咱們將介紹一些優化 JS 類和對象的重構思路。

用常量來表示數字

若是咱們有不少重複的值且表示同樣的含義，但沒有明確地說明，那麼咱們應該將它們轉換爲常量，以便每一個人都知道它們的含義，而且若是須要更改，咱們只需更改一個地方就好了。

例如咱們可能會這樣寫代碼：

const getWeight = (mass) => mass * 9.81
const potentialEnergy = (mass, height) => mass * height * 9.81

對於含義相同的數學我能夠用常量表示：

const GRAVITATIONAL_CONSTANT = 9.81;
const getWeight = (mass) => mass * GRAVITATIONAL_CONSTANT
const potentialEnergy = (mass, height) => mass * height * GRAVITATIONAL_CONSTANT

如今咱們知道9.81實際上意味着GRAVITATIONAL_CONSTANT，咱們沒必要重複本身。

上面咱們用常量 GRAVITATIONAL_CONSTANT 表示 9.81 ，這樣別人一看就知道它表示是萬有引力常數常量。

封裝字段

咱們能夠將getter和setter添加到類的字段中，這樣就不心直接對類的字段進行操做。

例如咱們可能會這樣寫代碼：

class Person {
  constructor(name) {
    this.name = name;
  }
}

若是要控制如何設置值，能夠這樣重構：

class Person {
  constructor(name) {
    this._name = name
  }

  get name() {
    return this._name
  }

  set name() {
    this._name = name
  }
}

這樣，咱們就能夠控制如何設置值，由於咱們能夠在setter中放入代碼來設置名稱。咱們還能夠控制誰能得到名稱，由於它是在getter中返回的。

用數組類代替字段

咱們能夠將字段替換爲其本身的數據類，這樣在記錄數據中會有更強靈活性。

例如咱們可能會這樣寫代碼：

class Person {
  constructor(name, bloodGroup) {
    this.name = name;
    this.bloodGroup = bloodGroup;
  }
}
const person = new Person('joe', 'a')

若是咱們想擴充 bloodGroup （血型）的種類，咱們能夠把 bloodGroup 重構成一個類。

class BloodGroup {
  constructor(name) {
    this.bloodGroup = name;
  }
}
class Person {
  constructor(name, bloodGroup) {
    this.name = name;
    this.bloodGroup = bloodGroup;
  }
}
const bloodGroup = new BloodGroup('a');
const person = new Person('joe', bloodGroup)

這樣，咱們就能夠在bloodGroup字段中存儲更多種類的數據。

用狀態/策略替換類型代碼

有時，咱們能夠根據對象的類型建立子類，而不是在類中使用類型字段。這樣，咱們就能夠在它們本身的子類中擁有兩個類不共享的更多成員。

例如咱們可能會這樣寫代碼：

class Animal {
  constructor (type) {
    this.type = type
  }
}

const cat = new Animal('cat')
const dog = new Animal('dog')

咱們能夠根據 type 類型來重構對應的類：

class Animal {
  //...
}
class Cat extends Animal {
  //...
}
class Dog extends Animal {
  //...
}
const cat = new Cat();
const dog = new Dog();

在上面的示例中，咱們單獨編寫一個Animal類，而另外添加Cat和Dog類，它們是Animal類的子類。

這樣咱們能夠 Cat 和 Dog 類中共享的屬性保存在各自的類的，把共享的放在 Animal 類中。

分解條件表達式

咱們能夠將長的條件表達式分解爲更小的條件表達式。

例如咱們可能會這樣寫代碼：

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;

咱們將冗長又難懂的條件表達式分解多個短小表達式，這樣會大大滴增長閱讀性。

總結

若是咱們有不少重複的值且表示同樣的含義，但沒有明確地說明，那麼咱們應該將它們轉換爲常量，以便每一個人都知道它們的含義，而且若是須要更改，咱們只需更改一個地方就好了。

爲了更好控制類的屬性，咱們能夠爲它添加getter和setter方法。

若是咱們有type字段，則能夠用它們本身的子類替換它們。

最後，咱們能夠將長條件表達式分解爲較小的條件表達式，以便於閱讀和理解。

---

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

https://levelup.gitconnected....

---

交流

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