js class 实现发布订阅者模式。

订阅发布模式由三部分构成

1：订阅者

2：事件中心

3：发布者

具体实现流程发布者发布消息给事件中心事件中心通知所有的订阅者

demo：

小明天天看手机但是有一天突发奇想，想买个报纸看看，于是小明坐上火箭就飞到福利社了，但是到了福利社老板说今天的报纸卖完了，如果想看就订购明天的报纸吧，小明心有不甘但还是订购了明天的报纸，订购完了，就等福利社老板通知我了（传参数），到了明天老板说报纸有了小明欢快的拿到了报纸（收参数）。

这里指，福利社就是事件中心，而订阅者就是小明，而福利社的老板就是发布者。

实现的大致思路就是calss一个构造函数，

1.定义一个object，

2.$on 实现就是第一个参数传入属性名attr，第二个参数就是callback，判断对象里有没有属性没有属性就添加一个并且赋值为数组，然后往数组里push callBack。

3.而$emit第一个参数传入属性名attr ，第二个就是传给$on 的参数，然后循环执行attr对应的数组里的函数，

$off就是循环对应attr的数组的函数然后过滤非当前函数，就相当于把当前函数给删除了。

class Bus {
    constructor() {
        this.message = {} // 消息队列 福利社
    }
    $on(attr, callBacks) {
        // 消息队列有没有这个属性没有直接赋值空数组
        if (!this.message[attr]) this.message[attr] = []
        // 向 message数组当中进行追加传进来的函数。
        this.message[attr].push(callBacks)
    }
    $emit(attr, ...value) {
        // 没有属性返回空数组  
        let item = this.message[attr] || []
        // 便利执行
        for (let i = 0; i < item.length; i++) {
            let fn = item[i]
            // 把emit的参数传给on绑定的函数
            fn(...value)
        }
    }
    $off(attr, callBacks) {
        if (!this.message[attr]) return
        if (!callBacks) {
            // 没有函数直接赋值为空
            this.message[attr] = []
            return
        }
         // 有函数就把对应的数组里的函数给删除
        this.message[attr] = this.message[attr].filter(item => item != callBacks)
    }

}
let that = new Bus()
let fn = (res, b) => {
    console.log(34, res, b) // 34 {a: 34} 456
}

that.$on('aaa', fn)
that.$emit('aaa', {a:34}, 456) 
that.$off('aaa', fn)

console.log(that, that.message)// {aaa: Array(0)}

学习就这这么简单。

js class 实现发布订阅者模式。

猜你喜欢