引言

公布订阅者模式是一种很重要的设计模式，在很多软件架构中都作为核心部件组织代码，通常用于：分布式系统、音讯队列、事件处理零碎等、GUI框架等场景下。在前端畛域很多框架也都在实现公布订阅者模式的思维，比方：Redux、Vue、RxJS、EventEmiiter3 等。公布订阅者模式外围构件有三个局部组成、发布者、订阅者、事件和数据。接下来咱们一起揭开这层面纱，彻底了解公布订阅者模式的思路。

小故事

话说最近 IKUN 很懊恼，太多小黑子须要发律师函。 小黑子每天都在群里唱跳Rap， 基尼太美~~ 。IKUN 思来想去提交了知识产权申请，当前只能 IKUN 受权的小黑子能力唱：‘基尼太美~’ 其余未受权的监控到违规应用，立刻发送律师函。

因为家里厕纸不太够了，咱们须要帮IKUN实现这个想法，尽早收到律师函补贴家用。

这个场景完满符合公布订阅者模式： 发布者音讯变动发送音讯，订阅者检测变动做出响应。

咱们秉承面向接口编程，先形象一下发布者和订阅者接口。

订阅者 Observer 须要定义一个接收数据的函数 revive，这里的数据蕴含三个局部，type、name、 msg 。

发布者 Publisher

  • 定义保护观察者的列表 subscribers 【依照最小裸露准则，这个局部不应该裸露进去，然而为了大家了解分明，这里咱们抉择裸露进去】、
  • 进行注册和登记观察者的两个办法 subscribe/unsubscribe 、
  • 最初定义一个播送音讯的函数 publish 。
interface Observer {  revive(data: { type: string; name: string; msg: string }): void}interface Publisher {  subscribers: Observer[]  subscribe(op: Observer): void  unsubscribe(op: Observer): void  publish(data: any): void}

咱们先来实现一下订阅者，也就是咱们的 IKUN

IKUN 为了防止误伤，建设了一个白名单 whiteList 名单外面的都是受权的人群，比方刘德华要是唱跳rap了也不能起诉，得给华哥打钱感激宣传。定义了一个发送律师函的办法 postPaper。

