簡介
ts-events 是個(gè)提供類似 qt signal/slot 或者 c# event 事件響應(yīng)的庫。微信小程序本身也有使用事件響應(yīng)的設(shè)計(jì)，但多是頁面的響應(yīng)事件（參考 WXS響應(yīng)事件）旋廷，ts-events提供純js方面的響應(yīng)事件急前。
ts-events npm官方文檔
地址：https://www.npmjs.com/package/ts-events
前提
說明
以下運(yùn)行環(huán)境均為windows京郑，使用的是npm方式引入宅广，微信小程序使用npm詳見另一篇文章 微信小程序以“npm”方式使用有贊組件 vant
環(huán)境
安裝小程序開發(fā)工具（略）
小程序使用npm（略）
步驟
一、在小程序目錄下些举，CMD執(zhí)行命令跟狱，安裝有贊組件
npm i ts-events -S --production -verbose
二、構(gòu)建npm
三户魏、使用
以下代碼為了簡單驶臊，粗暴地在app.js中測試挪挤。
主要介紹SyncEvent（同步），AsyncEvent（異步）关翎，AnyEvent（自定義）三種事件的簡單用法电禀，更深入的用法詳見官方文檔。
同步笤休、異步指的是事件觸發(fā)和事件處理是否同步執(zhí)行。
detach()的用法請去掉注釋症副。
代碼中均有注釋店雅，不再詳細(xì)講解代碼。
//app.js
import {
SyncEvent,
AsyncEvent,
AnyEvent
} from 'ts-events'
import * as tsEvents from 'ts-events'
// 微信小程序沒有 setImmediate()贞铣，會報(bào)錯(cuò)"setImmediate is not defined"闹啦，替換 AsyncEvent.setScheduler()的默認(rèn)實(shí)現(xiàn)方式
AsyncEvent.setScheduler(function(callback) {
setTimeout(callback, 0)
})
App({
testSyncEvent: () => {
let syncEvent = new SyncEvent()
// 事件處理
syncEvent.attach((values) => {
// 注：%c 實(shí)現(xiàn)日志輸出顏色，模擬器有效辕坝，真機(jī)無效
console.log('%c syncEvent values:', 'color:#f80', values)
})
// 只執(zhí)行一次的事件處理
syncEvent.once((values) => {
console.log('%c syncEvent once values:', 'color:#f80', values)
})
// 模擬事件觸發(fā)1
console.log('%c syncEvent before call post()', 'color:#f80')
syncEvent.post('hello!')
console.log('%c syncEvent after call post()', 'color:#f80')
// 模擬事件觸發(fā)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')
})
// 卸載事件處理
// 請注意窍奋，執(zhí)行detach()，模擬事件觸發(fā)1 values會輸出酱畅，模擬事件觸發(fā)2 values不會輸出
// syncEvent.detach()
},
testAsyncEvent: () => {
let asyncEvent = new AsyncEvent()
// 掛載事件處理
asyncEvent.attach((values) => {
console.log('%c asyncEvent values:', 'color:#8f0', values)
})
// 模擬事件觸發(fā)1
console.log('%c asyncEvent before call post()', 'color:#8f0')
asyncEvent.post('hello!')
console.log('%c asyncEvent after call post()', 'color:#8f0')
// 模擬事件觸發(fā)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)
// 卸載事件處理
// 請注意琳袄，執(zhí)行detach()，模擬事件觸發(fā)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)
})
// 掛載隊(duì)列處理，必須執(zhí)行flush才會得到響應(yīng)
anyEvent.attachQueued(function(values) {
console.log('%c anyevent queued values:', 'color:#0f8', values)
})
// 掛載一次異步處理餐蔬，只執(zhí)行一次
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')
// 觸發(fā) attachQueued
tsEvents.flush()
}, 300)
},
onLaunch: function() {
// 測試同步
this.testSyncEvent()
// 測試異步
// 編碼打印混在一起碎紊，延遲執(zhí)行
setTimeout(this.testAsyncEvent, 2000)
// 測試定制處理
// 編碼打印混在一起，延遲執(zhí)行
setTimeout(this.testAnyEvent, 4000)
}
})
結(jié)果
image
