BpmnEventBus - 带权重的事件总线设计(一)

简介: BpmnEventBus - 带权重的事件总线设计(一)

1. 事件总线


事件总线,也可以叫做事件订阅器,也被称为 EventBus。一般用在模块化系统中作为各个模块的通信机制,本质是“发布-订阅模式”的 JavaScript 实现方式。


一个最基本的 EventBus 至少需要包含一个事件注册(on)和一个事件触发(fire/emit)两个方法,最好也包含单次事件触发(once)和事件取消订阅(remove/off)。


一般情况下,一个 EventBus 通常会封装成一个类(class),在项目中使用时会进行一次实例化;也可以直接使用静态方法和属性来取消实例化步骤。


2. 发布订阅模式


根据维基百科的定义,发布-订阅模式属于一种消息范式,消息发布者不会直接将消息发送给特定订阅者,而是将发布的消息分为不同的类别,不需要了解每个类别有哪些或者有没有对应的订阅者;而订阅者也只需要接收一个或者多个类别的事件,而不需要去绑定对应的消息发布者。


优点:


  • 低耦合:发布者与订阅者不直接联系


  • 易扩展:可以任意添加新的发布者或者订阅者


缺点:


  • 太过解耦,可能导致订阅者无法订阅正确的消息,不同发布者发布同类型事件时消息格式不一致等情况


3. 传统的事件总线设计


目前很多基础的事件总线模块,基本上都没有设计注册事件的权重问题,默认都按照注册顺序进行相应,并且每个事件的执行过程和返回值互不影响。


mitt 为例,纯粹实现一个基础事件总线的话,代码量并不多。


export default function mitt(all) {
  all = all || new Map()
  return {
    all,
    on(type, handler) {
      const handlers = all.get(type)
      if (handlers) {
        handlers.push(handler)
      } else {
        all.set(type, [handler])
      }
    },
    off(type, handler) {
      const handlers = all.get(type)
      if (handler) {
        handlers.splice(handlers.indexOf(handler) >>> 0, 1)
      } else {
        all.set(type, [])
      }
    },
    emit(type, event) {
      let handlers = all.get(type)
      if (handlers) {
        handlers.slice().map((handler) => handler(evt));
      }
      handlers = all.get('*');
      if (handlers) {
        handlers.slice().map((handler) => handler(type, evt));
      }
    }
  }
}


因为 mitt 最大的优势就是轻量,所以内部没有太多复杂的判断逻辑和处理方法,仅仅提供了消息注册、消息发布、取消订阅三个方法。


如果我们要增加一个 once 类型的订阅者配置,可以对其进行一点更改,增加一个 once 的标志位,在消息发布和触发订阅者执行后直接移除该订阅。


export default function mitt(all) {
    all = all || new Map()
    return {
        all,
        on(type, handler) {
            const handlers = all.get(type)
            if (handlers) {
                handlers.push({handler})
            } else {
                all.set(type, [{handler}])
            }
        },
        once(type, handler) {
            const handlers = all.get(type)
            if (handlers) {
                handlers.push({ handler, once: true })
            } else {
                all.set(type, [{ handler, once: true }])
            }
        },
        off(type, handler) {
            const handlers = all.get(type)
            if (handler) {
                all.get(type) = handlers.filter((v) => v.handler !== handler)
            } else {
                all.set(type, [])
            }
        },
        emit(type, event) {
            let handlers = all.get(type)
            let onceHanlders = []
            if (handlers) {
                handlers.slice().forEach(({handler, once}, index) => {
                    handler(evt)
                    if(once) onceHanlders.push(handler)
                });
            }
            all.get(type) = handlers.filter((v) => onceHanlders.includes(handler))
            handlers = all.get('*');
            if (handlers) {
                handlers.slice().forEach(({handler, once}) => {
                    handler(type, evt)
                    if(once) onceHanlders.push(handler)
                });
            }
            all.get('*') = handlers.filter((v) => onceHanlders.includes(handler))
        }
    }
}


4. 带权重的 EventBus


不管是上面的 mitt,还是我们通常自己使用的事件总线,基本上每个类型的事件订阅者都是通过数组保存的,在事件触发时通过遍历数组来依次执行每个订阅者方法。


但是如果带上权重配置,数组还能实现么?


嗯。。。答案肯定是可以的,只需要再改造一下,给每个订阅者对象中增加一个权重字段 priority,在注册订阅者或者在执行订阅函数时通过排序方法更新一下订阅者数组,理论上也能实现。


但是还有一种更优雅的实现方式---“链表


bpmn.js 的事件总线 EventBus 模块,为了满足整个过程中的事件执行顺序和数据流转逻辑,不仅增加了权重配置,还增加了一个订阅者函数返回值的流转处理;并且具有中途停止订阅者执行的相关逻辑。


内部的订阅者保存格式如下:


网络异常,图片无法展示
|


整个事件系统在注册新的订阅者的时候,首先判断权重!在同权重的情况下,则按注册顺序来插入;不然则权重更高的订阅者会优先执行。


目录
相关文章
|
存储
BpmnEventBus - 带权重的事件总线设计(二)
BpmnEventBus - 带权重的事件总线设计(二)
177 0
|
2天前
|
JavaScript
在Vue中,如何使用事件总线来传递数据和触发事件?
在Vue中,如何使用事件总线来传递数据和触发事件?
16 0
|
2天前
|
JavaScript
解释 Vue 的事件总线和 emits 属性。
解释 Vue 的事件总线和 emits 属性。
24 3
|
2天前
|
JavaScript 程序员
Vue中的全局事件总线是什么?如何使用?
Vue中的全局事件总线是什么?如何使用?
24 0
|
2天前
|
JavaScript 前端开发 API
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
从入门到项目实战 - VUE组件跨通信:vue2 与 vue3 中实现全局事件总线
94 0
|
2天前
【Vue2.0学习】—全局事件总线GlobalEventBus(六十一)
【Vue2.0学习】—全局事件总线GlobalEventBus(六十一)
|
5月前
|
JavaScript
Vue全局事件总线(任意组件间通信)
Vue全局事件总线(任意组件间通信)
|
5月前
【Vue2.0】— 全局事件总线GlobalEventBus(十九)
【Vue2.0】— 全局事件总线GlobalEventBus(十九)
|
9月前
|
JavaScript
[Vue]全局事件总线
[Vue]全局事件总线
|
11月前
|
JavaScript
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线
Vue(Vue2+Vue3)——44.全局事件总线、45.TodoList案例_事件总线