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

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

2022-05-07 217
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 图解设计模式之发布-订阅模式（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设计模式
王平安
目录
相关文章
游客syv66y3m2ksnc
|
16天前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
游客syv66y3m2ksnc
43 1
游客762btuqu5wybw666
|
2月前
|
设计模式 数据库连接 PHP
PHP中的设计模式：提升代码的可维护性与扩展性在软件开发过程中，设计模式是开发者们经常用到的工具之一。它们提供了经过验证的解决方案，可以帮助我们解决常见的软件设计问题。本文将介绍PHP中常用的设计模式，以及如何利用这些模式来提高代码的可维护性和扩展性。我们将从基础的设计模式入手，逐步深入到更复杂的应用场景。通过实际案例分析，读者可以更好地理解如何在PHP开发中应用这些设计模式，从而写出更加高效、灵活和易于维护的代码。
本文探讨了PHP中常用的设计模式及其在实际项目中的应用。内容涵盖设计模式的基本概念、分类和具体使用场景，重点介绍了单例模式、工厂模式和观察者模式等常见模式。通过具体的代码示例，展示了如何在PHP项目中有效利用设计模式来提升代码的可维护性和扩展性。文章还讨论了设计模式的选择原则和注意事项，帮助开发者在不同情境下做出最佳决策。
游客762btuqu5wybw666
51 5
游客sjjs6jgz4gp7m1
|
19天前
|
设计模式 开发者 Python
Python编程中的设计模式：工厂方法模式###
本文深入浅出地探讨了Python编程中的一种重要设计模式——工厂方法模式。通过具体案例和代码示例，我们将了解工厂方法模式的定义、应用场景、实现步骤以及其优势与潜在缺点。无论你是Python新手还是有经验的开发者，都能从本文中获得关于如何在实际项目中有效应用工厂方法模式的启发。 ###
游客sjjs6jgz4gp7m1
90 61
聚优云惠
|
12天前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
聚优云惠
31 1
邹荣乐
|
1月前
|
JavaScript 前端开发
Vue2整合TypeScript：借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript：借助vue-property-decorator以类模式编写组件
邹荣乐
131 3
毓秀清荷
|
1月前
|
设计模式 Java Kotlin
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
本教程详细讲解Kotlin语法，适合希望深入了解Kotlin的开发者。对于快速学习Kotlin语法，推荐查看“简洁”系列教程。本文重点介绍了构建者模式在Kotlin中的应用与改良，包括如何使用具名可选参数简化复杂对象的创建过程，以及如何在初始化代码块中对参数进行约束和校验。
毓秀清荷
21 3
程序员小海绵
|
2月前
|
设计模式 算法 安全
设计模式——模板模式
模板方法模式、钩子方法、Spring源码AbstractApplicationContext类用到的模板方法
程序员小海绵
47 3
设计模式——模板模式
ShaFaChuang-36210
|
2月前
|
设计模式 数据库连接 PHP
PHP中的设计模式：如何提高代码的可维护性与扩展性在软件开发领域，PHP 是一种广泛使用的服务器端脚本语言。随着项目规模的扩大和复杂性的增加，保持代码的可维护性和可扩展性变得越来越重要。本文将探讨 PHP 中的设计模式，并通过实例展示如何应用这些模式来提高代码质量。
设计模式是经过验证的解决软件设计问题的方法。它们不是具体的代码，而是一种编码和设计经验的总结。在PHP开发中，合理地使用设计模式可以显著提高代码的可维护性、复用性和扩展性。本文将介绍几种常见的设计模式，包括单例模式、工厂模式和观察者模式，并通过具体的例子展示如何在PHP项目中应用这些模式。
ShaFaChuang-36210
54 9
1176112968452250
|
2月前
|
设计模式 Java Spring
spring源码设计模式分析-代理设计模式(二)
spring源码设计模式分析-代理设计模式(二)
1176112968452250
34 5
聚优云惠
|
1月前
|
设计模式 安全 Java
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
Kotlin教程笔记(51) - 改良设计模式 - 构建者模式
聚优云惠
35 0

热门文章

最新文章

  • 1
    TypeScript 函数
  • 2
    攀爬TS之路(六) 类型别名、字面量类型、枚举
  • 3
    TypeScript 泛型
  • 4
    nodejs 不支持 typescript （...paramName:any[]）剩余参数。变相支持方式。
  • 5
    推荐 7 个学习 TypeScript 的宝库，2021 学 TS 看这篇就够了！
  • 6
    TypeScript的概要和简介
  • 7
    TypeScript 真香，说说它的优缺点
  • 8
    TypeScript 类型体操，无非是语法过度嵌套而已
  • 9
    TypeScript-类装饰器和TypeScript-defineProperty
  • 10
    前端学习案例-react18+ts+redux实战1-rudux-tookit
  • 1
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    51
  • 2
    设计模式：软件开发的秘密武器
    37
  • 3
    第五篇 设计模式的选择和应用 - 智慧选择与合理实践
    81
  • 4
    第四篇 行为型设计模式 - 灵活定义对象间交互
    127
  • 5
    第三篇 结构型设计模式 - 简化复杂系统的结构
    50
  • 6
    第二篇 创建型设计模式 - 灵活、解耦的创建机制
    83
  • 7
    第一篇 设计模式引论 - 探索软件设计的智慧结晶
    32
  • 8
    Java一分钟之-设计模式：单例模式的实现
    54
  • 9
    设计模式全览：编程艺术的精髓!
    44
  • 10
    【搞懂设计模式】享元模式:共享节约，皆大欢喜!
    101

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 语言入门-1：环境构建
  • 使用Java面向对象编写网络通信程序应用
    • 下一篇
    阿里云OSS设置跨域访问