Ehan Van的博客
首页
前端笔记
首页
前端笔记
  • 前端笔记

    • v-on的使用
    • 编写一个Vue递归组件
    • 非vue文件中申明的ref如何使用
    • Vue3如何在hook中执行异步函数并同步返回响应式数据
    • 如何终止forEach循环
    • 递归创建下拉树数据
    • 编写一个Vue Web Components
    • js数组toString的使用
    • vueconfig配置多page遇到的坑
    • js事件循环机制
    • React列表渲染中图片闪烁问题
    • 开发中未配置Referrer遇到的坑
    • 前端实现文件分片上传
    • 防抖函数
    • 编写一个vue插件
    • 发布订阅模式

什么是发布订阅模式

发布订阅模式是一种消息范式,消息的发送者(发布者)不会直接将消息发送给接收者(订阅者)。而是将消息发送给一个消息代理(事件通道),消息代理将消息转发给订阅了该消息的订阅者。

发布订阅模式的特点

  1. 松耦合:发布者和订阅者之间没有直接依赖关系,它们通过消息代理进行通信。
  2. 可扩展性:可以轻松地添加新的发布者和订阅者,而不需要修改现有的代码。
  3. 异步通信:发布者和订阅者之间可以进行异步通信,发布者不需要等待订阅者处理消息。

发布订阅模式的实现

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  off(event, listener) {
    if (!this.events[event]) return;
    this.events[event] = this.events[event].filter(l => l !== listener);
  }

  emit(event, ...args) {
    if (!this.events[event]) return;
    this.events[event].forEach(listener => listener(...args));
  }
}

const emitter = new EventEmitter();
emitter.on('event1', () => console.log('event1'));
emitter.on('event2', () => console.log('event2'));

emitter.emit('event1'); // 输出: event1
emitter.emit('event2'); // 输出: event2

发布订阅模式的应用场景

  1. 事件监听:在Web开发中,可以使用发布订阅模式来实现事件监听和事件触发。
  2. 消息队列:发布订阅模式可以用于实现消息队列,发布者将消息发布到消息队列中,订阅者从消息队列中订阅消息。
  3. 状态管理:在状态管理库中,可以使用发布订阅模式来实现状态更新和状态订阅。
Prev
编写一个vue插件