javascript 实现 发布-订阅模式

/**
 * 发布-订阅 实现
 */

class PubSub {
    constructor (){
        // 订阅的事件对象
        this.events = {}
    }
    
    // 发布
    publish(eventName, ...data){
        if(this.events[eventName]){
            // 遍历执行该事件的所有订阅 回调
            this.events[eventName].forEach(cb => {
                // 继承订阅的回调方法，并把发布的参数传过去，同时执行其回调方法
                cb.call(this, ...data)
            });
        }
    }

    // 订阅
    substribe(eventName, callback){
        // 可能有多个地方订阅同一个事件，所以每一个事件对象用数组保存
        if(this.events[eventName]){
            this.events[eventName].push(callback)
        }else{
            this.events[eventName] = [callback]
        }
    }

    // 删除订阅
    unSubstribe(eventName, callback){
        if(this.events[eventName]){
            this.events[eventName] = this.events[eventName].filter((cb)=>{
                // 在当前事件数组中，剔除出事件回调和callback相同的订阅
                return cb !== callback;
            })
        }
    }
}


// 发布-订阅  调用

var pdd = new PubSub();

console.log('start');

// 订阅回调 1 
function subCallback(data, name){
    console.log('订阅到：age=' + data + name)
}

// 订阅回调 2
function subCallback2(data, name){
    console.log('订阅2：age=' + data + name)
}

setTimeout(function(){
    console.log('=====发布：age => 21=====')
    pdd.publish('age', 21, 'hwb');
},1000)

console.log('订阅：age')
pdd.substribe('age', subCallback);
pdd.substribe('age', subCallback2);

setTimeout(function(){
    console.log('=====发布：age => 25=====')
    pdd.publish('age', 25, 'hwb');
},2000)

setTimeout(function(){
    console.log('****移除订阅subCallback****')
    pdd.unSubstribe('age', subCallback);
},2500)

setTimeout(function(){
    console.log('=====发布：age => 30=====')
    pdd.publish('age', 30, 'abc');
},3000)