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類中。

分解條件表示式

我們可以將長的條件表示式分解為更小的條件表示式。

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

letieIEMac = 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欄位，則可以用它們自己的子類替換它們。

最後，我們可以將長條件表示式分解為較小的條件表示式，以便於閱讀和理解。

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com