JavaScript设计模式_观察者模式实战-js教程-PHP中文网

JavaScript设计模式_观察者模式实战

夜晨

发布： 2025-11-23 22:35:07

原创

528人浏览过

观察者模式是一种一对多的依赖关系设计模式，当主题对象状态改变时，所有依赖它的观察者都会收到通知并自动更新。其核心角色包括发布者（Subject）和观察者（Observer），发布者维护观察者列表并提供添加、删除及通知接口，观察者实现更新方法以响应通知。JavaScript中可通过类手动实现该模式，常用于事件系统、状态管理和组件通信等场景。例如，自定义事件总线或简化版状态管理均可基于此模式构建。与发布订阅模式相比，观察者模式中发布者与观察者直接关联，耦合度较高，而发布订阅通过中间调度层解耦，更为松散。掌握该模式有助于提升代码的可维护性和模块化程度。

javascript设计模式_观察者模式实战

观察者模式在JavaScript中是一种非常实用的设计模式，特别适合处理对象间的依赖关系。当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知并更新。这种松耦合的机制广泛应用于事件系统、状态管理以及前端框架中。

什么是观察者模式

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时会通知所有观察者，使它们能够自动更新。

核心角色有两个：

发布者（Subject）：维护观察者列表，提供添加、删除和通知观察者的接口。
观察者（Observer）：实现一个更新方法，在被通知时执行相应逻辑。

手动实现一个观察者模式

下面是一个简洁但完整的观察者模式实现：

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

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

  // 添加观察者
  addObserver(observer) {
    this.observers.push(observer);
  }

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

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

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(data) {
    console.log(`${this.name} 收到通知:`, data);
  }
}

登录后复制

使用示例：

Revid AI

AI短视频生成平台

查看详情

const subject = new Subject();

const user1 = new Observer("用户A");
const user2 = new Observer("用户B");

subject.addObserver(user1);
subject.addObserver(user2);

subject.notify("系统即将升级！"); 
// 输出：
// 用户A 收到通知: 系统即将升级！
// 用户B 收到通知: 系统即将升级！

subject.removeObserver(user1);
subject.notify("新消息来了！");
// 只有用户B会收到

登录后复制

在实际项目中的应用场景

观察者模式非常适合用于解耦组件之间的通信，比如：

自定义事件系统：可以封装一个全局事件总线，组件之间通过订阅和发布事件进行通信。
状态管理简化版：类似Vue或Redux的部分原理，数据变更后自动刷新视图。
表单验证提示：输入框变化时通知多个提示模块更新状态。

举个简单的事件总线例子：

const EventBus = {
  events: {},

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },

  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
};

// 使用
EventBus.on('login', user => {
  console.log('欢迎你，' + user.name);
});

EventBus.emit('login', { name: 'Alice' });

登录后复制