溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

優(yōu)化JS類和對象的重構思路是什么

發(fā)布時間:2021-09-30 16:34:29 來源:億速云 閱讀:102 作者:柒染 欄目:web開發(fā)

優(yōu)化JS類和對象的重構思路是什么,針對這個問題,這篇文章詳細介紹了相對應的分析和解答,希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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

如果我們有很多重復的值且表示一樣的含義,但沒有明確地說明,那么我們應該將它們轉換為常量,以便每個人都知道它們的含義,并且如果需要更改,我們只需更改一個地方就行了。

例如我們可能會這樣寫代碼:

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

對于含義相同的數(shù)學我可以用常量表示:

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

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

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

封裝字段

我們可以將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中返回的。

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

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

例如我們可能會這樣寫代碼:

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

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

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

例如我們可能會這樣寫代碼:

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

我們可以根據(jù) 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 isMacisMacIE = isMac && isIE;

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


如果我們有很多重復的值且表示一樣的含義,但沒有明確地說明,那么我們應該將它們轉換為常量,以便每個人都知道它們的含義,并且如果需要更改,我們只需更改一個地方就行了。

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

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

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

關于優(yōu)化JS類和對象的重構思路是什么問題的解答就分享到這里了,希望以上內容可以對大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關注億速云行業(yè)資訊頻道了解更多相關知識。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

js
AI