设计模式之外观模式

外观模式

// 这个是外观模式
class Add {
    add(a: number, b: number) {
        return a + b;
    }
}

class Reduce {
    reduce(a: number, b: number) {
        return a - b;
    }
}

class Ride {
    ride(a: number, b: number) {
        return a * b;
    }
}

class Except {
    except(a: number, b: number) {
        return a / b;
    }
}

// 这个是 给外部使用的类
class Calculator {
    addObj;
    reduceObj;
    rideObj;
    exceptObj;
    constructor() {
        this.addObj = new Add();
        this.reduceObj = new Reduce();
        this.rideObj = new Ride();
        this.exceptObj = new Except();
    }
    // 然后调用这些方法
    add1(a: number, b: number) {
        return this.addObj.add(a, b);
    }

    reduce1(a: number, b: number) {
        return this.reduceObj.reduce(a, b);
    }

    ride1(a: number, b: number) {
        return this.rideObj.ride(a, b);
    }

    except1(a: number, b: number) {
        return this.exceptObj.except(a, b);
    }
}

let _calculator =  new Calculator();

console.log(_calculator.add1(1,2))

外观模式可以看一下, 下面的图片
外观模式： 该模式就是把一些复杂的流程封装成一个接口提供给外部用户更简单的使用

观察者模式

class Star {
    objName;
    state;
    observers: any = [];
    constructor(name: string) {
        this.objName = name;
        this.state = "";
        this.observers = [];  //粉丝数目
    }

    getState() {
        return this.state;
    }

    setState(state: string) {
        this.state = state;
        this.notifyAllObserver();
    }
    // 增加一个新的观察者
    attach(observer: any) {
        this.observers.push(observer);
    }
    notifyAllObserver() {
        if(this.observers.length > 0) {
            this.observers.forEach((items: any) => items.updated())
        }
    }
}

class Fan {
    objName;
    objStar;
    constructor(name: string, star: Star) {
        this.objName = name;
        this.objStar = star;
        this.objStar.attach(this);
    }
    updated() {
        console.log(`我是粉丝${this.objName}, 我也是${this.objStar.getState()}`);
    }
}

let star = new Star("明星");
let fans = new Fan("1号", star);


star.setState("绿色");
console.log("明星", star.getState());

其实观察者模式跟我们的发布订阅 模式差不多了,都是去监听 被观察者的值 做出相应的变化

发布-订阅模式 去这里