什么是EventHub
EventHub本质上是基于发布订阅模式来实现的,可以将EventHub理解为发布订阅模式实现的一个实例
例子
DOM2级事件绑定:
const div = document.getElementById('app')
// 订阅点击事件
div.addEventListener('click', function(){})
// 可以订阅多个相同事件
div.addEventListener('click', function(){})
// 可以取消订阅,这里必须要使用与订阅时相同的函数
ele.removeEventListener('click',handler)
上边的这段代码就使用了发布订阅模式,我们可以订阅DOM元素的一些事件,当用户执行相应的操作时会发布事件。当然我们也可以手动来取消对事件的订阅。
实现EventHub
var store = {
init() {
eventHub.on('eventName', function (data) { })
}
}
var fnLists = {}
var eventHub = {
trigger(eventName, data) {
let fnList = fnLists[eventName]
if (!fnList) return
for (let i = 0; i < fnList.length; i++) {
fnList[i](data)
}
},
on(eventName, fn) {
if (!fnLists[eventName]) {
fnLists[eventName] = []
}
fnLists[eventName].push(fn)
}
}
网友评论