微信小程序以“npm”方式使用 ts-events

简介

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