簡單的設計模式：裝飾者模式

如果你不知道這個系列是關於什麼的，這裡是系列第一篇文章的連結。該文章的第一部分是關於這個系列的動機和介紹。我希望它能幫助你更好地理解這個系列的目標。

裝飾者模式

裝飾者模式是一個常見且有用的模式。當你有多個物件、函數或視圖時，你可以創建一個基本形式，並用額外的功能（裝飾器）來裝飾這個基本形式。

好的，我知道這很棒，但要怎麼做呢？裝飾者類似於高階函數的概念。裝飾者將基本形式作為參數，對其進行一些裝飾，然後返回它。

範例

你想要建立一個按鈕 UI。這個按鈕有幾個獨立的行為，如：

1. 懸停彈出資訊。
2. 動作確認。
3. 觸發一些特定的追蹤代碼。

你可以這樣設計你的按鈕：

var PopoverButton = new PopoverDecorator(new Button())
// 或者用 React 風格
// const PopoverButton = withPopover(Button);

var PopoverActionConfirmButton = new PopoverDecorator(new ActionConfirmDecorator(new Button()))

// 等等...

PopoverDecorator 類別將任何 Button 作為參數，並返回裝飾過的按鈕，ActionConfirmDecorator 也是如此。這種方法增加了 Button 的內聚性。通過分離基本形式的特定行為，你可以在未來輕鬆地重用和擴展這些功能。

這是一個多麼優雅的模式，不是嗎？

結論

這篇文章是對裝飾者模式的非常簡要介紹。它涵蓋了裝飾者模式的核心思想。如果你想了解更多，可以查看以下參考資料部分。

裝飾者模式是我最喜歡的模式之一。高階函數是一個非常強大的概念。我在我的專案中經常使用它來設計 React 組件和工具函數，我希望這能讓我的同事更開心。謝謝閱讀！

參考資料

• 設計模式與重構 - 設計模式與重構文章和指南。為新手提供的設計模式影片教學。簡單描述…