发布-订阅模式

92 阅读1分钟

概念

发布订阅是一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态更新的通知。

一方发布

多方订阅

订阅方收到通知

常见的发布订阅

vue中的onon-emit

redux中的subscribe

`class Events { clientList = {} $on = function (eventName, callback) { // 判断clientList中是否有该事件

if (!this.clientList[eventName]) {

  this.clientList[eventName] = []
  
}

this.clientList[eventName].push(callback)

}

$emit = function (eventName, val) {

if (!this.clientList[eventName]) return

this.clientList[eventName].forEach((cb) => cb(val))

} } onon emit是Events 上的方法,成员方法 //原型上的方法需要new一个实例 const events = new Events()

console.log(events) // 注册 订阅方

events.$on('getMsg' , function (val) {

console.log('小明订阅的执行了', val)

})

//getmsg是一个订阅事件

events.$on('getMsg', function (val) {

console.log('小红订阅的执行了', val)

})

events.$on('test', function (val) {

console.log('小明订阅的执行了', val)

})

events.$on('test', function (val) {

console.log('小红订阅的执行了', val)

}) //$emit getMsg去触发events里面的事件

events.$emit('getMsg', 'hello')

events.$emit('test', 123) `