当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript观察者模式实现与解耦方法

JavaScript观察者模式实现与解耦方法

2026-01-11 10:57:39 0浏览收藏

欢迎各位小伙伴来到golang学习网，相聚于此都是缘哈哈哈！今天我给大家带来《JavaScript观察者模式实现与解耦技巧》，这篇文章主要讲到等等知识，如果你对文章相关的知识非常感兴趣或者正在自学，都可以关注我，我会持续更新相关文章！当然，有什么建议也欢迎在评论留言提出！一起学习！

观察者模式强调目标与观察者直接引用，发布-订阅通过事件中心解耦；前者适用于固定依赖同步通知，后者适合跨模块动态通信，二者均需注意内存泄漏防范。

JavaScript如何实现观察者模式_JavaScript发布订阅模式如何解耦代码

JavaScript 中的观察者模式（Observer Pattern）和发布-订阅模式（Pub/Sub）常被混用，但二者有关键区别：观察者模式强调目标对象与观察者之间的**直接引用关系**，而发布-订阅通过**事件中心（中介）解耦发布者与订阅者**，更适合大型应用中跨模块通信。

观察者模式：目标主动通知已知观察者

适用于一个状态变化需同步通知多个固定依赖对象的场景，比如 UI 组件响应数据模型更新。

目标（Subject）维护观察者列表，提供 attach、detach、notify 方法
观察者（Observer）实现统一更新接口（如 update()）
目标在状态变更后遍历调用每个观察者的 update()

示例：

class Subject {
  constructor() {
    this.observers = [];
  }
  attach(observer) {
    this.observers.push(observer);
  }
  detach(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
  notify(data) {
    this.observers.forEach(obs => obs.update(data));
  }
}

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

const subject = new Subject();
const o1 = new Observer('PanelA');
const o2 = new Observer('PanelB');
subject.attach(o1);
subject.attach(o2);
subject.notify('data changed'); // 两者均收到

发布-订阅模式：靠事件总线实现完全解耦

发布者不关心谁订阅，订阅者也不关心谁发布，所有通信经由一个中央事件通道（EventBus）中转，适合松散耦合、动态增删监听器的场景。

核心是 on（订阅）、emit（发布）、off（取消）三个方法
内部用对象按事件名分类存储回调函数数组
支持通配符（如 user.*）或一次性事件（once）可扩展

简易实现：

class EventBus {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback);
  }
  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(cb => cb(...args));
    }
  }
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

const bus = new EventBus();
bus.on('user.login', (user) => console.log('Welcome,', user.name));
bus.on('user.logout', () => console.log('Bye!'));
bus.emit('user.login', { name: 'Alice' }); // 触发对应监听器