Typescript 桥接模式

标签： 前端 设计模式 桥接模式 typescript bridge

---

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

bridge.jpg

桥接模式：桥接模式是将抽象部分与它的实现部分分离，使它们都可以独立地变化。它是一种对象结构型模式，又称为柄体(Handle and Body)模式或接口(Interfce)模式。

实际场景

我们在现实中描述物体通常是多个维度的。例如我们描述衣服，会描述白色的短袖、黑色的毛衣、黄色的长袖...
转换成代码，他们的组合种类繁多。
通过观察，我们发现其中主要有两种类别。

• 衣服的类型（短袖/长袖/毛衣/...）
• 颜色（白/黑/红/黄/...）

将两种类别抽象出来，再由其自由组合，这样我们代码的可维护性和拓展性就会大大增强。
这就引出了桥接模式（Bridge）

桥接模式结构

桥接模式主要包含如下几个角色：
Abstraction：抽象类。
RefinedAbstraction：扩充抽象类。
Implementor：实现类接口。
ConcreteImplementor：具体实现类 。

桥接模式的例子

• 类型和颜色的枚举

/* clothes-type-enum.ts */
enum ClothesTypeEnum {
    Vest,
    Shirt,
    Jacket,
    Hoodies,
    Sweater,
}
export default ClothesTypeEnum

/* color-enum.ts */
enum ColorEnum {
    White,
    Red,
    Yellow,
    Black
}
export default ColorEnum

• 类型的抽象类

/* abstract-clothes-class.ts */
import ColorInterface from './color-interface';

export default abstract class AbstractClothesClass {
    protected color: ColorInterface;

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

    public abstract getClothes: Function;
}

• 类型的扩充抽象类

/* jacket-producer.ts */
import AbstractClothesClass from '../abstract-clothes-class';

export default class JacketProducer extends AbstractClothesClass {
    public getClothes() {
        let color = this.color.getColor();
        console.log(color + 'jacket');
    }
}

/* shirt-producer.ts */
import AbstractClothesClass from '../abstract-clothes-class';

export default class ShirtProducer extends AbstractClothesClass {
    public getClothes() {
        let color = this.color.getColor();
        console.log(color + 'shirt');
    }
}

• 颜色的接口

/* color-interface.ts */
export default interface ColorInterface {
    getColor: () => {}
}

• 颜色的实现类

/* black-color.ts */
import ColorInterface from '../color-interface';

export default class BlackColor implements ColorInterface {
    public getColor() {
        return 'black';
    }
}

/* white-color.ts */
import ColorInterface from '../color-interface';

export default class WhiteColor implements ColorInterface {
    public getColor() {
        return 'white';
    }
}

• 桥接具体实现类

/* bridge.ts */
import AbstractClothesClass from './abstract-clothes-class';
import JacketProducer from './clothes-producers/jacket-producer';
import ShirtProducer from './clothes-producers/shirt-producer';
import ClothesTypeEnum from './clothes-type-enum';
import ColorEnum from './color-enum';
import BlackColor from './color-types/black-color';
import WhiteColor from './color-types/white-color';

export default class CloseShop {
    private static _instance: CloseShop;

    public static get instance() {
        if (!this._instance) {
            this._instance = new CloseShop();
        }
        return this._instance;
    }

    public getClothes(type: ClothesTypeEnum, color: ColorEnum) {
        let clothes: AbstractClothesClass;
        switch (type) {
            case ClothesTypeEnum.Jacket:
                clothes = new JacketProducer();
                break;
            case ClothesTypeEnum.Shirt:
                clothes = new ShirtProducer();
                break;
            default:
                throw new Error('not support type' + type)
        }
        switch (color) {
            case ColorEnum.White:
                clothes.setColor(new WhiteColor());
                break;
            case ColorEnum.Black:
                clothes = new ShirtProducer();
                clothes.setColor(new BlackColor());
                break;
            default:
                throw new Error('not support color' + color)
        }
    }
}

• 产品调用

CloseShop.instance.getClothes(ClothesTypeEnum.Shirt, ColorEnum.Black);

桥接模式的利弊

利：
桥接模式把抽象和实现隔离开，有助于独立的管理软件的各个部分，bug也更容易查找，发生严重故障的可能性也减少了。
弊：
在我们看来，桥接模式没有什么真正的缺点，他会把抽象和实现解耦，提高系统的模块化程度。但是注意不要对该模式滥用而引发过度设计。