AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

图解设计模式之发布-订阅模式（TypeScript）下

2022-05-07 321
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 图解设计模式之发布-订阅模式（TypeScript）下

五、实战示例

1. 简单示例

  1. 定义发布者接口（Publisher）、事件总线接口（EventChannel）和订阅者接口（Subscriber）：
interface Publisher<T> {
  subscriber: string;
  data: T;
}
interface EventChannel<T>  {
  on  : (subscriber: string, callback: () => void) => void;
  off : (subscriber: string, callback: () => void) => void;
  emit: (subscriber: string, data: T) => void;
}
interface Subscriber {
  subscriber: string;
  callback: () => void;
}
// 方便后面使用
interface PublishData {
  [key: string]: string;
}
  1. 实现具体发布者类（ConcretePublisher）：
class ConcretePublisher<T> implements Publisher<T> {
  public subscriber: string = "";
  public data: T; 
  constructor(subscriber: string, data: T) {
    this.subscriber = subscriber;
    this.data = data;
  }
}
  1. 实现具体事件总线类（ConcreteEventChannel）：
class ConcreteEventChannel<T> implements EventChannel<T> {
  // 初始化订阅者对象
  private subjects: { [key: string]: Function[] } = {};
  // 实现添加订阅事件
  public on(subscriber: string, callback: () => void): void {
    console.log(`收到订阅信息，订阅事件：${subscriber}`);
    if (!this.subjects[subscriber]) {
      this.subjects[subscriber] = [];
    }
    this.subjects[subscriber].push(callback);
  };
  // 实现取消订阅事件
  public off(subscriber: string, callback: () => void): void {
    console.log(`收到取消订阅请求，需要取消的订阅事件：${subscriber}`);
    if (callback === null) {
      this.subjects[subscriber] = [];
    } else {
      const index: number = this.subjects[subscriber].indexOf(callback);
      ~index && this.subjects[subscriber].splice(index, 1);
    }
  };
  // 实现发布订阅事件
  public emit (subscriber: string, data: T): void {
    console.log(`收到发布者信息，执行订阅事件：${subscriber}`);
    this.subjects[subscriber].forEach(item => item(data));
  };
}
  1. 实现具体订阅者类（ConcreteSubscriber）：
class ConcreteSubscriber implements Subscriber {
  public subscriber: string = "";
  constructor(subscriber: string, callback: () => void) {
    this.subscriber = subscriber;
    this.callback = callback;
  }
  public callback(): void { };
}
  1. 运行示例代码：
