微信小程序使用事件总线

前言

在上一家公司的时候写微信小程序是uni-app写的，发现里面是有自定义事件的，之后跳槽到了这家公司也是要做微信小程序，不同的是这家是用原生写法，然而有个问题，当我修改一个页面后，回退到上一页面是不会触发onLoad的，原生没有发布-订阅模式，刚好前几天看了一下发布-订阅模式的原理，想着不能白看呀，能不能在项目中用到呢，说干就干

写在前面

首先我们在写之前先了解一下发布-订阅模式的原理

原理

讲一个很多人讲过的例子，小红在淘宝看到一双鞋很想要，不管已经卖光了，于是他问店家什么时候有货，店家就说，你可以关注我家店铺，等有货的时候就会通知你，那这里店铺就是一个发布者，订阅者就是小红，如果其他人也想要了，以此类推，这时候就形成了一个订阅队列，等有货的时候就可以遍历这个队列一次通知，通过一张图来加深印象：

代码实现

// EventBus.js
export class EventBus {
  constructor() {
    this.list = {}
  }

  $on(fnName, callback) { 
    if (!this.list[fnName]) {
      this.list[fnName] = []
    }
    // 订阅需要把回调添加到队列里
    this.list[fnName].push(callback)
  }

  $emit(fnName, data = null) {
    let list = this.list[fnName]
    if(!list|| !list.length) return false
    // 遍历发布消息
    list.forEach(fn => fn(data))
  }
}

具体用法

挂载到wx里面

// app.js
const Bus=require('./EventBus.js')
wx.bus=new Bus()

// xxx.js

// 发布
wx.bus.$emit('test',{name:'呆呆兽的猫猫'})

// 订阅
wx.bus.$on('test',({name})=>{
    // do something
})

通过import方式引入

// bus.js
const Bus=require('./EventBus.js')
export default new Bus()

import bus from 'bus.js'


// 发布
.bus.$emit('test',{name:'呆呆兽的猫猫'})

// 订阅
bus.$on('test',({name})=>{
    // do something
})

这里提补充一个知识点

使用CommonJS是对一个值的拷贝，而import模块是对值的引用

写在最后

我觉得当你学到一个新的知识点，无论看源码也好，我们都要把他们变为生产力，这才叫学到了，谢谢大家观看，有什么地方写的不好的或者错误的地方，请各位指正