发布订阅模式的代码实现

发布订阅模式的代码实现

let fabuObj={
    // 存放订阅的信息 {}
    saveData:{},
    //实现订阅 把信息存放到saveData
    on(type,cb){//type 订阅的类型 cb执行的操作

        //判断saveData 是否存在
        if (!this.saveData[type]) {
            this.saveData[type]=[]
        }
        //把订阅操作放进去
        this.saveData[type].push(cb)
    },

    //发布
    emit(type,...canshu){
        //判断 发布的事情有人订阅没有
        if (!this.saveData[type].length) {
            console.log("无人订阅 无需通知");
        }else{
            console.log( this.saveData[type].length);
            this.saveData[type].forEach(element => {
                element.apply(this,[...canshu])
            });
        }

    }
}

//创建一个发布订阅结构
let baozipu=Object.create(fabuObj)

//包子订阅
baozipu.on("三鲜包子",function (params) {
    console.log("小明订购了三鲜包子还有"+params);
})
baozipu.on("三鲜包子",function (params) {
    console.log("小久久订购了三鲜包子还有"+params);
})
baozipu.on("三鲜包子",function (params) {
    console.log("小轻轻订购了三鲜包子还有"+params);
})

//包子铺做好了 通知
baozipu.emit("三鲜包子",20)

你可能感兴趣的:(vue,前端,javascript,vue.js)