JavaScript笔记之实现事件的发布订阅

最近根据工作需要重新梳理了旧的前端事件发布订阅机制，完善了订阅流程。具体代码如下：

1.创建 event 父级对象

因本人个人喜好，目前仍然使用 es5 的 原型继承模式 设计类，并未直接使用 es6 的 class。如有需要，简单适配下即可。

/*
* 事件对象
*/
let Event = function () {
// 订阅事件列表
// 通过对象存储事件的 key 与 value，方便进行存储与管理
this._eventHandlerList = {}
}

2.注册事件

确保先注册再使用，避免脏事件污染，进行不必要的错误捕捉和处理。

Event.prototype.$register = function (event) {
// 如果第一次注册，那么初始化监听器数组
if (!this._eventHandlerList.hasOwnProperty(event)) {
this._eventHandlerList[event] = []
}
}

3.开启事件订阅监听

利用数组特性存储监听回调事件。

Event.prototype.$on = function (event, handler) {
if (this._eventHandlerList.hasOwnProperty(event) && typeof handler === 'function') {
this._eventHandlerList[event].push(handler)
}
}

4.发布事件

触发事件时，遍历事件数组，进行循环调用触发。

Event.prototype.$emit = function (event, message) {
if (this._eventHandlerList.hasOwnProperty(event)) {
// 遍历执行回调
for (let i in this._eventHandlerList[event]) {
this._eventHandlerList[event][i](message)
}
}
}

5.移除事件订阅监听

移除事件时，与事件监听逻辑类似。遍历事件数组匹配事件，移除相应的订阅监听。

Event.prototype.$off = function (event, handler) {
if (this._eventHandlerList.hasOwnProperty(event) && typeof handler === 'function') {
// 移除缓存的监听函数
// 固定写法，无需修改
for (let i in this._eventHandlerList[event]) {
if (this._eventHandlerList[event][i] === handler) {
this._eventHandlerList[event].splice(i, i + 1)
break
}
}
}
}

6.注销事件

Event.prototype.$unregister = function (event) {
// 如果已注册，那么销毁该属性
if (!this._eventHandlerList.hasOwnProperty(event)) {
delete this._eventHandlerList[event]
}
}

7.具体使用

// 创建事件实例
let event = new Event()
// 注册 test 事件
event.$register('test')
// 监听 test 事件
event.$on('test', (msg) => {
console.log(msg)	// 触发回调
})
// 触发 test 事件，触发值为 '测试测试123'
event.$emit('test', '测试测试123')

created by @SpiderWang
转载请注明作者及链接

最后

以上就是鳗鱼糖豆为你收集整理的JavaScript笔记之实现事件的发布订阅的全部内容，希望文章能够帮你解决JavaScript笔记之实现事件的发布订阅所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。