TypeScript中理解观察者模式

观察者模式简单理解为，有一个对象被其他对象“观察”（监听），一旦该对象发生变化，就会通知监听者。

一、图示

观察者模式

二、代码示例

//定义观察者接口协议
interface IObserver{
    nameChanged(newName:string):void;
}

//定义观察者类
class TestObserver implements IObserver{
    nameChanged(newName:string):void {
        console.log('有变化啦' + newName)
    }
}

class Person{
    //定义name属性默认值
    private _name:string = 'hello';
    //定义观察者数组
    observers:Array<IObserver> = new Array<IObserver>();
    //获取name
    get name() {
        return this._name
    }
    //设置name
    set name(value) {
        this._name = value
        //假如说发生了变化
        for(let observer of this.observers) {
            observer.nameChanged(this._name)
        }
    }
    //添加观察者
    addObserver(observer:IObserver) {
        this.observers.push(observer)
    }
}

//实例化一个人
let person = new Person()
//实例化一个观察者
let test = new TestObserver()
//添加观察者
person.addObserver(test)
//原来的名称
console.log(person.name)
//设置名称产生变化
person.name = '哈哈哈'

执行结果

三、参考

观察者