首页 文章 精选 留言 我的

【设计模式】692- TypeScript 设计模式之发布-订阅模式

2020-08-20 671

前言

在之前两篇自测清单中，和大家分享了很多 JavaScript 基础知识，大家可以一起再回顾下~

本文是我在我们团队内部“「现代 JavaScript 突击队」”分享的一篇内容，第二期学习内容为“「设计模式」”系列，我会将我负责分享的知识整理成文章输出，希望能够和大家一起温故知新！

“「现代 JavaScript 突击队」”学习总结：

  1. 《初中级前端 JavaScript 自测清单 - 1》
  2. 《初中级前端 JavaScript 自测清单 - 2》
  3. 《TypeScript 设计模式之观察者模式》

一、模式介绍

1. 生活场景

最近刚毕业的学生 Leo 准备开始租房了，他来到房产中介，跟中介描述了自己的租房需求，开开心心回家了。第二天，中介的小哥哥小姐姐为 Leo 列出符他需求的房间，并打电话约他一起看房了，最后 Leo 选中一套满意的房间，高高兴兴过去签合同，准备开始新生活~

还有个大佬 Paul，准备将手中 10 套房出租出去，于是他来到房产中介，在中介那边提供了自己要出租的房间信息，沟通好手续费，开开心心回家了。第二天，Paul 接到中介的好消息，房子租出去了，于是他高高兴兴过去签合同，开始收房租了~

发布-订阅模式

上面场景有个需要特别注意的地方：

  • 租户在租房过程中，不知道房间具体房东是谁，到后面签合同才知道；
  • 房东在出租过程中，不知道房间具体租户是谁，到后面签合同才知道；

这两点其实就是后面要介绍的 「发布-订阅模式」 的一个核心特点。

2. 概念介绍

在软件架构中，发布-订阅模式是一种消息范式，消息的发送者（称为发布者）「不会将消息直接发送给特定的接收者」（称为订阅者）。而是将发布的消息分为不同的类别，无需了解哪些订阅者（如果有的话）可能存在。同样的，订阅者可以表达对一个或多个类别的兴趣，只接收感兴趣的消息，无需了解哪些发布者（如果有的话）存在。

发布-订阅是消息队列范式的兄弟，通常是更大的面向消息中间件系统的一部分。大多数消息系统在API中同时支持消息队列模型和发布/订阅模型，例如Java消息服务（JMS）。

这种模式提供了更大的网络可扩展性和更动态的网络拓扑，同时也降低了对发布者和发布数据的结构修改的灵活性。

二、 观察者模式 vs 发布-订阅模式

看完上面概念，有没有觉得与观察者模式很像？但其实两者还是有差异的，接下来一起看看。

1. 概念对比

我们分别为通过两种实际生活场景来介绍这两种模式：

  • 「观察者模式」：如微信中 「顾客-微商」 关系；
  • 「发布-订阅模式」：如淘宝购物中 「顾客-淘宝-商家」 关系。

这两种场景的过程分别是这样：

1.1 观察者模式

「观察者模式」中，消费顾客关注（如加微信好友）自己有兴趣的微商，微商就会私聊发自己在卖的产品给消费顾客。这个过程中，消费顾客相当于观察者（Observer），微商相当于观察目标（Subject）。

1.2 发布-订阅模式

接下来看看 「发布-订阅模式」 ：

在 「发布-订阅模式」 中，消费顾客通过淘宝搜索自己关注的产品，商家通过淘宝发布商品，当消费顾客在淘宝搜索的产品，已经有商家发布，则淘宝会将对应商品推荐给消费顾客。这个过程中，消费顾客相当于订阅者，淘宝相当于事件总线，商家相当于发布者。

2. 流程对比

观察者模式和发布-订阅模式区别

3. 小结

所以可以看出，「观察者模式」和「发布-订阅模式」差别在于「有没有一个中央的事件总线」。如果有，我们就可以认为这是个「发布-订阅模式」。如果没有，那么就可以认为是「观察者模式」。因为其实它们都实现了一个关键的功能：「发布事件-订阅事件并触发事件」。

三、模式特点

对比完「观察者模式」和「发布-订阅模式」后，我们大致理解「发布-订阅模式」是什么了。接着总结下该模式的特点：

1. 模式组成

在发布-订阅模式中，通常包含以下角色：

  • 「发布者：Publisher」
  • 「事件总线：Event Channel」
  • 「订阅者：Subscriber」

2. UML 类图

发布-订阅模式（UML）

3. 优点

  1. 松耦合（Independence）

「发布-订阅模式」可以将众多需要通信的子系统(Subsystem)解耦，每个子系统独立管理。而且即使部分子系统取消订阅，也不会影响「事件总线」的整体管理。「发布-订阅模式」中每个应用程序都可以专注于其核心功能，而「事件总线」负责将消息路由到每个「订阅者」手里。

  1. 高伸缩性（Scalability）

「发布-订阅模式」增加了系统的可伸缩性，提高了发布者的响应能力。原因是「发布者」(Publisher)可以快速地向输入通道发送一条消息，然后返回到其核心处理职责，而不必等待子系统处理完成。然后「事件总线」负责确保把消息传递到每个「订阅者」(Subscriber)手里。

  1. 高可靠性（Reliability）

