JavaScript中什么是设计模式_观察者模式实现-js教程-PHP中文网

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

夜晨

发布： 2025-12-21 19:32:02

原创

556人浏览过

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

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

观察者模式（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}

登录后复制

更贴近实际开发的优化版本

真实项目中常需要支持「按事件类型订阅」、「一次性监听」、「取消全部」等功能。可以升级为类似 EventEmitter 的风格：

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

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

204

查看详情

class EventHub {
  constructor() {
    this.events = {};
  }

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

  once(type, handler) {
    const wrapper = (...args) => {
      handler(...args);
      this.off(type, wrapper);
    };
    this.on(type, wrapper);
  }

  emit(type, ...args) {
    const handlers = this.events[type] || [];
    handlers.forEach(fn => fn(...args));
  }

  off(type, handler) {
    if (!this.events[type]) return;
    this.events[type] = this.events[type].filter(fn => fn !== handler);
  }

  clear(type) {
    if (type) delete this.events[type];
    else this.events = {};
  }
}

// 使用
const hub = new EventHub();
hub.on('user-login', user => console.log('欢迎', user.name));
hub.emit('user-login', { name: '张三' });

登录后复制