观察者模式/发布订阅者模式#1
2020-05-29 本文已影响0人
IamaStupid
观察者模式/发布订阅者模式:
一个或多个观察者对目标的状态感兴趣,通过将自己依附在目标对象上以便注册所感兴趣的内容。目标状态发生改变,会发送一个通知消息,调用每个观察者的更新方法。当观察者不再对目标状态感兴趣时,他们可以简单将自己从中分离。
使用观察者模式的好处:
支持简单的广播通信,自动通知所有已经订阅过的对象。
页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
JS里对观察者模式的实现是通过回调来实现的
观察者模式/发布订阅者模式 很多时候都是相等的,但是它们还是不一样的。
观察者模式
class Subject {
constructor () {
this.subs = []
}
// 用来把 主题 和 观察者对象 关联的 方法,(订阅操作)
addObserve (observer) {
this.subs.push(observer)
}
// 把 主题 和 观察者对象 剥离关联的 方法,(退订操作)
removeObserve (observer) {
// 这里加点代码,比如判断参数是不是Observer的示例
// 比如判断数组中存不存在参数
this.subs.forEach( (ob, i) => {
console.log('removeObserve:', i)
if (ob === observer) {
this.subs.splice(i, 1)
return;
}
})
}
// 主题发生改变, 用来通知观察者对象的方法
notify () {
this.subs.forEach( observe => {
observe.update()
})
}
}
class Observe {
constructor (callback) {
this.callback = callback;
}
// 主题改变,观察者做出变化的方法
update () {
this.callback()
}
}
let subject = new Subject()
let w1 = new Observe(() => {
console.log('1231123')
})
subject.addObserve(w1)
let w2 = new Observe(() => {
console.log('abcabc')
})
subject.addObserve(w2)
let w3 = new Observe(() => {
console.log('uuuuuuuu123esd')
})
subject.addObserve(w3)
subject.removeObserve(w2)
// 假如subject发生了改变
subject.notify()