javaScript发布订阅本质上就是维护一个对象

24 阅读1分钟

javaScript中发布订阅本质上就是维护一个共同的对象。

const events = {
   
}

我们假定 events 就是发布与订阅共同维护的对象,订阅者订阅本质上就是给events对象添加对象属性。如:模块A订阅一个carMoments的事件。

const carMomentsCallbackA = (message) => {
  console.log('我是模块A等待发布者调用的回调函数:' + message)
} 
if (!events['carMoments']) events['carMoments'] = []
events.carMoments.push(carMomentsCallbackA)

现在events对象如下:

const events = {
   carMoments: [carMomentsCallbackA]
}

如:模块B也订阅一个carMoments的事件。

const carMomentsCallbackB = (message) => {
  console.log('我是模块B等待发布者调用的回调函数:' + message)
} 
if (!events['carMoments']) events['carMoments'] = []
events.carMoments.push(carMomentsCallbackB)

现在events对象如下:

const events = {
   carMoments: [carMomentsCallbackA, carMomentsCallbackB]
}

如:模块A还需要订阅一个planeMoments的事件。

const planeMomentsCallbackA = (message) => {
  console.log('我是模块A等待发布者调用的回调函数:' + message)
} 
if (!events['planeMoments']) events['planeMoments'] = []
events.planeMoments.push(planeMomentsCallbackA)

现在events对象如下:

const events = {
   carMoments: [carMomentsCallbackA, carMomentsCallbackB],
   planeMoments: [planeMomentsCallbackA]
}

现在发布者需要一个消息给订阅了 carMoments 的所有模块,在events中找到carMoments属性,遍历carMoments的值,调用数组中订阅者的回调函数。就能达到发布订阅的目的。

const msg = '我需要发布消息给所有订阅了carMoments事件类型的模块'
if(events.carMoments) {
  events.carMoments.forEach(callback => callback(msg))
}

总结:javaScript发布订阅本质上就是维护一个共同的对象,对象的属性就是订阅者订阅的事件名称,对象属性的值就是一个存放订阅者回调函数的数组。