RxJS (Reactive Extensions for JavaScript) 是一个流行的 JavaScript 库，它提供了一套函数式编程的工具，用于处理异步和基于事件的数据流。在 RxJS 中，有一个非常重要的操作符 "FromEvent"，它能够将 DOM 事件、WebSocket 事件等转化为可观察对象，方便我们进行响应式编程。
FromEvent 的用法
FromEvent 操作符的基本用法如下所示：
import { fromEvent } from 'rxjs';
const button = document.querySelector('button');
const clicks = fromEvent(button, 'click');
clicks.subscribe(event => console.log(event));在这个例子中，我们首先通过 DOM API 获取了一个按钮元素，然后使用 FromEvent 操作符将按钮的 "click" 事件转化为一个可观察对象 "clicks"。最后我们通过 "subscribe" 方法订阅 "clicks" 可观察对象，从而可以监听按钮的点击事件并输出到控制台。
除了 DOM 事件，FromEvent 操作符还可以处理其他类型的事件，例如 WebSocket 事件：
import { fromEvent } from 'rxjs';
const socket = new WebSocket('ws://localhost:8080');
const messages = fromEvent(socket, 'message');
messages.subscribe(event => console.log(event.data));在这个例子中，我们创建了一个 WebSocket 连接，并使用 FromEvent 操作符将服务器发送的 "message" 事件转化为一个可观察对象 "messages"。最后我们通过 "subscribe" 方法订阅 "messages" 可观察对象，从而可以监听服务器发送的消息并输出到控制台。
FromEvent 的高级用法
除了基本用法，FromEvent 操作符还有一些高级用法，可以更加灵活地处理事件流。
1. 传递参数
有些事件可能需要传递参数，例如鼠标移动事件需要传递鼠标的坐标。在这种情况下，我们可以使用 FromEvent 操作符的第三个参数 "selector"，来过滤和转化事件的参数。
import { fromEvent } from 'rxjs';
const mousemove = fromEvent(document, 'mousemove', (event: MouseEvent) => ({
x: event.clientX,
y: event.clientY
}));
mousemove.subscribe(pos => console.log(pos));在这个例子中，我们使用 FromEvent 操作符将 document 元素的 "mousemove" 事件转化为一个可观察对象 "mousemove"。同时我们传递了一个 "selector" 函数，用于将 MouseEvent 转化为一个包含鼠标坐标的对象。最后我们通过 "subscribe" 方法订阅 "mousemove" 可观察对象，从而可以监听鼠标移动事件并输出鼠标坐标到控制台。
2. 多个事件合并
有些情况下，我们需要监听多个事件，并将它们合并成一个事件流。在这种情况下，我们可以使用 RxJS 中的 "merge" 操作符。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ------- ----- ------- - ----------------------------------- ----- ------- - ----------------------------------- ----- ------ - ------------------ --------- ----- ------ - ------------------ --------- ----- ------ - ------------- -------- ---------------------- -- --------------------
在这个例子中，我们首先使用 FromEvent 操作符将两个按钮的 "click" 事件转化为可观察对象 "click1" 和 "click2"。然后我们使用 "merge" 操作符将这两个可观察对象合并成一个新的可观察对象 "clicks"。最后我们通过 "subscribe" 方法订阅 "clicks" 可观察对象，从而可以监听两个按钮的点击事件并输出到控制台。
3. 取消订阅
在使用 FromEvent 操作符时，我们需要注意及时取消订阅，以避免内存泄漏。在 RxJS 中，取消订阅有两种方式：
- 使用 "unsubscribe" 方法
const subscription = clicks.subscribe(event => console.log(event)); // 取消订阅 subscription.unsubscribe();
- 使用 "takeUntil" 操作符
-- -------------------- ---- ------- ------ - ---------- ------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --------------------------------- ----- ------ - ----------------- --------- ----- ----- - --- ---------- ------------ ---------------- ----------------- -- -------------------- -- ---- -------------
在这个例子中，我们首先创建了一个 Subject 对象 "stop$"，用于标记订阅的结束。然后我们使用 "takeUntil" 操作符，将 "clicks" 可观察对象的订阅和 "stop$" 对象进行关联。最后我们通过 "stop$.next()" 方法，向 "stop$" 对象发送一个信号，从而结束订阅。
结论
FromEvent 操作符是 RxJS 中非常重要的一个操作符，它能够将各种类型的事件转化为可观察对象，方便我们进行响应式编程。在实际开发中，我们需要根据具体情况选择合适的使用方式，并及时取消订阅，以避免内存泄漏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675a65bba630deb01cfee79f