JS设计模式（装饰器模式）

装饰器模式

介绍

• 为对象添加新功能
• 不改变其原有的结构和功能
  可以借助第三方库 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示例

只读装饰器示例

日志打印示例

设计原则验证

• 将现有对象和装饰器进行分离，两者独立存在
• 符合开放封闭原则