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

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

2022-05-07 243
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 图解设计模式之发布-订阅模式（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设计模式
王平安
目录
相关文章
划雨悦潭之赋
|
2月前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式（Template Pattern）是一种行为型设计模式，父类定义固定流程和步骤顺序，子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景，如组装汽车、包装礼物等。举例来说，公司年会节目征集时，蜘蛛侠定义了歌曲的四个步骤：前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑，子类实现个性化行为，从而减少重复代码。模板模式还支持钩子方法，允许跳过某些步骤，增加灵活性。
划雨悦潭之赋
141 11
游客syv66y3m2ksnc
|
3月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
81 1
SlackClimb
|
24天前
|
设计模式
「全网最细 + 实战源码案例」设计模式——模式扩展（配置工厂）
该设计通过配置文件和反射机制动态选择具体工厂，减少硬编码依赖，提升系统灵活性和扩展性。配置文件解耦、反射创建对象，新增产品族无需修改客户端代码。示例中，`CoffeeFactory`类加载配置文件并使用反射生成咖啡对象，客户端调用时只需指定名称即可获取对应产品实例。
SlackClimb
87 40
游客762btuqu5wybw666
|
5月前
|
设计模式 数据库连接 PHP
PHP中的设计模式：提升代码的可维护性与扩展性在软件开发过程中，设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案，可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式，以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手，逐步深入到更复杂的应用场景。通过实际案例分析，读者可以更好地理解如何在PHP开发中应用这些设计模式，从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景，重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例，展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项，帮助开发者在不同情境下做出最佳决策。
游客762btuqu5wybw666
72 5
SlackClimb
|
25天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——简单工厂模式
简单工厂模式是一种创建型设计模式，通过工厂类根据传入参数创建不同类型的对象，也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。优点是封装性强、代码复用性好；缺点是扩展性差，增加新产品时需修改工厂类代码，违反开闭原则。适用于对象种类较少且调用者无需关心创建细节的场景。
SlackClimb
53 19
SlackClimb
|
23天前
|
设计模式 Java
「全网最细 + 实战源码案例」设计模式——生成器模式
生成器模式（Builder Pattern）是一种创建型设计模式，用于分步骤构建复杂对象。它允许用户通过控制对象构造的过程，定制对象的组成部分，而无需直接实例化细节。该模式特别适合构建具有多种配置的复杂对象。其结构包括抽象建造者、具体建造者、指挥者和产品角色。适用于需要创建复杂对象且对象由多个部分组成、构造过程需对外隐藏或分离表示与构造的场景。优点在于更好的控制、代码复用和解耦性；缺点是增加复杂性和不适合简单对象。实现时需定义建造者接口、具体建造者类、指挥者类及产品类。链式调用是常见应用方式之一。
SlackClimb
50 12
SlackClimb
|
25天前
|
设计模式 关系型数据库
「全网最细 + 实战源码案例」设计模式——工厂方法模式
简单工厂模式是一种创建型设计模式，通过一个工厂类根据传入参数创建不同类型的产品对象，也称“静态工厂方法”模式。其结构包括工厂类、产品接口和具体产品类。适用于创建对象种类较少且调用者无需关心创建细节的场景。优点是封装性强、代码复用性好；缺点是扩展性差，增加新产品时需修改工厂类代码，违反开闭原则。
SlackClimb
44 15
aliyun0641063962-48771
|
3月前
|
设计模式 开发者 Python
Python编程中的设计模式：工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例，我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者，都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
aliyun0641063962-48771
137 61
游客syv66y3m2ksnc
|
3月前
|
设计模式 安全 Java
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
48 1
聚优云惠
|
3月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
聚优云惠
63 1

热门文章

最新文章

  • 1
    TypeScript-内置应用程序类型-Recode
  • 2
    Gzm Design：开源神器！用 Vue3、Vite4、TypeScript 革新海报设计，免费开源的海报设计器，主流技术打造，轻松高效
  • 3
    「全网最细 + 实战源码案例」设计模式——享元模式
  • 4
    「全网最细 + 实战源码案例」设计模式——模式扩展（配置工厂）
  • 5
    「全网最细 + 实战源码案例」设计模式——组合模式
  • 6
    「全网最细 + 实战源码案例」设计模式——代理模式
  • 7
    「全网最细 + 实战源码案例」设计模式——适配器模式
  • 8
    「全网最细 + 实战源码案例」设计模式——抽象工厂模式
  • 9
    「全网最细 + 实战源码案例」设计模式——模板方法模式
  • 10
    「全网最细 + 实战源码案例」设计模式——原型模式
  • 1
    【设计模式】JAVA Design Patterns——Command（事务模式）
    47
  • 2
    【JAVA学习之路 | 基础篇】单例设计模式
    50
  • 3
    【设计模式】JAVA Design Patterns——Circuit Breaker（断路器模式）
    115
  • 4
    【设计模式】JAVA Design Patterns——Chain of responsibility（责任链模式）
    62
  • 5
    【设计模式】JAVA Design Patterns——Callback（回调模式）
    52
  • 6
    【设计模式】JAVA Design Patterns——Bytecode（字节码模式）
    89
  • 7
    【设计模式】JAVA Design Patterns——Builder（构造器模式）
    59
  • 8
    【设计模式】JAVA Design Patterns——Business Delegate（业务委托模式）
    80
  • 9
    【设计模式】JAVA Design Patterns——Bridge（桥接模式）
    100
  • 10
    【设计模式】JAVA Design Patterns——Balking（止步模式）
    73

    • 相关课程

    更多
  • Java面向对象开发
  • PHP进阶教程 - 由浅入深掌握面向对象开发 - 第二阶段
  • 5天玩转Java面向对象编程
  • Java面向对象编程
  • Go语言核心编程 - 面向对象、文件、单元测试、反射、TCP编程
  • Python语言基础 - 函数、面向对象、异常处理

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • 用RxSwift写易维护易读的愉悦代码
  • 为什么要学函数式编程？

    • 相关实验场景

    更多
  • 语言入门-1：环境构建
  • 使用Java面向对象编写网络通信程序应用
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型