JavaScript中什么是设计模式_观察者模式实现

admin 百科 2025-12-21 13

观察者模式定义对象间一对多依赖关系，当被观察者状态改变时自动通知所有观察者更新；核心角色为Subject（维护观察者列表并通知）和Observer（实现update接口响应通知）。

JavaScript中什么是设计模式_观察者模式实现-第1张图片-佛山资讯网

观察者模式（Observer Pattern）是 JavaScript 中最常用的行为型设计模式之一，核心思想是：**定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会自动收到通知并更新**。它特别适合处理事件驱动、数据响应式、状态同步等场景，比如 Vue 的响应式系统、DOM 事件监听、自定义事件总线等底层都离不开它。

观察者模式的核心角色

它包含两个关键角色：

Subject（被观察者 / 发布者）：维护一组观察者，提供添加、删除、通知观察者的方法；自身状态变化时主动触发通知。
Observer（观察者 / 订阅者）：定义统一的更新接口（如 update()），在被通知时执行具体逻辑。

手写一个简洁可用的观察者模式

下面是一个轻量、可直接运行的实现，不依赖框架，突出本质逻辑：

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

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

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

  // 通知所有观察者（可传入数据）
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

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

  update(data) {
    this.callback(data, this.name);
  }
}

// 使用示例
const subject = new Subject();

const obs1 = new Observer('UI组件A', (data, name) => {
  console.log(`${name} 收到：`, data);
});

const obs2 = new Observer('日志服务', (data, name) => {
  console.log(`${name} 记录：`, JSON.stringify(data));
});

subject.subscribe(obs1);
subject.subscribe(obs2);

subject.notify({ status: 'loading', progress: 50 }); 
// 输出：
// UI组件A 收到： { status: 'loading', progress: 50 }
// 日志服务 记录： {"status":"loading","progress":50}

登录后复制