interface Publisher<T> {
  subscriber: string;
  data: T;
}
interface EventChannel<T>  {
  on  : (subscriber: string, callback: () => void) => void;
  off : (subscriber: string, callback: () => void) => void;
  emit: (subscriber: string, data: T) => void;
}
interface Subscriber {
  subscriber: string;
  callback: () => void;
}
interface PublishData {
  [key: string]: string;
}
class ConcreteEventChannel<T> implements EventChannel<T> {
  // 初始化订阅者对象
  private subjects: { [key: string]: Function[] } = {};
  // 实现添加订阅事件
  public on(subscriber: string, callback: () => void): void {
    console.log(`收到订阅信息，订阅事件：${subscriber}`);
    if (!this.subjects[subscriber]) {
      this.subjects[subscriber] = [];
    }
    this.subjects[subscriber].push(callback);
  };
  // 实现取消订阅事件
  public off(subscriber: string, callback: () => void): void {
    console.log(`收到取消订阅请求，需要取消的订阅事件：${subscriber}`);
    if (callback === null) {
      this.subjects[subscriber] = [];
    } else {
      const index: number = this.subjects[subscriber].indexOf(callback);
      ~index && this.subjects[subscriber].splice(index, 1);
    }
  };
  // 实现发布订阅事件
  public emit (subscriber: string, data: T): void {
    console.log(`收到发布者信息，执行订阅事件：${subscriber}`);
    this.subjects[subscriber].forEach(item => item(data));
  };
}
class ConcretePublisher<T> implements Publisher<T> {
  public subscriber: string = "";
  public data: T; 
  constructor(subscriber: string, data: T) {
    this.subscriber = subscriber;
    this.data = data;
  }
}
class ConcreteSubscriber implements Subscriber {
  public subscriber: string = "";
  constructor(subscriber: string, callback: () => void) {
    this.subscriber = subscriber;
    this.callback = callback;
  }
  public callback(): void { };
}
/* 运行示例 */
const pingan8787 = new ConcreteSubscriber(
  "running",
  () => { 
    console.log("订阅者 pingan8787 订阅事件成功！执行回调~");
  }
);
const leo = new ConcreteSubscriber(
  "swimming",
  () => { 
    console.log("订阅者 leo 订阅事件成功！执行回调~");
  }
);
const lisa = new ConcreteSubscriber(
  "swimming",
  () => { 
    console.log("订阅者 lisa 订阅事件成功！执行回调~");
  }
);
const pual = new ConcretePublisher<PublishData>(
  "swimming",
  {message: "pual 发布消息~"}
);
const eventBus = new ConcreteEventChannel<PublishData>();
eventBus.on(pingan8787.subscriber, pingan8787.callback);
eventBus.on(leo.subscriber, leo.callback);
eventBus.on(lisa.subscriber, lisa.callback);
// 发布者 pual 发布 "swimming"相关的事件
eventBus.emit(pual.subscriber, pual.data); 
eventBus.off (lisa.subscriber, lisa.callback);
eventBus.emit(pual.subscriber, pual.data);
/*
输出结果：
[LOG]: 收到订阅信息，订阅事件：running
[LOG]: 收到订阅信息，订阅事件：swimming
[LOG]: 收到订阅信息，订阅事件：swimming
[LOG]: 收到发布者信息，执行订阅事件：swimming 
[LOG]: 订阅者 leo 订阅事件成功！执行回调~ 
[LOG]: 订阅者 lisa 订阅事件成功！执行回调~ 
[LOG]: 收到取消订阅请求，需要取消的订阅事件：swimming 
[LOG]: 收到发布者信息，执行订阅事件：swimming 
[LOG]: 订阅者 leo 订阅事件成功！执行回调~ 
*/

完整代码如下：

interface Publisher {
  subscriber: string;
  data: any;
}
interface EventChannel {
  on  : (subscriber: string, callback: () => void) => void;
  off : (subscriber: string, callback: () => void) => void;
  emit: (subscriber: string, data: any) => void;
}
interface Subscriber {
  subscriber: string;
  callback: () => void;
}
class ConcreteEventChannel implements EventChannel {
  // 初始化订阅者对象
  private subjects: { [key: string]: Function[] } = {};
  // 实现添加订阅事件
  public on(subscriber: string, callback: () => void): void {
    console.log(`收到订阅信息，订阅事件：${subscriber}`);
    if (!this.subjects[subscriber]) {
      this.subjects[subscriber] = [];
    }
    this.subjects[subscriber].push(callback);
  };
  // 实现取消订阅事件
  public off(subscriber: string, callback: () => void): void {
    console.log(`收到取消订阅请求，需要取消的订阅事件：${subscriber}`);
    if (callback === null) {
      this.subjects[subscriber] = [];
    } else {
      const index: number = this.subjects[subscriber].indexOf(callback);
      ~index && this.subjects[subscriber].splice(index, 1);
    }
  };
  // 实现发布订阅事件
  public emit (subscriber: string, data = null): void {
    console.log(`收到发布者信息，执行订阅事件：${subscriber}`);
    this.subjects[subscriber].forEach(item => item(data));
  };
}
class ConcretePublisher implements Publisher {
  public subscriber: string = "";
  public data: any; 
  constructor(subscriber: string, data: any) {
    this.subscriber = subscriber;
    this.data = data;
  }
}
class ConcreteSubscriber implements Subscriber {
  public subscriber: string = "";
  constructor(subscriber: string, callback: () => void) {
    this.subscriber = subscriber;
    this.callback = callback;
  }
  public callback(): void { };
}
/* 运行示例 */
const pingan8787 = new ConcreteSubscriber(
  "running",
  () => { 
    console.log("订阅者 pingan8787 订阅事件成功！执行回调~");
  }
);
const leo = new ConcreteSubscriber(
  "swimming",
  () => { 
    console.log("订阅者 leo 订阅事件成功！执行回调~");
  }
);
const lisa = new ConcreteSubscriber(
  "swimming",
  () => { 
    console.log("订阅者 lisa 订阅事件成功！执行回调~");
  }
);
const pual = new ConcretePublisher(
  "swimming",
  {message: "pual 发布消息~"}
);
const eventBus = new ConcreteEventChannel();
eventBus.on(pingan8787.subscriber, pingan8787.callback);
eventBus.on(leo.subscriber, leo.callback);
eventBus.on(lisa.subscriber, lisa.callback);
// 发布者 pual 发布 "swimming"相关的事件
eventBus.emit(pual.subscriber, pual.data); 
eventBus.off (lisa.subscriber, lisa.callback);
eventBus.emit(pual.subscriber, pual.data);
/*
输出结果：
[LOG]: 收到订阅信息，订阅事件：running
[LOG]: 收到订阅信息，订阅事件：swimming
[LOG]: 收到订阅信息，订阅事件：swimming
[LOG]: 收到发布者信息，执行订阅事件：swimming 
[LOG]: 订阅者 leo 订阅事件成功！执行回调~ 
[LOG]: 订阅者 lisa 订阅事件成功！执行回调~ 
[LOG]: 收到取消订阅请求，需要取消的订阅事件：swimming 
[LOG]: 收到发布者信息，执行订阅事件：swimming 
[LOG]: 订阅者 leo 订阅事件成功！执行回调~ 
*/

