JavaScript观察者模式实现-js教程-PHP中文网

JavaScript观察者模式实现

狼影

发布： 2025-10-23 09:00:02

原创

1033人浏览过

观察者模式通过主题与观察者解耦实现状态自动通知，JavaScript中可用于事件处理与数据绑定。

javascript观察者模式实现

观察者模式是一种设计模式，用于在对象之间定义一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知。在JavaScript中，这种模式常用于事件处理、数据绑定等场景。下面是一个简洁而实用的观察者模式实现。

核心概念说明

观察者模式包含两个主要角色：

主题（Subject）：维护一组观察者，提供添加、删除和通知观察者的方法。
观察者（Observer）：订阅主题，一旦主题状态变化，就会收到通知并作出响应。

基本实现代码

以下是一个基于类的JavaScript实现：

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

  // 添加观察者
  addObserver(observer) {
    if (typeof observer.update === 'function') {
      this.observers.push(observer);
    }
  }

  // 移除观察者
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

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

// 观察者类（可选，只是一个有update方法的对象）
class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} received:`, data);
  }
}

登录后复制

使用示例

下面是具体的调用方式：

立即学习“Java免费学习笔记（深入）”；

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

// 创建主题
const subject = new Subject();

// 创建观察者
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

// 注册观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发布通知
subject.notify('Hello from the subject!');

// 可以动态移除
subject.removeObserver(observer1);
subject.notify('Second message');

登录后复制

输出结果为：

Observer 1 received: Hello from the subject! Observer 2 received: Hello from the subject! Observer 2 received: Second message