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

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

2022-05-07 236
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 图解设计模式之发布-订阅模式（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设计模式
王平安
目录
相关文章
划雨悦潭之赋
|
10天前
|
设计模式 前端开发 搜索推荐
前端必须掌握的设计模式——模板模式
模板模式（Template Pattern）是一种行为型设计模式，父类定义固定流程和步骤顺序，子类通过继承并重写特定方法实现具体步骤。适用于具有固定结构或流程的场景，如组装汽车、包装礼物等。举例来说，公司年会节目征集时，蜘蛛侠定义了歌曲的四个步骤：前奏、主歌、副歌、结尾。金刚狼和绿巨人根据此模板设计各自的表演内容。通过抽象类定义通用逻辑，子类实现个性化行为，从而减少重复代码。模板模式还支持钩子方法，允许跳过某些步骤，增加灵活性。
划雨悦潭之赋
58 11
游客syv66y3m2ksnc
|
2月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
71 1
游客762btuqu5wybw666
|
4月前
|
设计模式 数据库连接 PHP
PHP中的设计模式：提升代码的可维护性与扩展性在软件开发过程中，设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案，可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式，以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手，逐步深入到更复杂的应用场景。通过实际案例分析，读者可以更好地理解如何在PHP开发中应用这些设计模式，从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景，重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例，展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项，帮助开发者在不同情境下做出最佳决策。
游客762btuqu5wybw666
62 5
aliyun0641063962-48771
|
2月前
|
设计模式 开发者 Python
Python编程中的设计模式：工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例，我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者，都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
aliyun0641063962-48771
120 61
游客syv66y3m2ksnc
|
2月前
|
设计模式 安全 Java
Kotlin - 改良设计模式 - 构建者模式
Kotlin - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
36 1
聚优云惠
|
2月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
聚优云惠
49 1
邹荣乐
|
3月前
|
JavaScript 前端开发
Vue2整合TypeScript：借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript：借助vue-property-decorator以类模式编写组件
邹荣乐
213 3
毓秀清荷
|
3月前
|
设计模式 Java Kotlin
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
本教程详细讲解Kotlin语法，适合希望深入了解Kotlin的开发者。对于快速学习Kotlin语法，推荐查看“简洁”系列教程。本文重点介绍了构建者模式在Kotlin中的应用与改良，包括如何使用具名可选参数简化复杂对象的创建过程，以及如何在初始化代码块中对参数进行约束和校验。
毓秀清荷
35 3
程序员小海绵
|
4月前
|
设计模式 算法 安全
设计模式——模板模式
模板方法模式、钩子方法、Spring源码AbstractApplicationContext类用到的模板方法
程序员小海绵
61 3
设计模式——模板模式
ShaFaChuang-36210
|
4月前
|
设计模式 数据库连接 PHP
PHP中的设计模式：如何提高代码的可维护性与扩展性在软件开发领域，PHP 是一种广泛使用的服务器端脚本语言。随着项目规模的扩大和复杂性的增加，保持代码的可维护性和可扩展性变得越来越重要。本文将探讨 PHP 中的设计模式，并通过实例展示如何应用这些模式来提高代码质量。
设计模式是经过验证的解决软件设计问题的方法。它们不是具体的代码，而是一种编码和设计经验的总结。在PHP开发中，合理地使用设计模式可以显著提高代码的可维护性、复用性和扩展性。本文将介绍几种常见的设计模式，包括单例模式、工厂模式和观察者模式，并通过具体的例子展示如何在PHP项目中应用这些模式。
ShaFaChuang-36210
67 9

热门文章

最新文章

  • 1
    前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
  • 2
    前端必须掌握的设计模式——单例模式
  • 3
    设计模式概述
  • 4
    前端必须掌握的设计模式——装饰器模式
  • 5
    Java 设计模式——观察者模式：从优衣库不使用新疆棉事件看系统的动态响应
  • 6
    探索编程语言中的设计模式：从理论到实践
  • 7
    Kotlin教程笔记(54) - 改良设计模式 - 迭代器模式
  • 8
    Kotlin教程笔记(53） - 改良设计模式 - 策略模式
  • 9
    Kotlin教程笔记(50) - 改良设计模式 - 工厂模式
  • 10
    Kotlin教程笔记(56) - 改良设计模式 - 装饰者模式
  • 1
    js设计模式-观察者模式与发布/订阅模式
    83
  • 2
    js设计模式-策略模式与代理模式的应用
    81
  • 3
    LabVIEW状态机设计模式技术手册和练习
    113
  • 4
    设计模式在Java开发中的应用
    53
  • 5
    写出易维护的代码｜React开发的设计模式及原则
    122
  • 6
    19：Web开发模式与MVC设计模式-Java Web
    136
  • 7
    18：JavaBean简介及其在表单处理与DAO设计模式中的应用-Java Web
    144
  • 8
    JAVA设计模式之结构型模式
    84
  • 9
    【JavaScript 技术专栏】JavaScript 设计模式与实战应用
    99
  • 10
    【初学者慎入】Spring源码中的16种设计模式实现
    416

    • 相关课程

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

    • 相关电子书

    更多
  • 现代TypeScript高级教程
  • 用RxSwift写易维护易读的愉悦代码
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 语言入门-1：环境构建
  • 使用Java面向对象编写网络通信程序应用
    • 下一篇
    开通oss服务