深圳幻海软件技术有限公司 欢迎您!

行为型:观察者模式

2023-03-30

阅读目录定义生活中的例子模拟观察者模式 小结回到目录定义观察者模式属于行为型模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。一种一对多的关系中一称为被观察者也叫目标对象Subject而多则称为观察者对象Observer观察
回到目录

定义

观察者模式属于行为型模式,它定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。

一种一对多的关系中一称为被观察者也叫目标对象Subject多则称为观察者对象Observer

观察者模式中通常有两个模型,一个观察者(observer)和一个被观察者(Observed)。从字面意思上理解,即被观察者发生某些行为或者变化时,会通知观察者,观察者根据此行为或者变化做出处理。

特征:

    1. 一个目标者对象 Subject,拥有方法:添加、删除、通知 Observer
    2. 多个观察者对象 Observer,拥有方法:接收 Subject 状态变更通知并处理;
    3. 目标对象 Subject 状态变更时,通知所有 Observer
回到目录

生活中的例子

  如我们关注了某某订阅号,当订阅号有新的文章时,我们都收到了推文,这个就是最简单的观察者模式。

回到目录

模拟观察者模式

/*
定义:
观察者模式是一种对象行为模式。
它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。
js 没有抽象类、接口 所以一般结构如下:
subject 目标 or 被观察者:
add: 把观察者注册进来
remove: 移除观察者
notify: 遍历注册进来的观察者,调用他们的update
Observer 观察者:
update: 自己提供的更新方法
*/
// 被观者、目标
class Subject {
constructor (data) {
this.observers = []
this.data = data
}
addObserver (data) {
this.observers.push(data)
}
removeObserver (data) {
this.observers = this.observers.filter(t => t !== data)
}
notify (...data) {
this.observers.forEach(observer => observer.update(...data))
}
// 你的业务代码
setData (data) {
this.data= data;
this.notify(data)
}
}
// 观察者
class Observer {
constructor (name) {
this.name = name
}
update (data) {
console.log(`${this.name}, 我执行了,${data}发生了变化`)
}
}
const sub = new Subject('我是被观察')
const ob1 = new Observer('我是ob1')
const ob2 = new Observer('我是ob2')
const ob3 = new Observer('我是ob3')
sub.addObserver(ob1)
sub.addObserver(ob2)
sub.addObserver(ob3)
sub.notify('现在开始发送第一个通知')
console.log('**************看看ob1 是不是没有收到第二个通知**************')
sub.removeObserver(ob1)
sub.notify('现在开始发送第二个通知')
回到目录

 小结

  1. 观察者模式用来解决对象之间存在一对多关系的交互行为
  2. 观察者模式中,被观察者与观察者解藕没有很彻底,且在被观察者中观察者要提供统一的更新方法,当然这也是要看具体的应用场景,在某些模块本身就是存在关联,那用观察者模式也没问题。
  3. 发布订阅虽然与观察者模式解决的问题的思路差不多,但是这两个还是有区别的。  


如果您觉得阅读本文对您有帮助,请点一下推荐按钮,您的推荐将是我最大的写作动力,欢迎各位转载!