class Subject {//发布者 ①
constructor(state){//②
this.state = state//监听的值
this.obsovers = []//观察者列表
}
getter(){//获得值 ③
return this.state
}
setter(state){//设置值 ④
this.state = state
this.notify()
}
notify(){//通知各个观察者 ⑤
this.obsovers.forEach((obsover)=>{
obsover.update()
})
}
addToAbsovers(o){//添加观察者 ⑥
this.obsovers.push(o)
}
}
class Obsover {//订阅者 ⑦
constructor(name, subject){
this.subject = subject //⑧
this.name = name
this.subject.addToAbsovers(this) //⑨
}
update(){//订阅者收到消息后的处理方法 ⑩
console.log(`对象 ${this.name} 设置值为 ${this.subject.getter()}`)
}
}
let subject = new Subject()
let obj1 = new Obsover('obj1',subject)
let obj2 = new Obsover('obj2',subject)
let obj3 = new Obsover('obj3',subject)
let obj4 = new Obsover('obj4',subject)
setTimeout(()=>{
subject.setter(30)
},2000)
执行思路:
①.定义发布者
②.初始化需要监听的值,以及订阅者列表
③.定义获得值的方法
④.定义改变值的方法
⑤.改变的同时触发通知方法(在此调用每个订阅者的更新方法)
⑥.定义添加订阅者的方法,需要添加时调用
⑦.定义订阅者
⑧.订阅者初始化接收发布者的实例对象
⑨.在初始化中添加自己到订阅者列表
⑩.定义更新方法,每次触发时得到发布者更新的值