观察者模式

发布订阅模式(Publish-Subscribe Pattern),也称为观察者模式,是一种常用的设计模式,用于对象之间的消息传递。在这个模式中,订阅者(Observer)注册到发布者(Subject),当发布者状态发生变化时,通知所有订阅者。

下面是一个 JavaScript 实现的发布订阅模式:

js 复制代码
class PubSub {
  constructor() {
    this.subscribers = {};
  }

  // 订阅事件
  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }
    this.subscribers[event].push(callback);
  }

  // 取消订阅
  unsubscribe(event, callback) {
    if (!this.subscribers[event]) return;

    this.subscribers[event] = this.subscribers[event].filter(subscriber => subscriber !== callback);
  }

  // 发布事件
  publish(event, data) {
    if (!this.subscribers[event]) return;

    this.subscribers[event].forEach(callback => callback(data));
  }
}

// 使用示例
const pubSub = new PubSub();

function subscriber1(data) {
  console.log(`Subscriber 1 received data: ${data}`);
}

function subscriber2(data) {
  console.log(`Subscriber 2 received data: ${data}`);
}

// 订阅事件
pubSub.subscribe('event1', subscriber1);
pubSub.subscribe('event1', subscriber2);

// 发布事件
pubSub.publish('event1', 'Hello World!');
// 输出:
// Subscriber 1 received data: Hello World!
// Subscriber 2 received data: Hello World!

// 取消订阅
pubSub.unsubscribe('event1', subscriber2);

// 发布事件
pubSub.publish('event1', 'Hello again!');
// 输出:
// Subscriber 1 received data: Hello again!
相关推荐
晓说前端5 小时前
第一篇:为什么学TypeScript?—— 优势、场景与环境搭建
javascript·ubuntu·typescript
ZC跨境爬虫6 小时前
模块化烹饪小程序开发日记 Day7:(菜谱详情接口开发与JSON数据读取全流程)
前端·javascript·css·ui·微信小程序·json
এ慕ོ冬℘゜6 小时前
JS 前端基础面试题
开发语言·前端·javascript
张元清9 小时前
驯服 React 里的 DOM 事件:useEventListener、useEventEmitter、useKeyModifier、useTextSelect
前端·javascript·面试
古韵9 小时前
�������� JavaScript �հ�����ԭ����ʵս
javascript
代码熊崽的编程森林10 小时前
vue + onlyoffice 自定义插件的实现(OnlyOffice 插件:AI 智能编辑)。
前端·javascript·vue.js
Lucky_Turtle10 小时前
【Vue】element plus Slider小数组件设置顺滑程度
前端·javascript·vue.js
Dxy123931021610 小时前
js中Math.min.apply()详解
开发语言·javascript
砍材农夫11 小时前
物联网 基于netty控制报文结构(发布与接收)
java·开发语言·前端·javascript·物联网
上单带刀不带妹11 小时前
Vue3 中 getCurrentInstance() 与 proxy 详解
前端·javascript·vue.js