2. Vue.js 使用示例

参考文章：《Vue事件总线（EventBus）使用详细介绍》 。

2.1 创建 event bus

在 Vue.js 中创建 EventBus 有两种方式：

  1. 手动实现，导出 Vue 实例化的结果。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue();
  1. 直接在项目中的 main.js全局挂载 Vue 实例化的结果。
// main.js
Vue.prototype.$EventBus = new Vue()

2.2 发送事件

假设你有两个Vue页面需要通信： A 和 B ，A页面按钮上绑定了点击事件，发送一则消息，通知 B 页面。

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>
<script> 
import { EventBus } from "../event-bus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

2.3 接收事件

B 页面中接收消息，并展示内容到页面上。

<!-- IncrementCount.vue -->
<template>
  <p>{{msg}}</p>
</template>
<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

同理可以从 B 页面往 A 页面发送消息，使用下面方法：

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

2.4 移除事件监听者

使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。或者直接用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

六、总结

观察者模式和发布-订阅模式的差别在于事件总线，如果有则是发布-订阅模式，反之为观察者模式。所以在实现发布-订阅模式，关键在于实现这个事件总线，在某个特定时间触发某个特定事件，从而触发监听这个特定事件的组件进行相应操作的功能。发布-订阅模式在很多时候非常有用。

参考文章

1.《发布/订阅》

2.《观察者模式VS订阅发布模式》

