js之观察者模式

首先定义一个主题,用于接收状态变化,并通知每个观察者

// 主题,接收状态变化,并通知每个观察者
        class Sub{
            constructor(){
                this.state = 0
                this.observers = []
            }
            // 获取状态
            getState (){
                return this.state
            }
            // 设置状态
            setState(state){
                this.state = state
                this.notify()
            }
            // 新增观察者
            attach(observer){
                this.observers.push(observer)
            }
            // 通知每个观察者
            notify(){
                this.observers.forEach(observer =>{
                    observer.update()
                })
            }
        }

然后再定义一个观察者,里面有一个用于更新状态的方法,主要职责:等待被通知

 // 观察者,等待被通知
        class Observe{
            constructor(name,sub){
                this.name = name
                this.sub = sub
                this.sub.attach(this)
            }
            
            update(){
                console.log(`${this.name} 观察者更新了state:${this.sub.getState()}`);
            }
        }


		// 实例化一个主题
		let s = new Sub()
		// 添加观察者实例
		let o1 = new Observe('o1',s)
		// 设置状态
		s.setState(2)


发布者 里面有 哪些订阅者, 订阅者订阅时,会追加订阅者信息到发布者。
当发布者改变信息(状态)同步通知订阅者。
在这里插入图片描述


版权声明:本文为u013400314原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。