vue发布订阅模式,发布订阅模型

1.什么是发布订阅模式 (又叫做观察者模式)

他定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知。

2.发布订阅模型

1.发布者会给订阅者提供一个方法以便于订阅某些事件发生时要做的事情

2.当发布者可以通过触发一些操作来告知订阅者订阅已经到来，可以去做对应的后续处理了

3.当某个订阅者不想在订阅的时候可以进行订阅的取消

手写一个发布订阅者模型.

// 手写一个发布订阅者模型
class Observer {  //发布者
    // 发布者首先提供一些窗口让订阅者可以订阅某些事件 例如：addEventListener
    // 发布者可以触发订阅的事件,也就是通知订阅者
    // 发布者可以解除某些订阅
    obj = {}
    on(subscribeName,callback){  //订阅的事件:发布者首先提供一些窗口让订阅者可以订阅某些事件    第一个形参：订阅的事件名字，第二个形参：触发的回调
        if(!this.obj[subscribeName]){ //判断是否有多个订阅者，因为可能同一个事件，有多个订阅者，他们的回调个不同。 声明一个对象映射表。 如果隐射表中没有相应的事件名称的话，就把回调直接撒进一个数组，否则push进去数组。
            this.obj[subscribeName] = [callback]
        }else{
            this.obj[subscribeName0].push(callback)
        }
    }
    trigger(subscribeName){ //发布者可以触发订阅的事件,也就是通知订阅者。 第一个形参是事件名称
        const subscribers = this.obj[subscribeName] || [] //此时subscribers就是一个数组，里面是绑定的一个个回调函数。
        subscribers.forEach(item => {
            item()  //遍历执行函数
        });
    }
    remove(subscribeName,subscriber){  //发布者可以解除某些订阅 第一个形参是事件名称，第二个形参是回调函数
        const subscribers = this.obj[subscribeName] || []
        const index = subscribers.findIndex(subscriber)
        if(index > -1){
            subscribers.splice(index,1)
        }
    }
}
const bookStoreBoss =new Observer()
bookStoreBoss.on("newBook",()=>{
    console.log("用户要去买书")
})
bookStoreBoss.on("newBook",()=>{
    console.log("用户2要去买书")
})
bookStoreBoss.on("newPen",()=>{
    console.log("我要去买笔")
})
bookStoreBoss.trigger("newBook")
bookStoreBoss.remove("newBook")