文章标签：
JavaScript
C++
设计模式
关键词：
设计模式模式
TypeScript模式
设计模式订阅模式
设计模式typescript
TypeScript设计模式
王平安
目录
相关文章
flzjkl
|
6月前
|
设计模式 Java 数据库连接
【设计模式】【创建型模式】工厂方法模式(Factory Methods)
一、入门 什么是工厂方法模式？ 工厂方法模式（Factory Method Pattern）是一种创建型设计模式，它定义了一个用于创建对象的接口，但由子类决定实例化哪个类。工厂方法模式使类的实例化延迟
flzjkl
185 16
摘星.
|
6月前
|
设计模式 负载均衡 监控
并发设计模式实战系列(2)：领导者/追随者模式
🌟 ​大家好，我是摘星！​ 🌟今天为大家带来的是并发设计模式实战系列，第二章领导者/追随者（Leader/Followers）模式，废话不多说直接开始~
摘星.
185 0
摘星.
|
6月前
|
设计模式 监控 Java
并发设计模式实战系列(1)：半同步/半异步模式
🌟 ​大家好，我是摘星！​ 🌟今天为大家带来的是并发设计模式实战系列，第一章半同步/半异步（Half-Sync/Half-Async）模式，废话不多说直接开始~
摘星.
169 0
摘星.
|
6月前
|
设计模式 安全 Java
并发设计模式实战系列(12)：不变模式（Immutable Object）
🌟 大家好，我是摘星！🌟今天为大家带来的是并发设计模式实战系列，第十二章，废话不多说直接开始~
摘星.
140 0
拉丁解牛说技术
|
6月前
|
设计模式 算法 Java
设计模式觉醒系列(04)策略模式|简单工厂模式的升级版
本文介绍了简单工厂模式与策略模式的概念及其融合实践。简单工厂模式用于对象创建，通过隐藏实现细节简化代码；策略模式关注行为封装与切换，支持动态替换算法，增强灵活性。两者结合形成“策略工厂”，既简化对象创建又保持低耦合。文章通过支付案例演示了模式的应用，并强调实际开发中应根据需求选择合适的设计模式，避免生搬硬套。最后推荐了JVM调优、并发编程等技术专题，助力开发者提升技能。
拉丁解牛说技术
305 38
划雨悦潭之赋
|
11月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式（Template Pattern）是一种行为型设计模式，父类定义固定流程和步骤顺序，子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景，如组装汽车、包装礼物等。举例来说，公司年会节目征集时，蜘蛛侠定义了歌曲的四个步骤：前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑，子类实现个性化行为，从而减少重复代码。模板模式还支持钩子方法，允许跳过某些步骤，增加灵活性。
划雨悦潭之赋
602 11
游客syv66y3m2ksnc
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
162 1
游客762btuqu5wybw666
|
设计模式 数据库连接 PHP
PHP中的设计模式：提升代码的可维护性与扩展性在软件开发过程中，设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案，可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式，以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手，逐步深入到更复杂的应用场景。通过实际案例分析，读者可以更好地理解如何在PHP开发中应用这些设计模式，从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景，重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例，展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项，帮助开发者在不同情境下做出最佳决策。
游客762btuqu5wybw666
255 5
摘星.
|
6月前
|
设计模式 Prometheus 监控
并发设计模式实战系列(20)：扇出/扇入模式（Fan-Out/Fan-In）(完结篇)
🌟 大家好，我是摘星！🌟今天为大家带来的是并发设计模式实战系列，第二十章，废话不多说直接开始~
摘星.
204 0
SlackClimb
|
10月前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展（配置工厂）
该设计通过配置文件和反射机制动态选择具体工厂，减少硬编码依赖，提升系统灵活性和扩展性。配置文件解耦、反射创建对象，新增产品族无需修改客户端代码。示例中，`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象，客户端调用时只需指定名称即可获取对应产品实例。
SlackClimb
201 40

热门文章

最新文章

  • 1
    Java 设计模式之策略模式：灵活切换算法的艺术
  • 2
    Java 设计模式之状态模式：让对象的行为随状态优雅变化
  • 3
    Java 设计模式之观察者模式：构建松耦合的事件响应系统
  • 4
    Java 设计模式之责任链模式：优雅处理请求的艺术
  • 5
    现货期权交易所开发模块化设计模式
  • 6
    软考中级软件设计师专项-设计模式篇
  • 7
    基于多设计模式的状态扭转设计：策略模式与责任链模式的实战应用
  • 8
    【JUC】（3）常见的设计模式概念分析与多把锁使用场景！！理解线程状态转换条件！带你深入JUC！！文章全程笔记干货！！
  • 9
    【JUC】（6）带你了解共享模型之 享元和不可变 模型并初步带你了解并发工具 线程池Pool，文章内还有饥饿问题、设计模式之工作线程的解决于实现
  • 10
    javascript 策略设计模式
  • 1
    一夜获千星！已获 1.7k+,Art Design Pro：Vue3 + Vite + TypeScript 打造的高颜值管理系统模板，这个让后端小哥直呼救命的后台系统
    866
  • 2
    Vue与TypeScript：如何实现更强大的前端开发
    277
  • 3
    通义灵码 Rules 库合集来了，覆盖Java、TypeScript、Python、Go、JavaScript 等
    1302
  • 4
    一文彻底搞明白HarmonyOS基础TypeScript中的泛型函数
    187
  • 5
    TypeScript 定义同步方法
    162
  • 6
    Vue Amazing UI 组件库（Vue3+TypeScript+Vite 等最新技术栈开发）
    546
  • 7
    Gzm Design：开源神器！用 Vue3、Vite4、TypeScript 革新海报设计，免费开源的海报设计器，主流技术打造，轻松高效
    520
  • 8
    TypeScript-内置应用程序类型-Recode
    406
  • 9
    Chrome浏览器实例的TypeScript自动化脚本
    340
  • 10
    Eliza：TypeScript 版开源 AI Agent 开发框架，快速搭建智能、个性的 Agents 系统
    977

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云对象存储OSS收费标准：500G存储118元1年、