什么是 RxJS
RxJS 是一个响应式编程库，它基于观察者模式和迭代器模式，能够帮助开发者进行异步和事件驱动的编程。RxJS 的核心概念是 Observable（可观察对象），Observer（观察者）和 Operator（操作符）。
Observable 是一个可以被订阅的数据流，它可以发射多个值，也可以发射一个错误或者完成的信号。Observer 可以对这个 Observable 进行订阅，并处理 Observable 发射的值。Operator 可以对 Observable 进行操作，比如过滤、映射、聚合等等。
RxJS 提供了许多强大的操作符，可以处理各种复杂的场景，比如异步请求、事件流处理、数据变化监听等，是前端开发中不可或缺的一部分。下面我们将介绍 RxJS 中的事件处理方式及实战。
RxJS 中的事件处理方式
RxJS 提供了多种方式处理事件流，这里我们介绍两种常用的方式：Subject 和 fromEvent。
Subject
Subject 是一种特殊的 Observable，可以被当作一个事件发射器来使用。与普通的 Observable 不同的是，Subject 具有多次订阅、多次发射的特性。这意味着，多个观察者可以同时监听 Subject，并可以独立地对 Subject 发射的值进行处理。
------ - ------- - ---- ------- ----- ------- - --- ------------------ ----------------------- -- --------------------- -- ------------ -- ----------- -- - ---------------- ----------------------- -- --------------------- -- ------------ -- ----------- -- - ---------------- -- ----------- -- - -- ----------- -- -
在上面的例子中，我们创建了一个 Subject，并两次订阅它。当 Subject 发射值时，两个观察者都会收到这个值，并独立地处理它。
fromEvent
fromEvent 是一个操作符，它可以将一个事件转换成一个 Observable，让我们可以使用 RxJS 的各种操作符来处理事件流。fromEvent 可以接收一个 DOM 元素和一个事件类型，并返回一个 Observable，当 DOM 元素触发指定类型的事件时，该 Observable 会发射一个事件对象。
------ - --------- - ---- ------- ----- ------ - --------------------------------- ----- ------- - ----------------- --------- ----------------------- -- --------------------
在上面的例子中，我们使用 fromEvent 将 button 元素的 click 事件转换成一个 Observable，然后对这个 Observable 进行订阅，并输出事件对象。
RxJS 中的实战
下面我们来实现一个实际应用场景中的例子，该例子演示了如何使用 RxJS 处理多个按钮的点击事件，并防止按钮连续点击。
假设我们有两个按钮，分别是“开始”和“停止”，我们希望在“开始”按钮被点击后，每隔一秒钟输出一个数字，并在“停止”按钮被点击后停止输出数字。
------- ---------------------- ------- --------------------- ---- ------------------
首先，我们使用 fromEvent 操作符将“开始”和“停止”按钮的 click 事件转换成两个 Observable：
------ - --------- - ---- ------- ----- ----------- - --------------------------------- ----- ---------- - -------------------------------- ----- ------ - ---------------------- --------- ----- ----- - --------------------- ---------
然后，我们使用 switchMap 操作符将 start$ 转换成一个新的 Observable。switchMap 可以接收一个返回一个 Observable 的回调函数，当源 Observable 发射值时，它会取消之前的订阅，并使用新的 Observable 替换它。
------ - --------- - ---- ----------------- ----- -------- - ------------ ------------ -- --------------- --
在上面的代码中，我们使用 interval 操作符创建一个每隔一秒钟发射一个数字的 Observable，然后使用 switchMap 将 start$ 转换成一个新的 Observable，该新的 Observable 每隔一秒钟输出一个数字。
接下来，我们使用 takeUntil 操作符防止“停止”按钮被点击后仍然输出数字。takeUntil 可以接收一个 Observable，当它发射值时，原来的 Observable 就会停止发射值。
------ - --------- - ---- ----------------- -------------- ---------------- ----------------- -- ---------------- - -------
在上面的代码中，我们使用 takeUntil 传入 stop$，然后订阅新的 Observable，并将每个数字输出到 output 元素中。
完整代码如下：
------ - ---------- -------- - ---- ------- ------ - ---------- --------- - ---- ----------------- ----- ----------- - --------------------------------- ----- ---------- - -------------------------------- ----- ------ - ---------------------------------- ----- ------ - ---------------------- --------- ----- ----- - --------------------- --------- ----- -------- - ------------ ------------ -- --------------- -- -------------- ---------------- ----------------- -- ---------------- - -------
总结
本文介绍了 RxJS 中的事件处理方式及实战。Subject 可以被当作事件发射器来使用，具有多次订阅、多次发射的特性。fromEvent 可以将一个 DOM 元素的事件转换成一个 Observable。使用 switchMap 和 takeUntil 可以处理复杂的事件流，实现更丰富的应用场景。RxJS 是前端开发中不可或缺的一部分，希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64afa61a48841e9894bbed0d