JavaScript 常见设计模式----装饰器模式

一、注意事项

• Angular 只为了演示，国内应用不多
• AOP 可以先了解概念，不急于掌握细节和实践

二、概念介绍

装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。动态地给一个对象添加一些额外的职 责。就增加功能来说，装饰器模式相比生成子类更为灵活。 例如，手机上套一个壳可以保护手机，壳上粘一个指环，可以挂在手指上不容易滑落，这就是一种装饰。手机还是那个手机，手机的功能一点都没变，只是在手机的外面装饰了一些其他附加的功能。日常生活中，这样的例子非常多。

三、UML类图

四、代码演示

class Circle {
    draw() {
        console.log('画一个圆形')
    }
}
class Decorator {
    private circle: Circle
    constructor(circle: Circle) {
        this.circle = circle
    }
    draw() {
        this.setBorder() // 装饰
        this.circle.draw() // 原有功能
    }
    private setBorder() {
        console.log('设置边框的颜色')
    }
}

const circle = new Circle()
const decorator = new Decorator(circle)
decorator.draw()

五、符合开放封闭原则

• 装饰器和目标分离，解耦
• 装饰器可自由扩展
• 目标可自由扩展

六、装饰器模式的场景

1. 装饰class method

function readOnly(target: any, key: string, descriptor: PropertyDescriptor) {
    // console.log('target', target)
    // console.log('key', key)
    // console.log('descriptor', descriptor)
    descriptor.writable = false
}

function configurable(val: boolean) {
    return function (target: any, key: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = val
    }
}

class Foo {
    private name = '张三'
    private age = 20

    @readOnly
    getName() {
        return this.name
    }

    @configurable(false)
    getAge() {
        return this.age
    }
}

const f = new Foo()

2.装饰class

3. Angular和React-redux 4. 装饰器模式的场景-AOP面向切面编程

• Aspect Oriented PRogram 面向切面编程
• 业务和系统基础功能分离，和Decorator很配
• AOP和OOP并不冲突

、

总结

• 装饰class 和class method
• 装饰器就是一个函数，结合ES的Decorator语法
• react-redux 和Angular