在现代 Web 开发中，前端应用越来越复杂，状态管理成为一个大问题。传统的事件处理和回调函数，已经不能很好的管理应用的状态。此时 RxJS 的出现，让复杂的异步处理变得更加简单。
本篇文章将会介绍 RxJS 的基础知识和运用，以及一个实际的案例，演示如何使用 RxJS 重构多个订阅代码，以使代码更加优雅、简洁。
RxJS 基础知识
RxJS 是一个 JavaScript 的函数式编程库，它是 ReactiveX 规范的实现之一，ReactiveX 规范同样被实现在了其他编程语言中， 如 RxJava for Android 和 Rx.NET for C#。RxJS 的核心是一组函数和类，用来响应式编程。
RxJS 依托于三个概念：Observables（观察者）、Operators（操作符）、 Subscriptions（订阅）。
Observables（观察者）
Observables 代表的是一个异步数据流，这个数据流可以经过一系列的变换和操作，并不断的推送新数据到订阅者手中。
Observable 有多种创建方式，如定时器、Promise、数组、事件等等。
例如：
const nums$ = Rx.Observable.from([1, 2, 3]);
上面代码中， nums$ 代表了一个观察者流，包含 [1,2,3] 这个数组中的元素。每次元素发生变化时， nums$ 都会不断推送数据给它的订阅者们。
Operators（操作符）
Operators 代表的是一组操作符，这些操作符可以用来处理和转化观察者流中的数据，比如：map()、filter()、scan() 等等。
例如：
const numsAfterMap$ = nums$.map(num => num * 2);
上面代码中，numsAfterMap$ 是一个通过 map() 操作符处理后的新的观察者流，它的每个元素都是原流中的元素乘以 2 后的结果。
Subscriptions（订阅）
订阅代表的是一个观察者，它会接受来自 Observable 发出的数据，并对其进行响应。每个订阅都有一个回调函数，用来处理每次接收到的数据。
订阅一般在 Observable 的最后一步进行，同时也有多种取消订阅的方式。
例如：
const subscription = numsAfterMap$.subscribe(
num => console.log(num),
error => console.error(error),
() => console.log("completed")
);上面代码中，subscription 代表的是一个新创建的订阅，它订阅了 numsAfterMap$ 观察者流，每次接收到数据都会输出到控制台，同时没有发生错误，和完成这个流。
RxJS 重构多个订阅代码
多个订阅代码常常会因为代码量太大、逻辑过于复杂而导致难以维护，但通过使用 RxJS，我们可以非常轻松地对这些代码进行优化和重构。
下面我们将演示一个具体的案例：
假设我们要创建一个计数器，每次点击按钮，数字就会加一。同时我们会需要在同一个页面中添加一个删除按钮，如果删除按钮被点击，计数器值就会被重置。
原始代码如下：
-- -------------------- ---- ------- ----- ------ - ------------------------------- ----- ------ - ------------------------------- ----- ------- - ----------------------------------- --- ----- - -- -------------------------------- -- -- - -------- ----------------- - ------ --- -------------------------------- -- -- - ----- - -- ----------------- - ------ ---
我们可以使用 RxJS 来重构这个代码，以实现更好的可读性和可维护性。我们可以使用 RxJS 的 fromEvent() 函数，订阅两个事件，并使用 merge() 操作符将这两个 Observable 合并到一起。
重构后的代码如下：
-- -------------------- ---- -------
----- ------ - -------------------------------
----- ------ - -------------------------------
----- ------- - -----------------------------------
----- ---- - ------------------------------- ------------------
----- ---- - ------------------------------- ---------------------
----- ------ - ------------------------- ---------------- ---- -- -
-- ---- --- ----- -
------ --
- ---- -
------ --- - ----
-
-- ---
----- ------------ - -------------------- -- ------------------ - ------上面代码中，我们使用 fromEvent() 函数来创建 Observables，然后使用 mapTo() 将每次点击变成了带有参数 1 或 null 的 Observable。我们使用 merge() 操作符将两个 Observable 合并到一起，并使用 scan() 操作符来计算计数器的值。最后我们使用 subscribe() 订阅让 counter 的 innerHTML 显示出计数器的值。
RxJS 的 scan() 操作符可以帮助我们实现累加器功能，在我们这个示例案例中，我们在传给 scan() 的回调函数中，根据数据流中的数据选择如何操作累加器，这使我们无需再手动更新计数器的值。
总结
RxJS 是一个非常强大的函数式编程库，它在前端开发中可以帮我们轻松解决异步处理中的问题。在本文中，我们详细介绍了 RxJS 中三个重要的概念：Observables、Operators 和 Subscriptions。同时，我们演示了如何使用 RxJS 订阅两个事件，并使用 merge() 操作符将这两个 Observable 合并到一起，使整个代码变得更加优雅、简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6478790a968c7c53b04b5e8b