评论

小程序全局事件监听

实现小程序类vue全局事件监听

代码片段  https://developers.weixin.qq.com/s/g0tZKYmj7OhD

//全局存储
var event = {};

//接收消息 传入params={name:"string 监听事件名",success:"function 监听事件回调",tg:"当前页面或App.js  传入this即可"}
const $on = function(params) {
  if (!params) {
    return false;
  }
  if (!params.name) {
    console.error("事件监听未设置名称 属性key=name");
    return false;
  }
  if (!params.success) {
    console.error("事件监听未设置回调函数 属性key=success");
    return false;
  }
  if (!params.tg) {
    console.error("事件监听未设置目标对象   属性key=tg");
    return false;
  }
  if (event[params.name]) {
    var list = event[params.name];
    list.push([params.tg, params.success]);
  } else {
    event[params.name] = [
      [params.tg, params.success]
    ];
  }
  pageStatus(params.tg);
}
//消息发送 传入{name:"string 发送消息事件名",data:"可选  可以是任意数据类型"}
const $emit = function(params) {
  if (!params) {
    return false;
  }
  if (!params.name) {
    console.error("事件监听未设置名称 属性key=name");
    return false;
  }
  if (event[params.name]) {
    var list = event[params.name];
    list.forEach(item => {
      item[1].call(item[0], params.data);
    })
  }
}

//移除监听  传入params={name:"string 监听事件名",tg:"当前页面或App.js  传入this即可"}
//如未移除监听  页面onUnload时将会自动移除 

const $remove = function(params) {
  if (!params) {
    return false;
  }
  if (!params.tg) {
    console.error("事件监听未设置目标对象   属性key=tg");
    return false;
  }

  if (params.name && event[params.name]) {
    event[params.name] = event[params.name].filter(a => {
      return a[0] != params.tg;
    })
  } else {
    for (let key in event) {
      event[key] = event[key].filter(a => {
        return a[0] != params.tg;
      })
    }
  }
}

//页面onUnload触发监听
const pageStatus = function(self) {
  if (self["onUnload"]) {
    var s = self["onUnload"];
    self["onUnload"] = function(a) {
      s.call(this, a);
      $remove({
        tg: this
      });
    }
  } else {
    self["onUnload"] = function() {
      $remove({
        tg: this
      });
    }
  }
}

exports.$on = $on;
exports.$emit = $emit;
exports.$remove = $remove;

此方法可挂载至全局getApp()调用 也可引入文件调用

写的不好 大家见谅

最后一次编辑于  2020-06-09  
点赞 7
收藏
评论

10 个评论

  • wmui
    wmui
    2021-07-29

    也可以使用mitt这个包,很好用

    2021-07-29
    赞同
    回复 1
    • L-Qiang
      L-Qiang
      2021-08-20
      小程序里面可以用这个包?怎么用的?
      2021-08-20
      回复
  • George (乔治)
    George (乔治)
    2021-03-09

    推荐eventemitter2

    2021-03-09
    赞同
    回复
  • milooooooooooooooUp
    milooooooooooooooUp
    2021-02-20

    请问下 在组件中订阅的时间 怎么在event.js中 根据组件detached 就remove呢? 现在只有页面的onUnload才会remove

    2021-02-20
    赞同
    回复 1
    • 亮子🌞
      亮子🌞
      2021-02-23
      需要手动调用remove
      2021-02-23
      回复
  • 猛男陈阔
    猛男陈阔
    2020-09-15

    发布订阅模式

    2020-09-15
    赞同
    回复
  • 胡晓峰
    胡晓峰
    2020-06-12

    可以直接拿npm里的events

    2020-06-12
    赞同
    回复
  • 谋谋谋
    谋谋谋
    2020-06-09

    大佬 这个怎么用,我想请求一个接口 然后全局监听这个接口的数据变化,应该怎么搞

    2020-06-09
    赞同
    回复 3
  • 赵阳
    赵阳
    发表于移动端
    2020-05-21
    学习了!
    2020-05-21
    赞同
    回复
  • 猛男陈阔
    猛男陈阔
    2020-05-21

    吃瓜

    2020-05-21
    赞同
    回复
  • 猛犸
    猛犸
    2020-05-21

    写的很好

    2020-05-21
    赞同
    回复
  • 猛犸
    猛犸
    2020-05-21

    速度速度速度

    2020-05-21
    赞同
    回复
登录 后发表内容