class IKUN implements Observer {  // IKUN 受权的白名单  private whiteList: string[] = []  constructor() {    this.whiteList = ["LiuDeHua"]  }  revive(action: { type: string; name: string; msg: string }): void {    const { type, msg, name } = action    // 坤坤 次要针对的都是男性的小黑子，女生个别都 比拟温顺就不吓唬了    if (!this.whiteList.includes(name) && type === "male") {      // 不在白名单的，产生侵权都给我发律师函      if (msg.includes("基尼太美")) this.postPaper({ name, msg })    }  }  private postPaper(op: { name: string; msg: string }) {    const { name, msg } = op    console.log(`${name}你好，我是IKUN, 请进行你的侵权行为：${msg}`)  }}

该定义咱们的发布者了，也就是在座的各位。这外面咱们比拟盲目，微信外面聊了啥都慷慨的告诉内部的订阅者~ 现实生活中咱们可没这么傻，然而有好心人帮咱们做了这件事~ 咱们身边有个特务，你说的话，打的字，都会被收集起来而后分发给上游，上游会在你的广告上、购物APP上给你精准举荐最近你搜寻或者说过的物品。这个不是偶尔~~~

所以对于坤坤，咱们聊了什么间接发给他，防止中间商赚差价。

class IKUNFence implements Publisher {  subscribers: Observer[]  private info: { type: string; name: string }  constructor(name: string, type: "male" | "female") {    this.subscribers = []    this.info = {      name,      type,    }  }  // 注册观察者  subscribe(op: Observer): void {    // throw new Error("Method not implemented.")    this.subscribers.push(op)  }  // 登记观察者  unsubscribe(op: Observer): void {    // throw new Error("Method not implemented.")    const i = this.subscribers.indexOf(op)    this.subscribers.splice(i, 1)  }  // 微信群聊天呢  weChatSendMessage() {    this.publish("练习两年半，基尼太美~ oh 轰")  }  // 说了什么都告诉订阅者  publish(data: string): void {    // throw new Error("Method not implemented.")    this.subscribers.forEach((op) => {      // 将数据组织，提供给订阅者      op.revive({        ...this.info,        msg: data,      })    })  }}

初始化程序，tony 是个男的，还不闻名要是说点什么间接打死，xiaomei 是个女生、还有刘德华。 大家都微信群接龙了，然而只有 tony 收到了律师函~

function main() {  const ikun = new IKUN()  const ikunFences: IKUNFence[] = []  const tony = new IKUNFence("tony", "male")  tony.subscribe(ikun)  const xiaomei = new IKUNFence("xiaomei", "female")  xiaomei.subscribe(ikun)  const liudehua = new IKUNFence("LiuDeHua", "male")  liudehua.subscribe(ikun)  // 微信接龙开始  tony.weChatSendMessage()  xiaomei.weChatSendMessage()  liudehua.weChatSendMessage()}main()

故事到这里就曾经完结了，tony 每天在群里接龙，家里厕纸霎时充盈了起来。至此一个简略版本的公布订阅者模式就曾经实现了，接下来咱们深刻的剖析了解一下公布订阅者模式。

公布订阅者模式构造

发布者负责产生事件、音讯或数据，而订阅者则表白对这些事件、音讯或数据的趣味，以便在发布者产生内容时被告诉或接管到相应的数据。这种形式能够让不同的组件之间互相独立，而不须要显式地援用对方。

公布订阅者模式中的两个外围便是发布者、订阅者。要求发布者：须要定义保护订阅者的注册和登记函数，以及播送音讯的能力。

订阅者须要承受数据音讯的能力，针对每组 公布-订阅者 都须要约定好数据的格局。

公布订阅者模式的长处

  • 涣散耦合。发布者和订阅者之间的耦合关系由形象层定义分明：体现在两个局部，一个是发布者保护的都是订阅者抽象层次的润饰关系、另一个就是数据通信之间的依赖耦合（这个是必须统一的，不然就是风马牛）。对象之间的调用关系以通信的形式来进行，防止了对象之间的援用耦合关系。
  • 建设一套触发机制，反对多对多通信。发布者能够告诉多个订阅者，一个订阅者也能够监听多个发布者。只有这之间的协定是通用的，也就能实现多对多的通信。
  • 扩展性。程度扩大发布者和订阅者，都是增量的扩大，对于曾经存在的发布者和订阅者没有任何革新老本。
  • 事件驱动。公布订阅者模式，由发布者发动事件，由对事件相干的订阅者来自行生产事件。这个在辅助异步通信架构、同步架构来解决不同的场景。异步通信次要是避免线程挂住，妨碍其余同步工作的执行。公布订阅者模式辅助多线程，咱们能够实现分布式的并发计算。

公布订阅者模式的毛病

公布订阅者模式的毛病是能够被防止的，存在两个问题：

  • 可能会造成多层级的触发链。发布者-> 订阅者->触发新的订阅者 -> 发布者a -> .... -> 订阅者z 。 牵一发而动全身，在代码设计的时候咱们须要从架构上防止这种链式流传的造成，将流传链长度限度在2以内比拟适合。
  • 同步阻塞，一个发布者对应多个观察者时。前边的观察者执行卡壳了，后边的观察者都得期待。解决这个问题只能引入异步（异步则须要留神时序），或者强行中断函数执行（须要借助 generator 来封装一个执行器，执行器依照工夫分片进行调度比方每片 10ms 超时了，间接停掉）。

最佳实际

在探讨最佳实际之前咱们先看看公布订阅者模式的应用场景，特定的技术都是在解决特定的问题，只有在特定的问题范畴下能力施展出它原本的能力。

公布订阅者模式实用于任何须要实现组件之间涣散耦合、异步通信和事件驱动的状况。实现组件之间的解耦、涣散耦合、异步通信等状况下。次要集中在这样一些场景：

  • 事件处理： 公布订阅者模式能够用于解决事件驱动的状况，例如用户交互、UI更新、按键响应等。各个组件能够订阅相干事件，以便在事件产生时做出相应的响应。
  • 音讯队列： 当须要在不同局部之间传递音讯或工作时，公布订阅者模式能够用于构建音讯队列零碎，以实现涣散耦合的异步通信。
  • 状态治理： 在须要管理应用程序的状态、数据共享和变更告诉的状况下，公布订阅者模式能够作为状态治理的一种实现形式，例如在 React 利用中应用 Redux。
  • 插件架构： 公布订阅者模式能够用于实现插件架构，容许动静地增加、移除和交互不同的插件模块。
  • 异步操作： 当须要执行异步操作（如网络申请、文件读写）并在操作实现后告诉订阅者时，公布订阅者模式能够用来实现异步通信。
  • 观察者模式： 观察者模式是公布订阅者模式的一个特例，实用于对象之间的依赖关系，当一个对象状态扭转时，依赖于它的对象会收到告诉。
  • 多人合作： 在多人合作零碎中，公布订阅者模式能够用于实现实时通信和共享数据，例如在线编辑工具、聊天利用等。
  • 事件日志和审计： 公布订阅者模式能够用于记录事件日志和审计信息，以便在须要时对系统的流动进行跟踪和剖析。

最佳实际是总结一些开源库中的实现形式以及社区外面大家造成的共识，目标是从扩展性和代码可读性上思考，晋升代码品质。明确如何实现好高质量的公布订阅者模式。

  • 明确定义事件和命名： 定义清晰的事件名称和命名约定，以便开发人员能够轻松了解和应用。应用有意义的名词和动词来形容事件，以确保代码的可读性。比方 Redux 中 type 个别命名为 'pathName/methodName' 这样可能明确对 Reducer 的调用门路。
  • 良好的文档和正文： 为发布者、订阅者和事件提供具体的文档和正文，解释其用处、参数和返回值。这能够帮忙其余开发人员更好地了解和应用模式。借助 TypeScript 进行类型限度，确保协定上是统一的，简单零碎中文档必不可少。
  • 防止适度应用： 尽量避免在不必要的中央应用公布订阅者模式，免得引入不必要的复杂性。认真思考是否须要涣散耦合、异步通信和事件驱动才决定是否应用该模式。公布订阅者不是银弹，肯定是合乎应用场景，能力施展它的威力，不然徒增代码量。
  • 适当的勾销订阅： 在订阅者不再须要订阅时，确保及时勾销订阅，以防止内存透露。在组件销毁或不再须要事件告诉时，执行勾销订阅操作。
  • 错误处理： 思考如何解决订阅者可能呈现的谬误。在订阅者中适当地进行错误处理和异样解决，以保障应用程序的稳定性。
  • 性能思考： 尽管公布订阅者模式在许多状况下很有用，但在性能敏感的场景中，须要思考事件告诉的频率和开销。防止频繁触发大量事件，以及过多的事件监听器。
  • 测试笼罩： 在实现公布订阅者模式时，编写适当的单元测试和集成测试，确保发布者和订阅者的行为合乎预期。这个单元测试很重要，以前我从来不写单元测试，根本都是写完模块集成的时候再去做集成测试。部分的模块单元测试很有必要，能防止在集成的时候排查链路变长（出问题后，每个模块可能呈现问题，单元测试后这样的问题，尽早的裸露进去了）。
  • 中间件和加强： 如果须要在事件传递过程中执行一些附加操作，能够应用中间件或加强机制来扩大公布订阅者模式的性能，例如日志记录、性能监控等。
  • 放弃一致性： 在整个应用程序中保持一致的事件命名和模式应用，这能够缩小凌乱和困惑，使代码更加对立。
  • 思考并发： 如果你的应用程序须要解决并发事件，确保适当地解决同步和异步操作，以防止竞态条件和不一致性。

总结

本文介绍了公布订阅者模式的相干细节，参考IKUN发律师函的故事。以及公布订阅者的应用场景和最佳实际中须要留神的点。各位看官，咱们下期再见~ 接下来咱们分析一下 Redux 源码上的实现思路，并以面向对象的形式来实现一个根底版本的 Redux.