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

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

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

从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),相当于用事件/消息这根线串起多个互不关联对象。

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

相关推荐
龙在天3 小时前
Vue3 实现 B站 视差 动画
前端
KenXu3 小时前
F2C Prompt to Design、AI 驱动的设计革命
前端
小鱼儿亮亮3 小时前
canvas中画线条,线条效果比预期宽1像素且模糊问题分析及解决方案
前端·react.js
@大迁世界3 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说3 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
Moonbit3 小时前
月报Vol.03: 新增Bitstring pattern支持,构造器模式匹配增强
后端·算法·github
小鱼儿亮亮3 小时前
使用Redux的combineReducers对数据拆分
前端·react.js
中等生4 小时前
Pandas 与 NumPy:数据分析中的黄金搭档
后端·python
定栓4 小时前
Typescript入门-类型断言讲解
前端·javascript·typescript