JavaScript 是一種易于學(xué)習(xí)的編程語言，編寫運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫一段干凈的JavaScript 代碼是很困難的。

在本文中，我們將介紹一些優(yōu)化 JS 類和對(duì)象的重構(gòu)思路。

[[329438]]

用常量來表示數(shù)字

如果我們有很多重復(fù)的值且表示一樣的含義，但沒有明確地說明，那么我們應(yīng)該將它們轉(zhuǎn)換為常量，以便每個(gè)人都知道它們的含義，并且如果需要更改，我們只需更改一個(gè)地方就行了。

例如我們可能會(huì)這樣寫代碼：

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

對(duì)于含義相同的數(shù)學(xué)我可以用常量表示：

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

現(xiàn)在我們知道9.81實(shí)際上意味著GRAVITATIONAL_CONSTANT，我們不必重復(fù)自己。

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

封裝字段

我們可以將getter和setter添加到類的字段中，這樣就不心直接對(duì)類的字段進(jìn)行操作。

例如我們可能會(huì)這樣寫代碼：

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

如果要控制如何設(shè)置值，可以這樣重構(gòu)：

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

這樣，我們就可以控制如何設(shè)置值，因?yàn)槲覀兛梢栽趕etter中放入代碼來設(shè)置名稱。我們還可以控制誰能獲得名稱，因?yàn)樗窃趃etter中返回的。

用數(shù)組類代替字段

我們可以將字段替換為其自己的數(shù)據(jù)類，這樣在記錄數(shù)據(jù)中會(huì)有更強(qiáng)靈活性。

例如我們可能會(huì)這樣寫代碼：

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

如果我們想擴(kuò)充 bloodGroup (血型)的種類，我們可以把 bloodGroup 重構(gòu)成一個(gè)類。

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字段中存儲(chǔ)更多種類的數(shù)據(jù)。

用狀態(tài)/策略替換類型代碼

有時(shí)，我們可以根據(jù)對(duì)象的類型創(chuàng)建子類，而不是在類中使用類型字段。這樣，我們就可以在它們自己的子類中擁有兩個(gè)類不共享的更多成員。

例如我們可能會(huì)這樣寫代碼：

class Animal { 
  constructor (type) { 
    this.type = type 
  } 
} 
 
const cat = new Animal('cat') 
const dog = new Animal('dog') 

我們可以根據(jù) type 類型來重構(gòu)對(duì)應(yīng)的類：

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

在上面的示例中，我們單獨(dú)編寫一個(gè)Animal類，而另外添加Cat和Dog類，它們是Animal類的子類。

這樣我們可以 Cat 和 Dog 類中共享的屬性保存在各自的類的，把共享的放在 Animal 類中。

分解條件表達(dá)式

我們可以將長的條件表達(dá)式分解為更小的條件表達(dá)式。

例如我們可能會(huì)這樣寫代碼：

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

我們可以這樣重構(gòu)它：

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

我們將冗長又難懂的條件表達(dá)式分解多個(gè)短小表達(dá)式，這樣會(huì)大大滴增加閱讀性。

總結(jié)

如果我們有很多重復(fù)的值且表示一樣的含義，但沒有明確地說明，那么我們應(yīng)該將它們轉(zhuǎn)換為常量，以便每個(gè)人都知道它們的含義，并且如果需要更改，我們只需更改一個(gè)地方就行了。

為了更好控制類的屬性，我們可以為它添加getter和setter方法。

如果我們有type字段，則可以用它們自己的子類替換它們。

最后，我們可以將長條件表達(dá)式分解為較小的條件表達(dá)式，以便于閱讀和理解。

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。