【JS设计模式】房子装修——装饰者模式

99 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情

装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法)使得原有对象满足用户更加复杂的需求。

假设页面上有一个按钮,原来的需求是点击它的时候会执行事件A,但是现在新需求来了,希望在原有的基础上,再添加一些新的功能。一般情况下,我们面对这种情况的解决思路应该都是直接去修改事件A吧,但是这个时候就有两种情况是需要我们考虑进去:

  1. 第一种就是: 假如我不止事件A,我还有事件BCDEFGHJ...很多个事件都要添加不同的新功能呢?一个一个修改这些事件是很麻烦的。
  2. 第二种就是:假如你并不是事件A的开发者,你贸然去修改事件A,万一崩了呢?不但新功能没添加好,反而连原来的功能都炸了,估计领导会花一天时间来叼你吧。

考虑到上面的两种情况,我们可以使用装饰者模式来解决此类需求。创建一个 装饰者函数

code.png

装饰者模式适用于 在不了解原有功能的基础上对功能进行拓展,这是对原有功能的一种增强与拓展。

装饰者模式与适配器模式的区别

适配器模式中的适配器,是对对象的 内部结构进行重组。 因此,我们必须对其自身结构有足够的了解,才能进行适配。

装饰者模式中的装饰器,是对对象的 一种良性拓展。 它不用了解其具体实现,只是在外部进行了一层封装拓展,属于对 原有功能完整性的一种保护。

装饰者模式与桥接模式的区别

桥接模式中的行为是横向的行为,每个行为之间 无关联

装饰者模式中的行为具有 可叠加性,最后表现出来的结果是一个整体,一个由各个行为叠加而成的整体。