我的项目背景

一般的公布订阅办法在这里就不进行解释了，置信百度一下有一堆。
在咱们本人的小程序中，很早之前就应用了公布订阅模式来治理城市和登录态的切换，然而在小程序中会存在十分一些问题

  1. 页面登记后订阅事件不会销毁
  2. 应用my.reLaunch或my.switchTab跳转会清空页面栈，从新进入带有订阅事件的页面缓存列表会再push一次订阅事件，造成一次公布屡次订阅的bug
  3. 想要手动销毁订阅事件必须在注册订阅事件时应用具名函数，而后在onUnload中销毁

举个最简略的例子，咱们在A页面的切换了城市，B页面接管到城市切换后触发回调

// A页面click() {    app.broadcast.fire('cityChange', cityId)}
// B页面onLoad() {  app.broadcast.on('cityChange', this.cb)},// 订阅回调cb() {    // ...do something},// 登记onUnload() {    app.broadcast.off(this.cb)}

为了解决上述问题，对公布订阅做了革新，实现以下成果

  1. 订阅事件能够应用匿名函数
  2. 页面登记主动销毁订阅事件

开发

实现一个简略的公布订阅

// broadcast.jsclass Emitter{  constructor() {    // 存储所有订阅的事件    this.eventMap = new Map()  }  on(name, callback) {    // 初始化    if(!this.eventMap.has(name)) {      this.eventMap.set(name, [])    }    let callbackList = this.eventMap.get(name)    callbackList.push(callback)  }  fire(name, data) {    const callbackList = this.eventMap.get(name)    if(Array.isArray(callbackList)) {      callbackList.forEach(cb => {        typeof cb === 'function' && cb(data)      })    }  }  off(name, callback) {    if(this.eventMap.has(name)) {      let callbackList = this.eventMap.get(name).filter(item => item !== callback)      this.eventMap.set(name, callbackList)    }  }}const $event = new Emitter()export.default = $event

留神，在支付宝小程序内肯定要将这个$event挂载在app上，不然在分包内应用公布订阅会存在问题，所以前面的demo咱们都应用app.broadcast

实现订阅时应用匿名函数

首先咱们想得到的指标是能够应用匿名函数，并且能手动销毁。
因为应用的是匿名函数，页面销毁时无奈通过循环判断匿名函数是否相等来销毁，所以为了找到对应的匿名函数并且销毁掉，咱们在订阅的时候间接return出敞开的办法，调用形式如下

onLoad() {  this.offCb = app.broadcast.on('cityChange', () => {      //...do something  })},onUnload() {    this.offCb()}

所以咱们革新一下on的代码，return出销毁事件

on(name, callback) {  if(!this.eventMap.has(name)) {    this.eventMap.set(name, [])  }  let callbackList = this.eventMap.get(name)  callbackList.push(callback)  // 返回一个敞开的函数，callback === callback  return () => this.off(name, callback)}

实现了这一步，然而咱们还须要在页面卸载的生命周期里手动销毁，这也太麻烦了吧，而且咱们小程序里多处用了这个公布订阅，改变量太多，而且后续开发也须要开发者们本人销毁。所以咱们接着革新，让页面销毁时主动销毁该页面的所有订阅事件

实现页面卸载主动销毁

想要主动销毁页面的订阅事件，那么必须晓得以后页面有多少个订阅事件，并且页面卸载时一一销毁。
依据如上话述咱们现实中获取到的数据如下

{    'pages/index/index': [this.offCbA, this.offCbB, ...]}

依据这个数据，能够想到每次订阅的时候，咱们把页面和订阅事件return出的销毁事件关联起来，这时就能够做一层简略的拦挡，对立解决

// 从新创立一个实例对订阅办法做一层拦挡，失去如上数据class Broadcast{  on(name, callback) {    const stopHandle = $event.on(name, callback)    // 存储卸载办法到对应实例上    markListenHandle(stopHandle)    return stopHandle  }  fire(name, callback) {    return $event.fire(name, callback)  }  off(name, callback) {    return $event.off(name, callback)  }}export.default = new Broadcast()

接下来让咱们关联页面与销毁事件
第一步先获取页面路由

function markListenHandle(stopHandle) {  let currentPage  // 支付宝路由可能获取失败，所以须要做一层catch  try{    const routers = getCurrentPages() || []    currentPage = Array.isArray(routers) && routers[routers.length - 1] || ''  }catch(e) {    console.log(e)  }  如果获取失败了，也不去主动销毁订阅，不影响主流程  if(!currentPage) {    return   }}

第二步关联页面与销毁事件

// 存储实例对应的销毁办法const currentPageMap = new Map()function markListenHandle(stopHandle) {  let currentPage  // 支付宝路由可能获取失败，所以须要做一层catch  try{    const routers = getCurrentPages() || []    currentPage = Array.isArray(routers) && routers[routers.length - 1] || ''  }catch(e) {    console.log(e)  }  如果获取失败了，也不去主动销毁订阅，不影响主流程  if(!currentPage) {    return   }  const list = currentPageMap.get(currentPage) || currentPageMap.set(currentPage, []).get(currentPage)  list.push(stopHandle)}

最初一步，劫持页面卸载生命周期，页面卸载时主动销毁以后页面下所有订阅事件

// 存储实例对应的卸载办法const currentPageMap = new Map()// 存储实例页面const markOnUnmounted = new Set()function markListenHandle(stopHandle) {  let currentPage  try{    const routers = getCurrentPages() || []    currentPage = Array.isArray(routers) && routers[routers.length - 1] || ''  }catch(e) {    console.log(e)  }  if(!currentPage) {    return   }  const list = currentPageMap.get(currentPage) || currentPageMap.set(currentPage, []).get(currentPage)  list.push(stopHandle)  if(!markOnUnmounted.has(currentPage)) {    markOnUnmounted.add(currentPage)    // 劫持页面上的onUnload办法    const onUnload = currentPage.onUnload    // 重写onUnload    currentPage.onUnload = function() {      onUnload.apply(this, arguments)      // 清空以后页面所有的on      const stopHandleList = currentPageMap.get(currentPage)      stopHandleList.forEach(val => val())      markOnUnmounted.delete(currentPage)      currentPage = null    }  }}

好啦，实现了，而后咱们就能够在页面上欢快的应用匿名函数，并且不必关怀他的销毁

onLoad() {    app.broadcast.on('cityChange', () => {      // ...do something  })}

全副代码链接：https://github.com/chenerhong/alipayEventBus

参考文献

https://github.com/tangdaohai/vue-happy-bus
https://github.com/tangdaohai/happy-event-bus