簡單設計模式：策略模式

封面照片來自 JESHOOTS.COM 在 Unsplash

關於這個系列...

學習 GoF 設計模式 一直是我成為開發者以來的目標。對我來說，對設計模式有基本的理解是成為優秀開發者的基礎之一。雖然 Javascript 不是純物件導向程式語言，而一些流行的前端框架如 React、Redux 更像是函數式程式設計。但我認為學習這些仍然非常有價值。理解聰明人如何解決軟體開發問題有助於我們以更多靈感處理軟體設計問題，寫出更好的程式碼並防止重新發明輪子。

學習 GoF 設計模式的資源很多，但專門針對網頁開發者的並不多，其中一些有很多複雜的 UML 圖表或困難的術語。對於沒有相關背景的網頁開發者來說，有時很難開始。如果你想更詳細地學習模式，我認為這個網站是個不錯的選擇。

所以，在這個系列中，我將嘗試通過以下方式讓一切變得簡單：

1. 使用簡單的語言來詮釋我對模式的理解
2. 提取模式的高層概念
3. 使用簡單的例子在 javascript 中實現模式。

我希望這個系列能幫助想要學習設計模式的網頁開發者更好地理解這些模式。

我將從我個人認為更通用的模式開始，我可能會跳過一些目前對我來說似乎太難以實現簡單例子的模式，或者與網頁開發不太相關的模式。

在系列結束時，我將對設計模式如何讓我們成為更好的網頁開發者提出我的觀點總結。

---

策略模式

如果你沒有時間，這篇文章的一句話版本是：

對介面編程，而不是對實現編程。

---

維基百科中的定義是

在電腦程式設計中，策略模式（也稱為政策模式）是一種行為軟體設計模式，可以在執行時選擇演算法。

例子

John 必須去上班，他如何去上班是由 currentWeather 和 currentTime 決定的。目前，他唯一的方式是步行。

var john = new People()
john.walk()

幾週過去了...

John 有足夠的錢買一輛自行車，他現在有另一個選擇。

讓我們重新編寫程式碼！

var john = new People()
if (currentWeather === 'sunny' && currentTime > 9) {
  john.bike()
} else {
  john.walk()
}

在這個例子中，方法 walk() 和 bike() 是「去上班」任務的演算法細節。這個程式碼不理想。當我們改變演算法細節時，我們也需要改變客戶端的程式碼。如果 John 將來買了一輛車，或者 John 在下雨時步行去上班。客戶端的程式碼很快就會變得有異味。

一個補救措施是將 walk() 和 bike() 方法抽象到更高一層 goToWork()

var john = new People()
john.goToWork(currentWeather, currentTime)

在 OOP 中 goToWork() 的實際實現有點超出了這個系列的範圍。如果你對此感興趣，可以看看這個。

為了簡單起見，你可以想像 goToWork() 的工作方式是這樣的：

class People {
  // ...類中的屬性
  goToWork(currentWeather, currentTime) {
    let strategy = null
    if (currentWeather === 'sunny' && currentTime > 9) {
      strategy = this._walk.bind(this)
    } else {
      strategy = this._bike.bind(this)
    }
    strategy()
  }
}

在這種情況下，無論 John 如何去上班，都不會影響客戶端的程式碼。客戶端和演算法都依賴於共識的函數名稱（介面）goToWork()。只是要小心不要將函數命名得太通用，比如 move()。

一個經典的現實世界例子是輸入驗證。與其為客戶端寫一堆像 isNumber()、isEmpty()、isValidLength() 等函數。我們可以只提供一個 validate() 函數，讓它處理驗證細節。

---

結論

策略模式是使用最廣泛的模式之一，因為它可以在很多地方實現。它通過抽象演算法細節來降低耦合度。我希望這篇文章有幫助。如果這篇文章中的任何內容或我的理解有錯誤，請讓我知道，謝謝！

參考資料

• 策略模式 - 維基百科
• 學習 JavaScript 設計模式
• 設計模式和重構