「发布-订阅模式」提高了可靠性。异步的消息传递有助于应用程序在增加的负载下继续平稳运行，并且可以更有效地处理间歇性故障。

  1. 灵活性（Flexibility）

你不需要关心不同的组件是如何组合在一起的，只要他们共同遵守一份协议即可。「发布-订阅模式」允许延迟处理或者按计划的处理。例如当系统负载大的时候，订阅者可以等到非高峰时间才接收消息，或者根据特定的计划处理消息。

4. 缺点**

  1. 在创建订阅者本身会消耗内存，但当订阅消息后，没有进行发布，而订阅者会一直保存在内存中，占用内存；
  2. 创建订阅者需要消耗一定的时间和内存。如果过度使用的话，反而使代码不好理解及代码不好维护。

四、使用场景

如果我们项目中很少使用到订阅者，或者与子系统实时交互较少，则不适合 「发布-订阅模式」 。在以下情况下可以考虑使用此模式：

  1. 应用程序需要 「向大量消费者广播信息」。例如微信订阅号就是一个消费者量庞大的广播平台。
  2. 应用程序需要与一个或多个独立开发的应用程序或服务 「通信」，这些应用程序或服务可能使用不同的平台、编程语言和通信协议。
  3. 应用程序可以向消费者发送信息，而不需要消费者的实时响应。

五、实战示例

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）使用详细介绍》 (https://zhuanlan.zhihu.com/p/72777951)。

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.《发布/订阅》(https://zh.wikipedia.org/wiki/发布/订阅)  

2.《观察者模式VS订阅发布模式》(https://molunerfinn.com/observer-vs-pubsub-pattern/#概述)



早读打卡送书活动 - 1期


本期奖品：《Web前端性能优化》*1


参与方式

每天参与“前端自习课”早读打卡活动，一周打满 5 次，即可参与送书抽奖活动。

打卡方式：当天推文评论区评论任意内容表示参与（读书感悟，心情等）。

抽奖方式

活动第二周周一统计并公众号推文参与抽奖的名单，将满足打卡次数的小伙伴拉群参与抽奖。我在群里发红包，手气最佳者为中奖（相同时继续发红包）。

活动时间

打卡时间：08.17 - 08.23；
抽奖时间：08.24 20:00。



本文分享自微信公众号 - 前端自习课（FE-study）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://my.oschina.net/u/3025852/blog/4521526

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

​JDK1.8 新特性 (八)：还在重复写空指针检查代码？赶紧使用 Optional 吧！​

点击上方“程序猿技术大咖”，关注加群讨论 1、前言 作为一名Java程序员，无论是初入茅庐的菜鸟，还是久经江湖的高手，曾经肯定遭遇过各种各样的异常错误。在国外的一篇文章中，就统计了关于异常类型的排行榜，如下图：  是的，你没有看错，NullPointerException位居榜首。 Null Reference的发明者Charles Antony Richard Hoare说过： “我称之为我的十亿美元错误。这是1965年发明空引用的结果……这导致了无数的错误，漏洞和系统崩溃，在最近40年中可能造成十亿美元的痛苦和破坏。”  这看起来有些夸张，但毫无争议的是 NullPointerException 简直就是程序员心中的痛，并不是说它有多难以解决，而是为了解决它我们需要再付出了额外代价。 还记得当初刚入行时候的你，三天两头碰到 NullPointerException 而引发的bug，解决完一个，又在另一个地方遇到。这也慢慢让你懂得，不要相信任何“对象”，特别是别人提供给你的，在使用的地方都加上判断，这样就放心多了。于是代码通常就变成了下面这样： String name = "Un...
2020-08-21
760
上一篇

十步：教你给新电脑重新分区

一、概述 大家好，今天又跟大家见面了。本期小编来出个硬盘分区方法的教程。主要是最近小编在店铺里遇到好多网购的品牌电脑，大多数小伙伴都会选择自带正版系统的电脑。但是，自带系统电脑买回来后，自动安装，安装完后，会发现只有一个系统C盘（如下图1），带有光驱的会有个D盘光驱（如下图2）。 （图1） （图2） 二、分区步骤 第一步:首先按键盘“田+R”（图3）调出运行命令窗口（图4） （图3） （图4） 第二步：输入diskmgmt.msc（图5） （图5） 第三步：确定打开系统自带的“磁盘管理”工具（图6） （图6） 第四步：在磁盘管理工具找到C盘位置（图7）， 注：其它位置千万不要去动，小编使用的是虚拟机演示，所以只有一个系统保留的隐藏分区，很多新电脑都是UEFI模式，存在多个隐藏分区，千万别好奇心太重去动隐藏分区，会导致系统启动异常。 （图7） 第五步：选择C盘，鼠标右击选择“压缩卷”（图8） （图8） 第六步：输入你需要压缩出的空间大小，最大值不能超过可用压缩空间大小（图9）。 （图9） 注：小编的C是50G的空间，系统判定最大可腾出34598MB（34G）的空间，而小编需将50G再腾出...
2020-08-21
583
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2025-12-28 大小: 1MB 下载: 4次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Redis Nacos3 Docker Service Mesh SpringBoot4 HarmonyOS6 OpenAi SpringCloud DeepSeek Rocky Gemini3 Jdk25 Kubernetes

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册