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

注释很详细，直接上代码

特色和用途：

扩展性：装饰器模式通过一种对客户端透明的方式来扩展对象的功能，而无需修改现有代码。这使得你可以逐步添加或修改功能，而不会影响到已有的代码。
简化代码：装饰器模式避免了创建大量相关子类的情况，通过组合和委托来达到增加功能的目的，从而使代码更加清晰和易于维护。
灵活性：可以根据需要动态地、不限量地使用多个装饰器来包装对象。每个装饰器独立工作，不依赖于其他装饰器的存在。
符合开闭原则：装饰器模式支持开放-封闭原则，即可以在不修改现有代码的情况下，引入新的装饰器来扩展功能。

实际应用：

动态地给对象添加功能：例如在运行时对对象添加日志、验证、缓存等功能，而不需要修改原始类的代码。
避免创建大量子类：通过装饰器可以避免为每一种组合创建一个子类，从而简化类的继承结构。

装饰器模式是一种优雅的方式来动态地增加对象的功能，同时保持代码的灵活性和可维护性

源码：

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body></body><script>// 定义自行车接口class Bicycle {assemble() {return "Bicycle";}}// 装饰器基类class BicycleDecorator {constructor(bicycle) {this.bicycle = bicycle;}assemble() {return this.bicycle.assemble();}}// 具体的装饰器类 - 前灯class HeadlightDecorator extends BicycleDecorator {constructor(bicycle) {super(bicycle);}assemble() {return `${this.bicycle.assemble()} with Headlight`;}}// 具体的装饰器类 - 尾灯class TaillightDecorator extends BicycleDecorator {constructor(bicycle) {super(bicycle);}assemble() {return `${this.bicycle.assemble()} with Taillight`;}}// 具体的装饰器类 - 铃铛class BellDecorator extends BicycleDecorator {constructor(bicycle) {super(bicycle);}assemble() {return `${this.bicycle.assemble()} with Bell`;}}const basicBicycle = new Bicycle();// 添加前灯const bicycleWithHeadlight = new HeadlightDecorator(basicBicycle);console.log(bicycleWithHeadlight.assemble());// 添加尾灯const bicycleWithTaillight = new TaillightDecorator(basicBicycle);console.log(bicycleWithTaillight.assemble());// 添加铃铛const bicycleWithBell = new BellDecorator(basicBicycle);console.log(bicycleWithBell.assemble());// 同时添加多种装饰器const bicycleWithAllAccessories = new BellDecorator(new TaillightDecorator(new HeadlightDecorator(basicBicycle)));console.log(bicycleWithAllAccessories.assemble());</script>
</html>