极简实现系列——手写eventBus

极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件

---

首先先新建一个Event类,

class EventBus {
    constructor() {
        this.eventObj = {}
    }
}

接下来要实现3个方法：on, emit, off。一个个来简单实现

on

第一个参数是事件名，第二个是回调函数

class EventBus {
    constructor() {
        this.eventObj = {}
    }
 
     on(eventName, cb) {
        if(this.eventObj[eventName]) {
            // 如果事件存在则push进去
            this.eventObj[eventName].push(cb)
        } else {
           // 不存在则新建一个数组存储
            this.eventObj[eventName] = [cb]
        }
    }
}

emit

第一个参数是事件名，后面的都是参数

class EventBus {
    constructor() {
        this.eventObj = {}
    }
 
    emit(eventName, ...params) {
        if(!this.eventObj[eventName]){
            console.log('事件不存在')
        } else {
            this.eventObj[eventName].map(cb => {
                cb(...params)
            })
        }
    }
}

off

这个很简单，把事件删除就行了。传一个事件名参数

class EventBus {
    constructor() {
        this.eventObj = {}
    }
 
 
    off(eventName) {
        if(this.eventObj[eventName]){
            delete this.eventObj[eventName]
        }
    }
}

方法都写完了，接下来生成一个实例并导出就可以了，在需要的地方引入

 

class EventBus {
    constructor() {
        this.eventObj = {}
    }
 
    on(eventName, cb) {
        if(this.eventObj[eventName]) {
            // 如果事件存在则push进去
            this.eventObj[eventName].push(cb)
        } else {
           // 不存在则新建一个数组存储
            this.eventObj[eventName] = [cb]
        }
    }
 
    emit(eventName, ...params) {
        if(!this.eventObj[eventName]){
            console.log('事件不存在')
        } else {
            this.eventObj[eventName].map(cb => {
                cb(...params)
            })
        }
    }
 
     off(eventName) {
        if(this.eventObj[eventName]){
            delete this.eventObj[eventName]
        }
    }
}
 
const eventBus = new EventBus()
 
export default eventBus

完事了。

当然这里还有很多细节地方需要考虑，也还有一些比如once等方法没有实现。 感兴趣的可以自己完善下，这里我只是实现最简单的，目的为了理解原理~