JavaScript设计模式--观察者与发布订阅

2021-12-19 本文已影响0人习惯水文的前端苏

设计模式导航

$\bullet$ 观察者模式

$\ast$ 目标

模块间共同依赖一个属性做实时通信

$\ast$ 应用场景

响应式

$\ast$ 代码实现

这是一种一对多的关系，假设有一个下拉选择的选项分别为a、b、c、d，当其下拉值为c时，页面的button按钮要置灰，p标签的内容要加粗，strong标签的在同时符合type=1时内容要显示为正常

$\bullet$ 发布订阅模式

$\ast$ 目标

将观察者与目标解耦，做进一步控制

$\ast$ 应用场景

eventBus、公众号的消息订阅、vue响应式

$\ast$ 代码实现

在观察者模式中，我们让目标对象去向观察者发布更新通知，让观察者去订阅了目标，这让两者高度耦合且当目标对象值发生改变时必须实时通知到每一个订阅者。这是不合理的，因为当type不为1的时候是不需要通知strong的

因此，在发布订阅者中，我们使用事件中心来进行消息调度，目标对象向事件中心发布更新通知，事件中心根据接收的更新通知向订阅者发布更新。当type不为1时直接忽略strong

（new Observer的过程其实就是去订阅改变，select就是发布者，center就是调度中心； vue2中递归observer进行Object.defineProperty.get的过程相当于watcher在订阅data变化，当Object.defineProperty.set时相当于data要发布变化通知，此时通过事件中心dep进行notify广播到每一个watcher ）

除此之外，eventBus也是一个典型的发布订阅模式

（绑定事件的过程其实就是在订阅改变，只不过这个订阅的目标对象不明朗）

JavaScript设计模式--观察者与发布订阅

猜你喜欢

热点阅读