简介
ts-events 是个提供类似 qt signal/slot 或者 c# event 事件响应的库。微信小程序本身也有使用事件响应的设计，但多是页面的响应事件（参考 WXS响应事件），ts-events提供纯js方面的响应事件。
ts-events npm官方文档
地址：https://www.npmjs.com/package/ts-events
前提
说明
以下运行环境均为windows，使用的是npm方式引入，微信小程序使用npm详见另一篇文章 微信小程序以“npm”方式使用有赞组件 vant
环境
安装小程序开发工具（略）
小程序使用npm（略）
步骤
一、在小程序目录下，CMD执行命令，安装有赞组件
npm i ts-events -S --production -verbose
二、构建npm
三、使用
以下代码为了简单，粗暴地在app.js中测试。
主要介绍SyncEvent（同步），AsyncEvent（异步），AnyEvent（自定义）三种事件的简单用法，更深入的用法详见官方文档。
同步、异步指的是事件触发和事件处理是否同步执行。
detach()的用法请去掉注释。
代码中均有注释，不再详细讲解代码。
//app.js
import {
SyncEvent,
AsyncEvent,
AnyEvent
} from 'ts-events'
import * as tsEvents from 'ts-events'
// 微信小程序没有 setImmediate()，会报错"setImmediate is not defined"，替换 AsyncEvent.setScheduler()的默认实现方式
AsyncEvent.setScheduler(function(callback) {
setTimeout(callback, 0)
})
App({
testSyncEvent: () => {
let syncEvent = new SyncEvent()
// 事件处理
syncEvent.attach((values) => {
// 注：%c 实现日志输出颜色，模拟器有效，真机无效
console.log('%c syncEvent values:', 'color:#f80', values)
})
// 只执行一次的事件处理
syncEvent.once((values) => {
console.log('%c syncEvent once values:', 'color:#f80', values)
})
// 模拟事件触发1
console.log('%c syncEvent before call post()', 'color:#f80')
syncEvent.post('hello!')
console.log('%c syncEvent after call post()', 'color:#f80')
// 模拟事件触发2
setTimeout(() => {
console.log('%c syncEvent before call post() 2', 'color:#f80')
syncEvent.post("hello 2!")
console.log('%c syncEvent after call post() 2', 'color:#f80')
})
// 卸载事件处理
// 请注意，执行detach()，模拟事件触发1 values会输出，模拟事件触发2 values不会输出
// syncEvent.detach()
},
testAsyncEvent: () => {
let asyncEvent = new AsyncEvent()
// 挂载事件处理
asyncEvent.attach((values) => {
console.log('%c asyncEvent values:', 'color:#8f0', values)
})
// 模拟事件触发1
console.log('%c asyncEvent before call post()', 'color:#8f0')
asyncEvent.post('hello!')
console.log('%c asyncEvent after call post()', 'color:#8f0')
// 模拟事件触发2
setTimeout(() => {
console.log('%c asyncEvent before call post() 2', 'color:#8f0')
asyncEvent.post("hello 2!")
console.log('%c asyncEvent after call post() 2', 'color:#8f0')
}, 1000)
// 卸载事件处理
// 请注意，执行detach()，模拟事件触发1，2 values都不会输出，对比SyncEvent
// asyncEvent.detach()
},
testAnyEvent: () => {
const anyEvent = new AnyEvent()
// 挂载同步处理
anyEvent.attachSync(function(values) {
console.log('%c anyevent synchronous values:', 'color:#0f8', values)
})
// 挂载异步处理
anyEvent.attachAsync(function(values) {
console.log('%c anyevent asynchronous values:', 'color:#0f8', values)
})
// 挂载队列处理，必须执行flush才会得到响应
anyEvent.attachQueued(function(values) {
console.log('%c anyevent queued values:', 'color:#0f8', values)
})
// 挂载一次异步处理，只执行一次
anyEvent.onceAsync(function(values) {
console.log('%c anyevent after this event, I will be detached and print no more', 'color:#0f8', values)
})
console.log('%c anyevent before call post()', 'color:#0f8')
anyEvent.post('hi!')
console.log('%c anyevent after call post()', 'color:#0f8')
setTimeout(() => {
console.log('%c anyevent before call post() 2', 'color:#0f8')
anyEvent.post('hi 2!')
console.log('%c anyevent after call post() 2', 'color:#0f8')
console.log('%c anyevent before call flush()', 'color:#0f8')
// 触发 attachQueued
tsEvents.flush()
}, 300)
},
onLaunch: function() {
// 测试同步
this.testSyncEvent()
// 测试异步
// 编码打印混在一起，延迟执行
setTimeout(this.testAsyncEvent, 2000)
// 测试定制处理
// 编码打印混在一起，延迟执行
setTimeout(this.testAnyEvent, 4000)
}
})
结果
image
