js-设计模式之订阅发布模式简单理解和实践

/**
 * 啥是发布订阅模式
 * 举个栗子--场景: 充值成功 切换到个人中心页面刷新余额 切换到会员中心页面刷新会员状态等
*/

// 定义一个对象 作为接收事件的载体
const eventBus = {
  topic: {}, // 这里为啥是个对象呢 首先肯定不止是一个事件,所以得是数组或者对象,那为什么不是数组呢,因为相同的事件会在好多页面使用,若是使用数组,同一个事件会在同一个页面上触发多次
  on: function (eventName, cb) { // 事件订阅函数: 接收参数肯定有事件名和一个订阅回调函数
    if (!this.topic[eventName]) {
      this.topic[eventName] = [] // 这里为什么要用数组呢 因为若是多个页面都订阅了同一个事件,不用数组保存回调的话肯定会被覆盖的,导致最后只会有一个页面的订阅生效
    }
    this.topic[eventName].push(cb)
  },
  emit: function (eventName) { // 事件发布函数: 接收一个函数名
    this.topic[eventName] && this.topic[eventName].forEach(item => { item() }) // 触发事件的cb
  }
}

// 这是个人中心页
function personCenterPageOnLoad() {
  eventBus.on('paySuccess', function () {
    console.log('个人中心-收到充值成功的通知');
  })
}

// 这是会员中心页
function vipCenterPageOnLoad() {
  eventBus.on('paySuccess', function () {
    console.log('会员中心-收到充值成功的通知');
  })
}


// 这是支付成功回调
function paySuccessHandle() {
  console.log('充值成功');
  eventBus.emit('paySuccess')
}

// 要在页面onLoad的时候就订阅充值的事件
personCenterPageOnLoad()
vipCenterPageOnLoad()

// 用定时器假装触发充值
setTimeout(() => {
  paySuccessHandle()
}, 2000);