关于前端:精读设计模式-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 层就是在不扭转 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 是一个通明的包装，只有保障包装的透明性，就能够最大限度施展装璜器模式的劣势。

最初总结一个装璜器利用图：

探讨地址是：精读《设计模式 – Decorator 装璜器模式》· Issue #286 · dt-fe/weekly

如果你想参加探讨，请点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

关于前端:精读设计模式-Decorator-装饰器模式

Decorator（装璜器模式）

举例子

相框

带有缓存的文件读写

搭建平台的组件 wrapper

用意解释

结构图

代码例子

弊病

总结