小程序使用Events监听实现对数据的全局监听

最新推荐文章于 2025-05-15 20:25:21 发布

selectDele

最新推荐文章于 2025-05-15 20:25:21 发布

阅读量982

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/selectDele/article/details/129547527

文章介绍了一个简单的JavaScript类`Event`，用于实现事件监听、触发和卸载功能。`Event`类包含`on`、`emit`和`off`方法，分别用于添加监听器、触发事件和移除监听器。监听器的添加需要提供事件名称、回调函数以及可选的上下文，而卸载监听器则可以通过事件名称和标识来定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下为监听方法

class Event {
  on(event, fn, ctx) {
    if (typeof fn != "function") {
      console.error('fn 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 || {}
    var store = this._stores[event],
      args
    if (store) {
      store = store.slice(0)
      args = [].slice.call(arguments, 1)
      for (var i = 0, len = store.length; i < len; i++) {
        store[i].cb.apply(store[i].ctx, args)
      }
    }
  }
  off(event, fn, ctx) {
    this._stores = this._stores || {}
    // all
    if (!arguments.length) {
      this._stores = {}
      return
    }
    // specific event
    var store = this._stores[event]
    if (!store) return
    // remove all handlers
    if (arguments.length === 1) {
      delete this._stores[event]
      return
    }
    // remove specific handler
    var cb
    for (var i = 0, len = store.length; i < len; i++) {
      cb = store[i].cb
      if (store[i].ctx === ctx) {
        store.splice(i, 1)
        break
      }
    }
    return
  }
}
module.exports = {
  Event
}

以下为使用方法

将events挂到全局对象上

wx.event = new Event();

监听开始，其中“监听名称”为需要监听的名称，可以用于多个地方监听；监听标识作用于卸载监听的唯一标识（全局唯一），如果不传监听标识，默认卸载的监听为第一个监听函数，出现多个相同“监听名称”会出现卸载错误的监听函数。

wx.event.on('监听名称', function (res) {
    //得到监听结果，执行函数操作
    
},'监听标识');

卸载监听

wx.event.off("监听名称","监听标识");

触发监听函数，object为监听函数接收到的内容

wx.event.emit('监听名称', object);