Typescript 装饰者模式（Decorator）

标签： 前端 设计模式 装饰者模式 typescript Decorator Wrapper

---

如果下面的代码你能轻易阅读，那么你已经熟悉装饰者模式，可以接着学习其他的设计模式。

装饰者模式

装饰者模式: 装饰模式是在不必改变原类文件和使用继承的情况下，动态地扩展一个对象的功能。它是通过创建一个包装对象，也就是装饰来包裹真实的对象。

实际场景

我们购买一件白色/黑色的衣服。购买的主体是一件衣服。而白色和黑色是衣服的装饰，就像是条纹的/碎花的。
这时我们常常把白色/黑色，条纹/碎花作为装饰器装饰在衣服上。
如果需要为类增添特性或者职责，而从该类派生子类的解决办法并不实际的话，就应该使用装饰者模式。

装饰者模式的结构

• 装饰对象和真实对象有相同的接口。这样客户端对象就能以和真实对象相同的方式和装饰对象交互。
• 装饰对象包含一个真实对象的引用（reference）
• 装饰对象接受所有来自客户端的请求。它把这些请求转发给真实的对象。
• 装饰对象可以在转发这些请求以前或以后增加一些附加功能。这样就确保了在运行时，不用修改给定对象的结构就可以在外部增加附加的功能。在面向对象的设计中，通常是通过继承来实现对给定类的功能扩展。

装饰者模式的例子

制作一件有颜色的衣服
衣服的接口

/* i-clothes.ts */
export default interface IClothes {
    setColor: (color) => any;
    setType: (type) => any;
}

一个衣服的类实现衣服的接口，一个修改颜色的类实现衣服的接口

/* clothes-class.ts */
import IClothes from './i-clothes';

export class Clothes implements IClothes {
    public color: string;
    public type: string;

    public setColor (color) {
        this.color = color;
    }

    public setType (type) {
        this.type = type;
    }
}

export class ChangeColor implements IClothes {
    public clothes: IClothes;

    constructor (clothes: IClothes) {
        // 对原对象进行'引用'
        this.clothes = clothes;
    }

    public setColor (color) {
        console.log('will be overridden')
    }

    public setType (type) {
        // 将操作转发给原对象
        this.clothes.setType(type);
    }
}

两个颜色的类继承衣服的接口

/* color-class.ts */
import { ChangeColor } from './clothes-class';
import IClothes from './i-clothes';

export class WhiteClothes extends ChangeColor {
    constructor (clothes: IClothes) {
        super(clothes);
    }

    public setColor () {
        this.clothes.setColor('white');
    }

    // 在装饰类中添加更多方法
    public whiteFun () {
        console.log('This is white function');
    }
}

export class BlackClothes extends ChangeColor {
    constructor (clothes: IClothes) {
        super(clothes);
    }

    public setColor () {
        this.clothes.setColor('black');
    }

    public blackFun () {
        console.log('This is black function')
    }
}

客户端的实现

/* client.ts */
import { Clothes } from './clothes-class';
import { BlackClothes, WhiteClothes } from './color-class';
import IClothes from './i-clothes';

class Client {
    public getBlackClothesAndWhiteClothes () {
        const clothes: IClothes = new Clothes();
        const whiteClothes: WhiteClothes = new WhiteClothes(clothes);
        whiteClothes.setColor();
        whiteClothes.whiteFun();
        const blackClothes: BlackClothes = new BlackClothes(clothes);
        blackClothes.setColor();
        blackClothes.blackFun();
    }
}

new Client().getBlackClothesAndWhiteClothes();

当衣服是白色的时候会拥有白色衣服的特性和方法，当衣服变成黑色的时候，会拥有黑色衣服的特性和方法。

装饰者模式的利弊

优点

• Decorator模式与继承关系的目的都是要扩展对象的功能，但是Decorator可以提供比继承更多的灵活性。
• 通过使用不同的具体装饰类以及这些装饰类的排列组合，设计师可以创造出很多不同行为的组合。

缺点

• 这种比继承更加灵活机动的特性，也同时意味着更加多的复杂性。
• 装饰模式会导致设计中出现许多小类，如果过度使用，会使程序变得很复杂。
• 装饰模式是针对抽象组件（Component）类型编程。但是，如果你要针对具体组件编程时，就应该重新思考你的应用架构，以及装饰者是否合适。当然也可以改变Component接口，增加新的公开的行为，实现“半透明”的装饰者模式。在实际项目中要做出最佳选择。