观察者模式怎样编写事件通知机制实现-C++-PHP中文网

观察者模式怎样编写事件通知机制实现

P粉602998670

发布： 2025-08-13 08:06:02

原创

676人浏览过

观察者模式通过定义被观察者与观察者的依赖关系，实现状态变化时的自动通知机制，适用于事件驱动场景如ui更新、消息推送等，其核心是解耦与广播通知，需注意及时移除观察者以避免内存泄漏，最终确保系统灵活性与可维护性。

观察者模式怎样编写事件通知机制实现

观察者模式是一种行为设计模式，用于在对象之间建立一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会自动收到通知。这种机制常被称为“事件通知机制”，非常适合实现松耦合的组件通信。

下面通过一个简单的例子来说明如何编写观察者模式的事件通知机制。

一、核心角色说明

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

壁纸样机神器

免费壁纸样机生成

查看详情

Subject（被观察者）：维护一个观察者列表，状态变化时通知所有观察者。
Observer（观察者）：定义一个更新接口，被通知时执行相应操作。

二、基础结构实现（以 JavaScript 为例）

// 1. 定义观察者接口（抽象）
class Observer {
  update(message) {
    // 子类实现
  }
}

// 2. 被观察者（主题）
class Subject {
  constructor() {
    this.observers = []; // 存储观察者
  }

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

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

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

登录后复制

三、具体使用示例

假设我们有一个“新闻订阅系统”，用户是观察者，新闻发布是被观察者。

// 具体观察者：用户
class User extends Observer {
  constructor(name) {
    super();
    this.name = name;
  }

  update(message) {
    console.log(`${this.name} 收到通知：${message}`);
  }
}

// 创建被观察者
const newsAgency = new Subject();

// 创建观察者
const user1 = new User('张三');
const user2 = new User('李四');

// 注册观察者
newsAgency.addObserver(user1);
newsAgency.addObserver(user2);

// 发布新闻，触发通知
newsAgency.notify('今日天气晴朗，适合出行！');
// 输出：
// 张三 收到通知：今日天气晴朗，适合出行！
// 李四 收到通知：今日天气晴朗，适合出行！

登录后复制

四、进阶优化建议

为了更灵活地支持多种事件类型，可以对机制进行扩展：

支持事件类型区分：不同事件通知不同观察者。
解耦更彻底：使用事件中心（Event Bus）模式。
自动清理：防止内存泄漏，移除不再需要的观察者。

示例：事件类型区分

class EventCenter {
  constructor() {
    this.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);
    }
  }
}

// 使用
const bus = new EventCenter();

bus.on('news', msg => console.log('新闻：' + msg));
bus.on('weather', info => console.log('天气：' + info));

bus.emit('news', '全球AI大会召开');
bus.emit('weather', '明天有雨');

登录后复制