Decorator裝飾器模式怎么應用

本篇內容主要講解“Decorator裝飾器模式怎么應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Decorator裝飾器模式怎么應用”吧!

Decorator（裝飾器模式）

Decorator（裝飾器模式）屬于結構型模式，是一種拓展對象額外功能的設計模式，別名 wrapper。

意圖：動態地給一個對象添加一些額外的職責。就增加功能來說，Decorator 模式相比生成子類更為靈活。

舉例子

如果看不懂上面的意圖介紹，沒有關系，設計模式需要在日常工作里用起來，結合例子可以加深你的理解，下面我準備了三個例子，讓你體會什么場景下會用到這種設計模式。

相框

照片 + 相框 = 帶相框的照片，這背后就是一種裝飾器模式：照片具有看的功能，相框具有裝飾功能，在你看照片的基礎上，還能看到精心設計的相框，增加了美感，同時相框還可以增加照片的保存時間與安全性。

相框與照片是一種組合關系，任何照片都可以放到相框中，而不是每個照片生成一個特定的相框，顯然，組合的方式更加靈活。

帶有緩存的文件讀寫

假設我們有一個類 FileIO 用來讀寫文件，但是沒有緩存能力，此時是新建一個 CachedFileIO 子類好，還是創建一個 CachedIO?

一眼看上去好像 CachedFileIO 用起來更方便，而 CachedIO 的用法是 new CachedIO(new FileIO()) 稍微麻煩一些，但如果我們增加一個網絡讀寫類 NetworkIO，一個數據庫讀寫類 DBIO 呢？

顯然，繼承的方式會使子類數量極速膨脹，而組合的方式則非常靈活，生成一個支持緩存的網絡讀寫器，只需要 new CachedIO(new NetworkIO()) 即可，這就是組合靈活的地方。

當然，為了實現這個能力，CachedIO 需要與 FileIO、CachedFileIO、CachedIO 繼承自同一個類，具備相同的接口。

搭建平臺的組件 wrapper

裝飾器模式別名也叫 wrapper，wrapper 也經常在前端搭建場景中遇到，當搭建平臺加載一個組件時，希望拓展其基礎能力，一般會使用 wrapper 層對組件進行嵌套，wrapper 層就是在不改變 API 的基礎上，對第三方組件進行增強。

意圖解釋

意圖：動態地給一個對象添加一些額外的職責。就增加功能來說，Decorator 模式相比生成子類更為靈活。

不同于繼承，組合可以在運行時進行，所以稱之為 “動態添加”，這里的 “額外職責” 泛指一切功能，比如在按鈕點擊時進行一些 log 日志的打印，在繪制 text 文本框時，額外繪制一個滾動條和邊框等等。

“就增加功能來說，Decorator 模式相比生成子類更為靈活” 這句話的含義是，組合比繼承更靈活，當可拓展的功能很多時，繼承方案會產生大量的子類，而組合可以提前寫好處理函數，在需要時動態構造，顯然是更靈活的。

結構圖

ConcreteComponent 指的是需要被裝飾的組件，可以看到，裝飾器 Decorator 與他都繼承同一個類，這樣能保證 API 的一致，才保證無論裝飾多少層，始終符合 Component 類型。

裝飾器如果有多種，就要將 Decorator 申明為抽象類，ConcreteDecoratorA、ConcreteDecoratorB 分別實現它們，如果只有一種裝飾器，可以退化到 Decorator 自身就是一種實現。

代碼例子

下面例子使用 typescript 編寫。

class Component {

  // 具有點擊事件

  public onClick = () => {}

}

class Decorator extends Component {

  private _component

  constructor(component) {

    this._component = component

  }

  public onClick = () => {

    log('打點')

    this._component.onClick()

  }

}

const component = new Component()

// 一個普通的點擊

component.onClick()

const wrapperComponent = new Decorator(component)

// 一個具有打點功能的點擊

wrapperComponent.onClick()

其實方法很簡單，通過組合，我們得到了一個能力更強的組件，而實現的方式就是利用構造函數保存組件實例，并在復寫函數時，增加一些增強實現。

弊端

裝飾器的問題也是組合的問題，過多的組合會導致：

組合過程的復雜，要生成過多的對象。

包裝器層次增多，會增加調試成本，我們比較難追溯到一個 bug 是在哪一層包裝導致的。

到此，相信大家對“Decorator裝飾器模式怎么應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！