RxJS 是一个基于响应式编程思想的 JavaScript 库，它提供了丰富的可观察对象和操作符，可以帮助我们更方便地处理数据流。其中，fromEvent() 函数是一个常用的操作符，用于将 DOM 事件转换成可观察对象，实现事件流处理。本文将详细介绍 fromEvent() 函数的用法、实现原理和应用场景。
fromEvent() 的基本用法
fromEvent() 函数的基本用法是将一个 DOM 元素的事件转化成可观察对象，代码如下：
const button = document.querySelector('button');
const clicks = Rx.fromEvent(button, 'click');
clicks.subscribe(() => console.log('Button clicked!'));上述代码中，我们通过传递 DOM 元素和事件名称来创建一个可观察对象 clicks，当按钮被点击时，就会触发该可观察对象的订阅函数，输出“Button clicked!”。
fromEvent() 的实现原理
fromEvent() 函数的实现原理其实很简单，它内部使用了 Rx.Observable.create() 函数来创建可观察对象。具体来说，当我们调用 fromEvent() 函数时，它会调用 create() 函数创建一个新的可观察对象，然后在该可观察对象上注册事件监听器，最后返回该可观察对象。下面是 fromEvent() 函数的简化实现代码：
-- -------------------- ---- -------
------------ - -------- --------- ---------- -
------ ----------------------------- ---------- -
-------- -------------- -
---------------------
-
----------------------------------- ---------
------ -------- -- -
-------------------------------------- ---------
--
---
--可以看到，我们在 create() 函数中注册了一个 handler() 函数作为事件监听器，它会在 DOM 元素上指定的事件发生时触发 observer.next() 方法，将事件对象传递给订阅者。同时，我们还在 create() 函数中返回了一个清理函数，当订阅取消时，调用该清理函数可移除事件监听器，避免内存泄漏。
fromEvent() 的高级用法
除了基本用法外，fromEvent() 函数还有一些高级用法，可以更灵活地处理数据流。下面是一些常见的用法示例：
1. 处理多个事件
const button = document.querySelector('button');
const mouseMoves = Rx.fromEvent(document, 'mousemove');
const clicks = Rx.fromEvent(button, 'click');
const keyups = Rx.fromEvent(document, 'keyup');
const combined = mouseMoves.merge(clicks).merge(keyups);
combined.subscribe(event => console.log(event));上述代码中，我们分别用 fromEvent() 函数创建鼠标移动、按钮点击和键盘抬起三个可观察对象，然后使用 merge() 操作符将它们合并成一个新的可观察对象 combined，当这三个事件中的任意一个发生时，都会触发 combined 可观察对象的订阅函数，并输出相应的事件对象。
2. 处理事件数据
const input = document.querySelector('input');
const inputText = Rx.fromEvent(input, 'input').map(event => event.target.value);
inputText.subscribe(value => console.log(value));上述代码中，我们除了用 fromEvent() 函数创建了一个 input 事件的可观察对象 inputText，还使用 map() 操作符将从事件对象中获取的文本内容转换成 value 值，最后输出该 value 值。
3. 处理多个事件数据
const input = document.querySelector('input');
const inputText = Rx.fromEvent(input, 'input')
.map(event => event.target.value)
.debounceTime(1000)
.distinctUntilChanged();
inputText.subscribe(value => console.log(value));上述代码中，我们在上述代码的基础上，又使用了 debounceTime() 操作符和 distinctUntilChanged() 操作符。debounceTime() 操作符用于限制事件流的频率，只有当事件在一定时间内没有被触发时，才会输出最后一次触发的事件对象。distinctUntilChanged() 操作符用于过滤重复的事件对象，只有当前一个事件对象和当前事件对象不相同时，才会输出当前事件对象。这样，我们就可以更有效地处理多个事件数据了。
总结
本文介绍了 RxJS 中的 fromEvent() 函数，它可以将 DOM 事件转换成可观察对象，实现了事件流处理。我们学习了 fromEvent() 函数的基本用法、实现原理和高级用法，可以更灵活地处理不同的事件数据流。希望本文对你学习 RxJS 有所启发，也希望你能在实际项目中运用这些技巧，更加高效地处理数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503ae8f95b1f8cacd0757bc