装饰器模式
介绍
- 为对象添加新功能
- 不改变其原有的结构和功能
可以借助第三方库 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示例
只读装饰器示例
日志打印示例
设计原则验证
- 将现有对象和装饰器进行分离,两者独立存在
- 符合开放封闭原则