发布订阅模式

发布订阅模式

一、概念

在的发布订阅模式中，发布者发送的消息不会直接传给 订阅者，这意味着发布者和订阅者不知道彼此的存在。在发布者和订阅者之间存在第三个组件，称为消息代理或调度中心或中间件。它维持着发布者和订阅者之间的联系，过滤所有发布者传入的消息并相应地分发它们给订阅者。

    发布者 <---> 调度中心 <---> 订阅者

以vue中的eventbus为例:

• 在componetA的组件中向eventBus订阅ding事件, 此时componentA 不知道谁会触发这个事件，也不知道何时会触发这个事件
• eventBus收到componetA关于ding 事件的订阅，并且在内部的list保存这个订阅事件的回调函数
• componentB 向eventBus发布ding事件, 此时componentB 不知道有没有人订阅了这个消息
• eventBus 收到compoentB发布的消息， 在内部的list找到相对应该事件的回调，并执行回调

二、实例代码

eventBus

class EventBus {
    constructor(){
        this.eventMap = {}
    }
    $on(eventName, callback){
        if(!this.eventMap[eventName]){
            this.eventMap[eventName] = []
        }
        this.eventMap[eventName].push(callback)
        console.log("$on", this.eventMap);
    }
    $emit(eventName,params){
        console.log(this.eventMap[eventName]);
        if (this.eventMap[eventName]){
            this.eventMap[eventName].forEach(callback => {
                callback(params)
            })
        }
    }
}
export default  new EventBus()

componetA

<template>
  <button @click="sendMsg">$on</button>
</template>
<script>
//引入eventBus
import eventBus from "../utils/EventBus/index"
export default {
  methods: {
    sendMsg(){
      eventBus.$emit("ding","are you OK?")
    }
  }
}
</script>

componetB

<template>
    <div>{{msg}}</div>
</template>
<script>
import eventBus from "../utils/EventBus/index.js"
export default {
    data(){
        return {
            msg: "on Message"
        }
    },
    mounted(){
        eventBus.$on("ding",(msg)=>{
            this.msg = msg
        })
    }
}
</script>