天天看點

JavaScript設計模式之橋接模式

概念

  • 用于把抽象化和實作化解耦
  • 使得二者可以獨立變化

應用場景

我現在有一個畫圖并且将畫好的圖塗上顔色的需求!

如下圖所示:沒有将畫圖和填充顔色分離開,這樣就不是橋接模式

JavaScript設計模式之橋接模式

非橋接模式代碼實作:

JavaScript設計模式之橋接模式

上面那種做法如果再畫新的圖并且塗上顔色代碼看起來就會很亂,是以下面改為橋接模式,即将畫圖和塗顔色分離開來。

如下面示例:畫圖和填充顔色分離開,是橋接模式。

JavaScript設計模式之橋接模式

橋接模式代碼實作:

JavaScript設計模式之橋接模式

設計原則驗證:

  • 抽象和實作分離,解耦
  • 符合開放封閉原則

繼續閱讀