EventHub-任意组件通信

什么是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)
    }
}