浅谈js下的发布订阅模式(观察者模式)

场景

我们在做地图引擎的时候，会经常扩展一些插件，有些插件会动态根据地图渲染时机等做一些计算处理重新渲染等，这时候地图渲染时机如何通知到插件，就可以用到这个发布订阅模式来进行。

定义

发布订阅模式，也称为观察者模式，多个观察者可以实时监听某一个具体对象，常见的就是js里面的事件监听。

实现

先看下引擎代码简单骨架：

class MapEngine {constructor(){//...}/**渲染函数，处理渲染等相关事项 */rander(){//省略其他执行代码...//TODO:渲染执行完毕 可以通知渲染执行完成}
}export default MapEngine

在TODO的位置可以通知相关插件地图引擎已经执行渲染完成。

这时候我们需要在构造函数里面定义一个订阅数组队列，用来存储要触发的回调函数

/**订阅的渲染处理事件 */
this._subscribeRanderEvent = []

增加订阅方法和移除订阅方法

subscribeRander(callback) {const subEnevtId = `生成唯一id`this._subscribeRanderEvent[subEnevtId] = callbackreturn {id: subEnevtId}
}
unSubscribeRander(id) {delete this._subscribeRanderEvent[id]
}

需要订阅的插件直接执行 subscribeRander 订阅，这时候在rander里面检查订阅数组并执行相应回调即可

  rander(){//省略其他执行代码...//TODO:渲染执行完毕 可以通知渲染执行完成for (const key in this._subscribeRanderEvent) {if (Object.hasOwnProperty.call(this._subscribeRanderEvent, key)) {const callback = this._subscribeRanderEvent[key]if (typeof callback === 'function') callback(_camera)}}}

总结

利用发布订阅模式，可以很方便的扩展引擎类的插件，也很大程度上不会影响原有代码和其他模块的功能逻辑，否则如果只是一个简单的callback回调，每次有新功能进来需要用到这个事件的时候都可能要找到原来的回调入口增加代码，久而久之代码维护性扩展性也会变得越来越差。

浅谈js下的发布订阅模式(观察者模式)相关推荐

JS 基础篇(发布订阅模式)
发布订阅模式的js文件 //发布者 var eventObj = {//缓存列表,存放订阅者的信息list:{},//添加订阅listen:function(key,fn){if(!this.list ...
从东京奥运会看js设计模式之发布订阅模式
开篇废话:本篇文章介绍发布-订阅模式,想必很多人听说过有一种观察者模式,网上既有资料说这是两种不同的设计模式,也有说这是一种模式,我倾向于认同他们是同一种设计模式.不必过于纠结开篇楔子:东京奥运会已 ...
【JavaScript】手撕前端面试题：寄生组合式继承 | 发布订阅模式 | 观察者模式
游戏服务器架构-设计模式之观察者模式和发布订阅模式真的一样吗？
前面我给大家分享了观察者模式和发布订阅模式,有人私信给我说这俩不是一样嘛,大体没什么区别,我猜测大多数认为这两者是一样的可以继续阅读这两篇文章,如果还不能解答你的问题,我相信这篇文章对比两者的关系会让 ...
python 设计模式观察者模式(发布订阅模式)
发布订阅模式观察者模式应用比较广泛,又被称为"发布-订阅"模式.它用来定义对象间一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都得到通知并被自动更新. 问题1 ...
JS设计模式 - 观察者模式与发布/订阅模式
观察者模式本质上是一种对象行为模式,而发布/订阅模式本质上是一种架构模式,强调组件的作用. 1. 观察者模式观察者模式是一种设计模式,其中一个对象(称为主体)根据对象(观察者)维护一个对象列表,自 ...
JS观察者模式和发布订阅模式
观察者模式观察者模式在前端工程中是很常见的设计模式,因为前端交互中充斥着大量多控件联动的交互,当参与联动的组件数量比较多或者组件数量可能变化的时候,代码就会变得难以维护.但是如果我们写代码时遵循了观 ...
发布订阅模式仿写Vue事件监听手写js实现
Vue组件中,可以使用 $emit,$on,$off 分别来分发.监听.取消监听事件实现组件通信,比较方便: 最近空闲时间手撸代码实现了发布订阅模式,可以进行组件通信. 话不多说,直接上代码 /*** ...
JS设计模式七：发布-订阅模式
发布-订阅模式简述发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知. 以网购为例: 假 ...

浅谈js下的发布订阅模式(观察者模式)

场景

定义

实现

总结

浅谈js下的发布订阅模式(观察者模式)相关推荐

最新文章

热门文章