设计模式-观察者模式

一棵白菜
108 阅读2分钟

前言

观察者模式（Observer Pattern）是一种行为型设计模式，用于定义对象之间的一种一对多的依赖关系。当一个对象的状态发生变化时，所有依赖于它的对象都会自动收到通知并更新。这种模式常用于实现事件处理系统。

image.png

观察者模式的基本组成部分：

  1. 主题（Subject）：也称为被观察者（Observable），它是维护观察者列表的对象。当它的状态发生变化时，会通知所有注册的观察者。
  2. 观察者（Observer）：观察者对象会在被观察者的状态变化时收到通知。观察者可以有多个，每个观察者可以根据收到的通知更新自己的状态。

工作流程：

  1. 观察者向主题对象注册，表示自己想要接收通知。
  2. 当主题对象的状态发生变化时，它会遍历所有注册的观察者并通知它们。
  3. 观察者接收到通知后，可以选择是否更新自己的状态

实现

创建主题对象

function Subject() {
  this.observers = [];
}

Subject.prototype.addObserver = function (observer) {
  this.observers.push(observer);
};

Subject.prototype.removeObserver = function (observer) {
  const removeIndex = this.observers.indexOf(observer);
  this.observers.splice(index, 1);
};

Subject.prototype.notify = function (message) {
  this.observers.forEach((ob) => ob.action(message));
};

创建观察者对象

class Observer {
  constructor(name) {
    this.name = name;
  }
  action(data) {
    console.log(`Received data: ${JSON.stringify(data)}`, `Name: ${this.name}`);
  }
}

使用

const subject = new Subject();
const ob1 = new Observer("ob1");
const ob2 = new Observer("ob2");
subject.addObserver(ob1);
subject.addObserver(ob2);

subject.notify("hello world");

总结

优点：

  • 解耦了观察者与被观察者，使得它们可以独立地变化。
  • 增加观察者和被观察者对象很容易，不需要修改现有的代码。

缺点：

  • 如果观察者对象过多，通知所有观察者会消耗较多资源。
  • 观察者和被观察者之间的依赖关系可能导致系统难以维护和调试。

使用场景：

  • 当一个对象的改变需要同时改变其他对象，且不知道具体有多少对象需要改变时。
  • 当一个对象的状态变化需要通知其他对象，而这些对象可能动态变化时。

在实际开发中，观察者模式广泛应用于事件监听、推送通知、订阅-发布系统等场景。

avatar
文章
阅读
粉丝