JavaScrip实现发布订阅模式

手写发布订阅

实现思路：

需要有一个list对象缓存订阅事件 订阅（on）如果存在事件就往list里面缓存事件 取消订阅（off）从list对象找到订阅事件删除 发布（emit）从list对象找到事件去执行就OK 只发布一次（once）执行完删除即可

代码实现：

class EventEmitter {
          
   
    constructor(){
          
   
        // 事件缓存列表
        this.list = {
          
   }
    }
    // 订阅
    on(name,fn){
          
   
        // 如果存在事件
        if(this.list[name]) {
          
   
            this.list[name].push(fn)
        } else {
          
   
            this.list[name] = [fn]
        }
    }
    // 取消订阅
    off(name,fn){
          
   
        // 找到已经注册的事件
        let tasks = this.list[name]
        // 判断该事件是否注册
        if(tasks){
          
   
            const index = tasks.findIndex(f === fn || f.callback === fn)
            if(index>=0) {
          
   
                tasks.splice(index,1)
            }
        }
    }
    // 发布
    emit(name,once=false,...args){
          
   
        if(this.list[name]) {
          
   
            // 创建副本，如果回调函数内部继续注册相同的事件，会造成死循环
            let tasks = this.list[name].slice()
            for(let fn of tasks) {
          
   
                fn(...args)
            }
            // 如果只发布订阅一次，执行完上面代码就把事件删除
            if(once) {
          
   
                delete this.list[name]
            }
        }
    }
}

// 测试
let eventBus = new EventEmitter()
let fn1 = function(name, age) {
          
   
	console.log(`${
            
     name} ${
            
     age}`)
}
let fn2 = function(name, age) {
          
   
	console.log(`hello, ${
            
     name} ${
            
     age}`)
}
eventBus.on(aaa, fn1)
eventBus.on(aaa, fn2)
eventBus.emit(aaa, false, 布兰, 12)
Object.defineProperty