装饰器模式
介绍
- 为对象添加新功能
- 不改变其原有的结构和功能
可以借助第三方库 core-seractors,具体查看文档
比较常 用的有 readonly(只读)、deprecate(即将要废弃的api)
示例
- 原有接口实现了画一个圆功能,现需要在圆上加一个红色边框
UML类图
- 传统UML类图

- 简化之后UML类图

demo代码
class Circle {
draw() {
console.log('画一个圆')
}
}
class Decorator {
constructor(circle) {
this.circle = circle
}
draw() {
this.circle.draw()
this.setRedBorderCircle(circle)
}
setRedBorderCircle() {
console.log('画一个红色框框')
}
}
// 测试
let circle = new Circle()
circle.draw()
let dec = new Decorator(circle)
dec.draw()
结果

经典使用场景
1、ES7装饰器

装饰原理:

传参写法:

mixin示例

只读装饰器示例

日志打印示例

设计原则验证
- 将现有对象和装饰器进行分离,两者独立存在
- 符合开放封闭原则
本文介绍了装饰器模式的基本概念,展示了如何在不改变原有对象结构的情况下为其添加新的功能。通过一个具体的示例——在画圆的基础上增加红色边框,阐述了装饰器模式的应用方式。文章还探讨了该模式在实际开发中的应用场景。

被折叠的 条评论
为什么被折叠?



