javascript设计模式---观察者模式

Posted 2021-07-07 哈娄

观察者模式

• 观察对象状态，一旦对象发生变化，观察者定义的动作行为被触发（需要一个观察者角色，需要一个被观察者角色。 --------------主动权在被观察者手中）

大体思路：

1. 观察者进行定义方法
2. 被观察者改变状态，触发观察者的方法 

观察者：

class Observer {
    constructor(name, fn=() => {}) {
        this.name=name
        this.fn = fn
    }
}

const bzr = new Observer('班主任', (state) => {console.log(`因为${state}找你家长`)})

被观察者

class Subject {
    constructor(state) {
        this.state = state
        this.observers = []
    }
    setState(state) {
        this.state = state
        this.observers.forEach(item => {
            item.fn(state)
        })
    }
    addObservers(obs) {
        this.observers.filter(item => item!== obs);
        this.observers.push(obs)
    }
    delObservers(obs) {
         this.observers.filter(item => item!== obs);
    }
}

const xiaoming = new Subject('学习')
xiaoming.addObservers(bzr)

xiaoming.setState('玩') //触发观察者的监听函数，打印出 因为玩找你家长