One post tagged with "dom" | Async Rustacean

event-ts

June 15, 2023 · 3 min read

Swnb

hacker

3 个使用 `@swnb/event` 的理由

github

1. 简化 web 事件监听模型

在 react 里面, 有时候你不得不这么写来处理监听事件

example.tsx

useEffect(() => {
  const callback = () => {}
  target.addEventListner("event", callback)
  return () => {
    target.removeEvenListner("event", callback)
  }
}, [target])

如果你想要处理多个事件

example.tsx

useEffect(() => {
  const callback1 = () => {}
  target.addEventListner("event1", callback1)
  const callback2 = () => {}
  target.addEventListner("event2", callback2)
  // ....
  return () => {
    target.removeEvenListner("event1", callback1)
    target.removeEvenListner("event2", callback2)
    // ....
  }
}, [target])

这太难受了

如果你使用 @swnb/event

example.tsx

import { EventProxy } from "@swnb/event"
useEffect(
  () =>
    EventProxy.new(target)
      .on("event1", (...args) => {}) // 支持类型提示 !!!
      .on("event2", (...args) => {}) // 支持类型提示 !!!
      .on("event3", (...args) => {}), // 支持类型提示 !!!
  [target]
)

编程从来没有这么简单过

2. Promise support

考虑一个场景, 你要建立一个 websocket 连接, 并等待连接打开, 并设置最大连接时长, 考虑正确的释放资源, 你可能会写如下的代码

websocket.ts

async function connect(url: string, timeout: number) {
  const ws = new WebSocket(url)
  return new Promise<WebSocket>((res, rej) => {
    const timeID = setTimeout(() => {
      rej(new Error("timeout"))
      ws.removeEventListener("open", onOpen)
    }, timeout)
    function onOpen() {
      res(ws)
      clearTimeout(timeID)
      ws.removeEventListener("open", onOpen)
    }
    ws.addEventListener("open", onOpen)
  })
}

实在是太烦人了

如果你使用 @swnb/event

websocket.ts

import { EventProxy } from "@swnb/event"
async function connect(url: string, timeout: number) {
  const ws = new WebSocket(url)
  await EventProxy.new(ws).waitUtil("open", { timeout }) // 支持类型提示 !
  return ws
}

编程从来没有这么简单过

考虑一个更加复杂的场景, 创建一个 webrtc 连接, 等待连接 connected

rtc.ts

import { EventProxy } from "@swnb/event"
async function connect(timeout: number) {
  const connection = new RTCPeerConnection()
  await EventProxy.new(connection).waitUtil("connectionstatechange", {
    timeout,
    where: (ev) => connection.connectionState === "connected",
  })
  return connection
}

使用 where 可以选择你想要的那个 connectionState

3. 观察一个 web 对象的所有事件

如果你想知道 video 在播放的时候触发了哪些事件, 可以考虑这么写

video.ts

import { EventProxy } from "@swnb/event"
// 支持类型提示 !
EventProxy.new(videoDom, { proxyAllEvent: true }).any((eventName, ...args) => {
  console.log(eventName)
})

放在 react 里面可以这么写

video.tsx

import { EventProxy } from "@swnb/event"
import { useEffect, useRef } from "react"
function Video() {
  const videoDomRef = useRef<HTMLVideoElement>(null)
  useEffect(() => {
    return EventProxy.new(videoDomRef.current!, { proxyAllEvent: true }).any((eventName, ...args) => {
      console.log(eventName)
    })
  }, [])
  const url = "" // 你的  video  链接
  return <video muted autoPlay src={url} ref={videoDomRef} />
}

打开控制台, 你会看到所有 video 的事件触发顺序和时间

编程从来没有这么简单过

3 个使用 @swnb/event 的理由​

1. 简化 web 事件监听模型​

2. Promise support​

3. 观察一个 web 对象的所有事件​

3 个使用 `@swnb/event` 的理由

1. 简化 web 事件监听模型

2. Promise support

3. 观察一个 web 对象的所有事件