手写观察者模式

本人是JavaScript开发者,以下的示例也是以Javascript举例来说明的。

一、概念

当对象间存在一对多的关系时,使用观察者模式。当被观察的对象发生变化时,其所有的观察者都会收到通知并进行相应的操作。

二、具体例子

比如说,学生小明情绪比较容易波动,所以当小明的情绪发生变化时,父母和老师希望及时获得通知,以便可以采取适当的措施来帮助他。

  • 首先家长和老师都是「观察者」;
  • 小明是「被观察者」;
  • 家长和老师对小明的情绪状态很关注,就需要「订阅事件」;
  • 当被观察者小明情绪发生变化的时候,他会通知所有注册过的观察者;
  • 例如,如果小明感到很开心,他会告诉父母和老师:"我今天心情很好!";如果他感到沮丧,他也会告诉父母和老师:"我今天感觉不太好。"这个过程我们称之为「通知变化」;

三、代码实现

复制代码
// 被观察者,学生
class Subject {
  constructor() {
    this.state = 'happy';
    // 存储所有观察者
    this.observers = [];
  }

  // 新增所有观察者
  add(o){
    this.observers.push(o)
  }

  //获取状态
  getState() {
    return this.state;
  }

  //更新状态并通知所有的观察者
  setState(newStae) {
    this.state = newStae;
    this.notify()
  }

  //通知所有的观察者
  notify() {
    this.observers.forEach(o => o.update(this))
  }

}


// 观察者  父母和老师
class Observer {
  constructor(name) {
    this.name = name;
  }

  update(student) {
    console.log(`亲爱的${this.name},通知您当前学生的状态是:${student.getState()}`);
  }
}

被观察者和观察者都用JS实现了,来看一下具体的应用:

复制代码
    // 被观察者
    const student = new Subject()
    
    // 观察者
    const parent = new Observer('父母')
    const teacher = new Observer('老师')

    student.add(parent)
    student.add(teacher)

    student.setState('Sad')

来看一下控制台打印出来的:

以上就是一个简单的观察者模式。

相关推荐
宁静致远20216 天前
【C++设计模式】第三篇:观察者模式(别名:发布-订阅模式、模型-视图模式、源-监听器模式)
c++·观察者模式·设计模式
xiaopengbc6 天前
在 Python 中实现观察者模式的具体步骤是什么?
开发语言·python·观察者模式
长沙红胖子Qt7 天前
VTK开发笔记(五):示例Cone2,熟悉观察者模式,在Qt窗口中详解复现对应的Demo
qt·观察者模式·vtk·回调
xiaowu08010 天前
观察者模式-红绿灯案例
观察者模式
mask哥12 天前
DP-观察者模式代码详解
java·观察者模式·微服务·设计模式·springboot·设计原则
##学无止境##18 天前
Java设计模式-观察者模式
java·观察者模式·设计模式
我不是程序猿儿23 天前
【C#】观察者模式 + UI 线程调度、委托讲解
观察者模式·ui·c#
饕餮争锋1 个月前
设计模式笔记_行为型_观察者模式
笔记·观察者模式·设计模式
melonbo1 个月前
中介者模式和观察者模式的区别是什么
观察者模式·中介者模式
源代码•宸1 个月前
深入浅出设计模式——行为型模式之观察者模式 Observer
开发语言·c++·经验分享·观察者模式·设计模式·raii