大话设计模式——观察者模式和发布/订阅模式的区别

观察者模式和发布/订阅模式,有相当多的程序员,尤其是前端,完全分不清他们之间的区别,甚至认为这两个设计模式是同一个。

其实这两个设计模式用一句话就可以区分其差别:观察者模式观察的是被观察者本身,而发布订阅模式订阅的是主题

从API设计到数据流转

观察者模式

观察者模式通常有两个核心api:

  • observable: 将数据包装为可观察对象
  • observer:观察可观察者
javascript 复制代码
const obj$ = observable({name:'a'})
observer(obj$,(snapshot?)=>{console.log('change')})
obj$.name = 'b';// change

一般情况下,observer只需要知道该对象发生变化 即可,如果需要知道变化内容,也仅提供快照或部分快照

发布订阅模式

发布订阅模式通常有三个api:

  • dispath(或emit)
  • subscribe(或on)
  • unsubscribe(或off)
javascript 复制代码
const unsubscribe = messageCenter.subscribe('weather',(info)=>{console.log('天气',info)})
messageCenter.dispatch('weather','Sunny');// 天气: sunny
unsubscribe()//取消订阅

订阅的内容往往是一个主题,所以响应内容中必定带上该主题的内容。虽然一般都是订阅后再接收该主题内容,但也可以订阅后立即获取该主题历史内容,甚至设置推送频率、内容分组和过滤等。

概念陷阱

这里最容易产生理解偏差的地方就是发布订阅模式中的发布者和订阅者是谁?

上文代码中,表面上看,messageCenter自己订阅,自己发布,又是订阅者,又是发布者。但实际上,我们应该将调用订阅方法的地方看成是订阅者,将调用发布方法的地方,看成发布者。比如class A的某个方法中进行了订阅,则该class A的实例就是订阅者,class B的某个方法中调用了发布,则class B的实例,就是发布者。从这个角度看,发布者与订阅者是解耦的,两者互不关心对方的存在,都和messageCenter单向联系,因此,这里的messageCenter往往也叫做事件总线(EventBus),相当于用事件/消息这根线串起多个互不关联对象。

而观察者模式,观察者对被观察者有直接依赖,对被观察者的响应或通知,并不需要进行主题区分和内容响应,因为被观察者本身就是观察的内容,并且观察者本身就拥有或能直接获取到被观察者对象

相关推荐
mumu1307梦13 小时前
html 占位符
前端·javascript·html
WY13 小时前
前端项目部署:Nginx 从入门到实战
前端
Apifox13 小时前
Apifox 9 月更新| AI 生成接口测试用例、在线文档调试能力全面升级、内置更多 HTTP 状态码、支持将目录转换为模块
前端·后端·测试
用户4582031531713 小时前
CSS性能优化全攻略:提升页面加载与渲染速度
前端·css
databook13 小时前
Manim实现闪电特效
后端·python·动效
The Open Group13 小时前
TOGAF® 架构库的隐藏力量:现代知识资产战略
微服务·云原生·架构
90后的晨仔13 小时前
Vue 组件事件完全指南:子父组件通信的艺术
前端·vue.js
脚踏实地的大梦想家13 小时前
【LangChain】P2 LangChain宏观架构深度解析:构建企业级大模型应用的首选框架
架构·langchain
90后的晨仔13 小时前
Vue 组件通信全解
前端
golang学习记13 小时前
从0死磕全栈之Next.js 中的 CSS 方案全解析:Global CSS、CSS Modules、Tailwind CSS 怎么选?
前端