J*aScript观察者模式实现_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript观察者模式实现

2025-10-23

浏览次数：次

返回列表

观察者模式通过主题与观察者解耦实现状态自动通知，J*aScript中可用于事件处理与数据绑定。

javascript观察者模式实现

观察者模式是一种设计模式，用于在对象之间定义一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知。在J*aScript中，这种模式常用于事件处理、数据绑定等场景。下面是一个简洁而实用的观察者模式实现。

核心概念说明

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

主题（Subject）：维护一组观察者，提供添加、删除和通知观察者的方法。
观察者（Observer）：订阅主题，一旦主题状态变化，就会收到通知并作出响应。

基本实现代码

以下是一个基于类的J*aScript实现：

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

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

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

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

// 观察者类（可选，只是一个有update方法的对象）
class Observer {
  constructor(name) {
    this.name = name;
  }

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

使用示例

下面是具体的调用方式：

商易多用户商城

功能介绍：1. 商品出售包含拍卖模式，一口价模式。2. 全套系统采用淘宝网风格，成熟，简洁大方3. 每个商品支持多张图片上传，可自由设定，满足广大网民的迫切要求4. 商品信息支持 ubb,图文并茂5. 注册用户可参与竞拍，或者拍卖自己的商品6. 拥有会员注册，交易提醒，成交商品确认等邮件发送功能7. 拥有交易双方信用评价的功能，使得交易安全可*，可信度高8. 拥有安全稳定的用户虚拟币平台，可实现商

0 查看详情商易多用户商城

// 创建主题
const subject = new Subject();

// 创建观察者
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

// 注册观察者
subject.addObserver(observer1);
subject.addObserver(observer2);

// 发布通知
subject.notify('Hello from the subject!');

// 可以动态移除
subject.removeObserver(observer1);
subject.notify('Second message');

输出结果为：

Observer 1 received: Hello from the subject! Observer 2 received: Hello from the subject! Observer 2 received: Second message