JavaScript 中 class 语法怎么实现观察者模式-js教程-PHP中文网

javascript用class实现观察者模式：定义observer类封装观察者身份与回调，subject类用set管理订阅者并提供subscribe、unsubscribe、notify方法，支持事件类型过滤的eventsubject为可选增强。

javascript 中 class 语法怎么实现观察者模式

JavaScript 中用 class 实现观察者模式，核心是维护一个订阅者列表，提供 subscribe、unsubscribe 和 notify 方法。它不依赖第三方库，纯原生写法清晰可控。

定义 Observer 类（观察者）

每个观察者是一个拥有 update 方法的对象。可以是普通对象，也可以封装成类方便扩展：

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

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

这样做的好处是便于识别观察者身份、复用逻辑，也支持在取消订阅时精准匹配。

定义 Subject 类（被观察者 / 主题）

Subject 管理所有观察者，并触发通知。关键点：用 Set 存储避免重复订阅，notify 遍历调用每个观察者的 update：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

class Subject {
  constructor() {
    this.observers = new Set();
  }

  subscribe(observer) {
    if (observer && typeof observer.update === 'function') {
      this.observers.add(observer);
    }
  }

  unsubscribe(observer) {
    this.observers.delete(observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

用 Set 而不是数组：自动去重，add/delete 更语义化
订阅前校验 update 方法：防止无效观察者导致运行时错误
通知时不修改集合：forEach 安全遍历，即使某个 update 内部调用了 unsubscribe 也不会中断或报错

实际使用示例

模拟一个用户登录状态管理器：

const userState = new Subject();

const logger = new Observer('logger', (data) => {
  console.log('[LOG]', `User ${data.action}:`, data.user);
});

const uiUpdater = new Observer('ui', (data) => {
  document.getElementById('status').textContent = 
    data.action === 'login' ? '已登录' : '已登出';
});

userState.subscribe(logger);
userState.subscribe(uiUpdater);

// 触发通知
userState.notify({ action: 'login', user: 'Alice' });
// → 控制台输出 [LOG] User login: Alice
// → 页面元素更新为“已登录”

userState.unsubscribe(logger);
userState.notify({ action: 'logout', user: 'Alice' });
// → 只有 uiUpdater 响应

可选增强：支持事件类型与条件过滤

若需一对多但不同观察者只响应特定事件，可在 subscribe 中增加 event 参数，并在 notify 时按类型分发：

class EventSubject {
  constructor() {
    this.observers = new Map(); // event → Set<observer>
  }

  subscribe(event, observer) {
    if (!this.observers.has(event)) {
      this.observers.set(event, new Set());
    }
    this.observers.get(event).add(observer);
  }

  notify(event, data) {
    const set = this.observers.get(event);
    if (set) set.forEach(obs => obs.update(data));
  }
}</observer>

这样就能实现类似 subscribe('user:login', ...) 和 notify('user:login', {...}) 的语义化事件通信。