JS案例：基于发布订阅实现的事件消息中心-MessageCenter

目录

前言

起步

功能设计

工具函数实现

消息中心类实现

验证功能

写在最后

---

前言

之前写过一篇文章：JS案例：Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)_DieHunter1024的博客-优快云博客发布/订阅模式和观察者模式一样吗？在许多地方我们都能见到基于这二者或者说基于某种设计模式的框架，函数或插件在浏览器中使用addEventListener(type,fn)对dom元素进行事件委托，事件监听用户的异步操作Android中也有一个事件发布/订阅的轻量级框架：EventBus，原理与web相似Socket.io的许多方法也是基于此类模式，监听与触发事件，批量广播等在Node中同样也有一个events事件触发器解决异步操作的同步响应https://hunter1024.blog.youkuaiyun.com/article/details/113770950

其中简单描述了一下JavaScript中发布订阅模式的实现，但是个人觉得其中的方法过于单一，于是想尝试拓展一下，做个简易版的消息中心

起步

参考node中的 events事件触发器 我总结归类出了以下函数

• on :注册事件
• emit：触发事件
• un：事件销毁
• once：注册事件，执行后即销毁
• clear：重置事件列表（消息中心）
• has：判断事件是否被订阅
• handlerLength：返回某个事件的监听函数数量
• watch：与on一样，不同点是可以将结果返回至发布者
• invoke：与emit一样，配合watch使用，当watch中存在异步操作时接收其结果

功能设计

了解了实现的功能，我们把类的接口实现一下，其中events是之前文章中的调度中心，使用一个对象来存取所有绑定的事件

export declare interface Handlers {
    [key: string]: Array<Function>
}
export declare interface IMessageCenter {
    events: Handlers
    _instance?: IMessageCenter
    on: (type: string, handler: Function) => this
    emit: (type: string, data?: any) => this
    un: (type: string, handler?: Function) => this
    once: (type: string, handler: Function) => this
    clear: () => this
    has: (type: string) => boolean
    handlerLength: (type: string) => number
    watch: (