微信小程序全局事件订阅eventBus

微信小程序全局事件订阅

在Vue开发中,我们可能用过eventBus来解决全局范围内的事件订阅及触发逻辑,在微信小程序的开发中我们可能也也会遇到同样的需求,那么我们尝试下在小程序(原生小程序开发)中实现类似eventBus的事件订阅功能。

全局事件订阅

  1. 全局实例
    在Vue中我们有new Vue得到的全局对象,小程序中对应的则是app对象,在小程序组件或者页面中可以通过getApp()获取;

  2. 事件订阅
    声明对象存储事件,示例中使用map存储eventMap,向存储器中存放需要被触发的事件

    js 复制代码
    // 注意 开发阶段热跟新时,eventMap的声明和触发可能存在异步问题,需要阻断eventMap声明在触发之后的情况,这个问题仅限开发阶段存在
    on(action, event) {
    	if (eventMap && !eventMap.has(action)) {
    		eventMap.set(action, event)
    	}
    }
  3. 事件触发
    当业务逻辑需要触发时,调用emit触发指定事件

    js 复制代码
    emit(action, arg) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.get(action) && eventMap.get(action)(arg)
    	}
    }
  4. 事件卸载
    当订阅的事件过多或者确定事件不在被触发时,及时卸载事件可以减少内存压力

    js 复制代码
    off(action) {
    	if (eventMap && eventMap.has(action)) {
    		eventMap.delete(action)
    	}
    }

整体代码如下(文件:app.js):

js 复制代码
const eventMap = new Map()
App({
	globalData: {
		count: 1
	},
  // 事件订阅
	on(action, event) {
		if (eventMap && !eventMap.has(action)) {
			eventMap.set(action, event)
		}
   },
  // 事件卸载
	off(action) {
		if (eventMap && eventMap.has(action)) {
			eventMap.delete(action)
		}
   },
  // 事件触发
	emit(action, arg) {
		if (eventMap && eventMap.has(action)) {
			eventMap.get(action) && eventMap.get(action)(arg)
		}
	}
})
页面或者组件中使用
  1. 订阅on,订阅自定义事件countAdd(自定义事件名),并且传入事件被触发后需要被触发的逻辑,这里的changeCount就是在事件被触发是订阅触发的数据,当然触发事件的参数可以来自emit也可以无参数
js 复制代码
const app = getApp()
Page({
	data: {
		count: app.globalData.count,
	},
	created() {
		// 注册事件
		app.on('countAdd', this.changeCount.bind(this))
	},
	changeCount(count) {
		this.setData({
			count
		})
	}
})
  1. 发布emit,发布自定义事件countAdd(自定义事件名)来触发所有监听该事件的订阅者(既注册了on的组件或者页面),emit携带的参数也会被传递给自定义事件
js 复制代码
const app = getApp()
Component({
	data: {
		count: app.globalData.count,
	},
	// 触发事件
	bindEvent() {
		app.emit('countAdd', this.data.count++)
	}
})

这里changeCount是最终被触发的事件,countAdd是在订阅服务中自定义的事件名,之所以不使用相同的事件名,主要是区分下。

整体事件触发逻辑如下:

  1. 先订阅事件 changeCount
  2. 业务需要触发的时候触发bindEvent
  3. emit到全局来调用监听的事件
相关推荐
拼图2095 小时前
微信小程序——skyline版本问题
微信小程序·小程序
mg6686 小时前
微信小程序入门实例_____打造你的专属单词速记小程序
微信小程序·小程序
程序员陆通6 小时前
Vibe Coding开发微信小程序实战案例
微信小程序·小程序·notepad++·ai编程
「、皓子~7 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
nbsaas-boot7 小时前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
老A技术联盟7 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
you45807 小时前
小程序学习笔记:使用 MobX 实现全局数据共享,实例创建、计算属性与 Actions 方法
笔记·学习·小程序
风铃喵游7 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
说私域7 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的抖音渠道力拓展与多渠道利润增长研究
人工智能·小程序·开源
MonkeyKing_sunyuhua9 小时前
微信小程序能不能获取物联网的上的设备数据
物联网·微信小程序·小程序