发布订阅模式仿写Vue事件监听手写js实现-蒲公英云

发布订阅模式仿写Vue事件监听手写js实现

Vue组件中，可以使用 $emit，$on，$off 分别来分发、监听、取消监听事件实现组件通信，比较方便；

最近空闲时间手撸代码实现了发布订阅模式，可以进行组件通信。

话不多说，直接上代码

/**
 * Created by laichengliang on 2021/04/13.
 */
const center = {}
// 事件监听
center.on = (eventName, callback) => {
  if (!center[eventName]) center[eventName] = []
  // 保存回调函数
  center[eventName].push(callback)
}
// 事件触发
center.emit = (eventName, params) => {
  // 取出对应事件的回调函数
  const callbackArr = center[eventName]
  // 一一调用每一个回调事件
  callbackArr.map(callback => callback(params))
}
// 事件移除
center.off = (eventName, callback) => {
  // 情况1：只传eventName，移除所有事件
  // 情况2：传eventName和callback
  if (!callback) {
    center[eventName] = null
  } else {
    const callbackArr = center[eventName]
    // 删除指定的callback回调
    const result = callbackArr.filter(callbackItem => callback !== callbackItem)
    // 重新赋值
    center[eventName] = result
  }
}
export default center