iT邦幫忙

2022 iThome 鐵人賽

DAY 14
0
自我挑戰組

文科生轉職React前端工程師的菜鳥學習日記系列 第 14

[Day14] 網站開發常見的design pattern有哪些?Part II(策略模式、裝飾器模式)

  • 分享至 

  • xImage
  •  

上一篇分享到網站開發最常使用design pattern中的兩種Observer觀察者模式和Singleton單例模式,今天來介紹另外兩種也是網站開發常見的程式設計模式。

Strategy策略模式

指對象有某個行爲,但是在不同的場景中,該行爲有不同的實現算法。策略模式讓系統在運行時選擇一個特定的策略來實現一個操作。
Strategy_pattern
在這種情況下,實現將根據客戶端在運行時決定。
客戶端不再尋找實現,而是委託給策略接口,然後策略找到正確的實現。一種常見的用途是付款金流處理系統。
例如:我們可以只允許客戶使用信用卡結帳的購物車,但就會失去想要使用其他付款方式的客戶。
策略設計模式可以讓我們將支付方式與結帳流程分開,這意味著我們可以在不更改購物車或結帳流程中的任何程式碼的情況下增加或更新策略,讓網站更具有靈活性與延伸性。

Decorator裝飾器模式

是物件導向程式領域中,一種動態地往一個類別中添加新的行為的設計模式。就功能而言,裝飾器模式相比生成子類別的方法更為靈活,這樣可以給某個對象而不是整個類別添加一些功能。裝飾器模式允許我們動態地向對象添加額外的功能。
decorator_pattern
裝飾器模式有哪些例子呢?
大家有沒有使用過foodpanda或uber eat在網路訂過食物呢?如果有,你可能已經遇到過裝飾器模式。例如要購買漢堡或手搖飲時,想要添加辣椒或是其他配料(手搖飲的配料:珍珠或椰果),則該網站不會將這些額外需求添加到當前用戶嘗試訂購的每個產品實例中,而是外加在外面,這種模式就叫裝飾器模式,它允許我們動態更改基底而不影響基底本身或任何其他類別的產品。不必擔心實現我們不知道的功能。

參考資料:
維基百科_策略模式
維基百科_修飾/裝飾者模式
Example Design Patterns
4 Design Patterns You Should Know for Web Development: Observer, Singleton, Strategy, and Decorator

這是我第一次參加鐵人賽,希望透過這30天督促自己脫離菜味,內容預計會有JS基礎,API串接,用React完成一個可以新增、修改、刪除、查詢的網站,如果有錯誤歡迎指正,我會盡快修改。


上一篇
[Day13] 網站開發常見的design pattern有哪些?Part I(觀察者模式、單例模式)
下一篇
[Day15] 2022三大前端框架庫,使用量排行誰勝出(Angular/React/Vue)?
系列文
文科生轉職React前端工程師的菜鳥學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言