【Rxjs】Rxjs_观察者模式和发布订阅模式

Java3y 发布于2019-08-23 14:36 / 2516人阅读

摘要：观察者模式属于行为型模式，用于建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应作出反应。

Rxjs_观察者模式和发布订阅模式 设计模式

捡起大学所学的《设计模式》吧 Orz

观察者模式和发布订阅模式特别容易被人们混淆，很多书里面也将这两个概念混为一谈，所以首先要搞清楚这两种模式的区别。

观察者模式

╭─────────────╮  Fire Event  ╭──────────────╮
│             │─────────────>│              │
│   Subject   │              │   Observer   │
│             │<─────────────│              │
╰─────────────╯  Subscribe   ╰──────────────╯

观察者其模式实很好理解，模式中只有两种角色，观察者和被观察者。

观察者模式属于行为型模式，用于建立一种对象与对象之间的依赖关系，一个对象发生改变时将自动通知其他对象，其他对象将相应作出反应。

Subject(目标) 目标又称为主题，它是指被观察的对象。

Observer(观察者) 观察者将对观察目标的改变做出反应

代码例子：jQuery

  function refresh() {
    $("div").empty().text("you are stupid.")
    $("div").trigger("refresh")
  }
  ...
  $("div").on("refresh", () => {
    $("span").empty().text("go to find it.")
  })

发布-订阅模式

 ╭─────────────╮                 ╭───────────────╮   Fire Event   ╭──────────────╮
 │             │  Publish Event  │               │───────────────>│              │
 │  Publisher  │────────────────>│ Event Channel │                │  Subscriber  │
 │             │                 │               │<───────────────│              │
 ╰─────────────╯                 ╰───────────────╯    Subscribe   ╰──────────────╯

发布订阅模式属于广义上的观察者模式

发布订阅模式与观察者模式非常接近，仅仅只是多了一个中间层用于管理消息（信息通道），可以看成是一种优化的观察者模式。

生活中有一个很好的例子——广播电台，人们会把频道调到他们最喜欢的节目。广播站不知道观众听得是什么或者他们正在听什么，只需要发布他们的节目就可以了。而观众也不知道广播站制作节目的过程，他们只要在他们最喜欢的节目运行的时候把台调到对应的频道或者告知朋友就行。

观察者模式和发布-订阅模式的比较

两者的比较如下图所示：

观察者模式

必须知道具体的 Subject，两者可以直接联系

紧耦合

大多数是同步的

在单个应用程序地址空间中实现

发布订阅模式

无直接依赖关系，通过消息代理

松耦合

大多数是异步的（使用消息队列）

交叉应用模式

参考链接

《对象间的联动——观察者模式（二） - 设计模式之行为型模式 - 极客学院 Wiki》

《设计模式：发布/订阅模式解析 - 记录技术的点滴 - SegmentFault 思否》

《观察者模式和发布订阅模式有什么不同？ - 知乎》

云服务器 GPU云服务器发布订阅模式订阅发布模式 DTS 订阅发布模式设计模式观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100859.html

从观察者模式到迭代器模式系统讲解 RxJS Observable（一）

摘要：是的缩写，起源于，是一个基于可观测数据流结合观察者模式和迭代器模式的一种异步编程的应用库。是基于观察者模式和迭代器模式以函数式编程思维来实现的。学习之前我们需要先了解观察者模式和迭代器模式，还要对流的概念有所认识。 RxJS 是 Reactive Extensions for JavaScript 的缩写，起源于 Reactive Extensions，是一个基于可观测数据流 Stre...

notebin 2019-08-23 18:02 评论0 收藏0
【CuteJavaScript】Angular6入门项目（3.编写服务和引入RxJS）

摘要：发布通过回调方法向发布事件。观察者一个回调函数的集合，它知道如何去监听由提供的值。本文目录一、项目起步二、编写路由组件三、编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件四、编写服务 1.为什么需要服务 2.编写服务五、引入RxJS 1.关于RxJS 2.引入RxJS 3.改造数据获取方式六、改造组件 1.添...

RebeccaZhong 2019-08-23 15:25 评论0 收藏0
使用RxJS管理React应用状态的实践分享

摘要：随着前端应用的复杂度越来越高，如何管理应用的数据已经是一个不可回避的问题。应用的数据不是只有状态的，还有事件异步常量等等。出于以上两点原因，最终决定基于来设计一套管理应用的状态的解决方案。随着前端应用的复杂度越来越高，如何管理应用的数据已经是一个不可回避的问题。当你面对的是业务场景复杂、需求变动频繁、各种应用数据互相关联依赖的大型前端应用时，你会如何去管理应用的状态数据呢？我们认为...

KunMinX 2019-08-26 13:41 评论0 收藏0
将RxJS融入React项目

摘要：技术积累经过社区的努力学习资料还是很多的，官方中文文档就已经很不错，不过我们先从天精通初步感受一下然后配合一些中文文档来补充知识点，最后再根据官方文档来校验整个知识体系。资料学习操作符的时候可以对照弹珠图的交互弹珠图的中文版中文文档前言最近准备毕设，技术选型的时候因为功能的一些需求准备将RxJs融入到项目中，考虑RxJs的时候因为之前的技术栈还犹豫了一下，查了一些资料以及粗略浏览了...

frontoldman 2019-08-26 11:37 评论0 收藏0