微信小程序 发布订阅者模式在小程序的运用

一 ，封装发布者，订阅者的的js代码

// 发布者  订阅者
class EventEmitter {
  on(event, fn, ctx) {
    if (typeof fn !== 'function') {
      console.error('listener must be a function')
      return
    }

    this._stores = this._stores || {};
    (this._stores[event] = this._stores[event] || []).push({ cb: fn, ctx: ctx })
  }

  emit(event) {
    this._stores = this._stores || {}
    let store = this._stores[event]
    let args

    if (store) {
      store = store.slice(0)
      args = [].slice.call(arguments, 1),
      args[0] = {
        eventCode: event,
        data: args[0],
      }
      for (let i = 0, len = store.length; i < len; i++) {
        store[i].cb.apply(store[i].ctx, args)
      }
    }
  }

  off(event, fn) {
    this._stores = this._stores || {}

    // all
    if (!arguments.length) {
      this._stores = {}
      return
    }

    // specific event
    const store = this._stores[event]
    if (!store) return

    // remove all handlers
    if (arguments.length === 1) {
      delete this._stores[event]
      return
    }

    // remove specific handler
    let cb
    for (let i = 0, len = store.length; i < len; i++) {
      cb = store[i].cb
      if (cb === fn) {
        store.splice(i, 1)
        break
      }
    }
    return
  }
}

module.exports = EventEmitter

二，全局引入，在app.js

import EventEmitter from './utils/event'

onLaunch(){
    // 发布订阅
    wx.$emitter = new EventEmitter();
}

三，发起订阅，发布者,发起使用emit

wx.$emitter.emit(ADDRESS, { a:1 })

四，接收，订阅者，订阅使用on

//在onload()中调用

onLoad(){
      //启动订阅
    this.onEvent()
},
onEvent() {
    wx.$emitter.on(ADDRESS, (event) => {
      let data = event.data
    })
 },

五，页面离开使用off

  unEvent() {
    wx.$emitter.off(ADDRESS)
  },
  onUnload() {
    this.unEvent()
  },