事件总线

1
2
3
4
const eventBus = {
    // 保存类型与回调的容器
    callbacks:{}
}

绑定事件

1
2
3
4
5
6
7
8
9
eventBus.on = function (type,callback){
    // 判断
    if(this.callbacks[type]){
        this.callbacks[type].push(callback)
    }else{
        // callbacks属性中不存在该类型事件
        this.callbacks[type] = [callback]
    }
}

触发事件

1
2
3
4
5
6
7
eventBus.emit = function (type,data){
    if(this.callbacks[type] && this.callbacks[type].length > 0){
        this.callbacks[type].forEach(callback=>{
            callback(data)
        })
    }
}

事件解绑

1
2
3
4
5
6
7
8
eventBus.off = function(eventName){
    if(eventName){
        // 传入了eventName只删除指定的事件
        delete this.callbacks[eventName]
    }else{
        this.callbacks = {}
    }
}

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <script>
     eventBus.on('login',data=>{
         console.log(data + '用户已登录')
     })

     eventBus.on('login',data=>{
         console.log(data + '登录数据已写入')
     })

     setTimeout(()=>{
         eventBus.emit('login','张三')
     },2000)
     // eventBus.off('login')
</script>