RxJS 是一个非常优秀的 JavaScript 响应式编程库。它通过提供一系列操作符来简化开发者的工作。而 fromEvent 操作符是其中一个非常实用的操作符，它可以让开发者快速地将 DOM 事件转化为 Observables，方便进行响应式编程。
什么是 fromEvent 操作符？
在 RxJS 中，fromEvent 操作符用于将 DOM 事件转化为 Observables，并且可以带上事件的名字或者选择器来指定监听哪个事件或哪个 DOM 元素的事件。fromEvent 操作符通常会在前端开发中使用，例如监听用户点击、滚动、输入等操作。
使用 fromEvent 操作符
fromEvent 操作符的使用非常简单，它接收两个参数，第一个参数是指定要监听的 DOM 元素，可以是元素本身或者字符串选择器。第二个参数是指定要监听的事件名称或事件对象，例如 "click"、 "scroll" 等，也可以是自定义的事件对象。
-- -------------------- ---- ------- ------ - --------- - ---- ------- ----- ------ - ---------------------------------- ----- ------ - ----------------- --------- ------------------- -- - ------------------- ---------- ---
在上面的示例代码中，我们使用 fromEvent 操作符将 button 元素的 click 事件转化为一个名为 click$ 的 Observable，并将其订阅。当用户点击 button 元素时，Observable 会发出一个 next 事件，我们在订阅函数中回调来处理这个事件。
我们也可以使用 RxJS 提供的 ofType 操作符来过滤出指定的事件类型：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - ---------------------------------- ----- ------ - ----------------- -------------- --------------- -- ------------------- -- - ------------------- ---------- ---
在上面的示例代码中，我们在 fromEvent 操作符的返回值中使用 pipe 方法并传入 ofType 操作符。这个操作符会过滤掉不是 click 事件的事件，只让 click 事件通过。
实战应用
下面，我们来看一个更复杂的应用场景。假设我们在页面中有一个输入框和一个按钮，用户在输入框中输入内容后点击按钮，我们需要向后端发送一个请求，并将后端返回的数据显示在页面上。
<input id="input" type="text"> <button id="button">Search</button> <div id="result"></div>
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ---- - ---- ------------
------ - ------------- --------------------- ------- ---- --------- - ---- -----------------
----- ----- - ---------------------------------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
----- ------- - ----------------- --------------
------------ -- -----------------------------------------------------
------------ -- ------------------
----------------
------------------
-----------------------
--
------------------------- -- -
---------------- - ---
---------------------- -- -
----- ---- - ------------------------------
-------------- - -------------
-------------------------
---
---在上面的示例代码中，我们使用 fromEvent 操作符创建了一个名为 search$ 的 Observable，它会在用户点击按钮时发出一个请求。我们使用了 switchMap 操作符来将 click 事件转换为后端请求，并将得到的数据映射为 results 数组。接着，我们使用 filter 操作符来过滤掉空结果，使用 debounceTime 操作符来防止用户频繁请求，并使用 distinctUntilChanged 操作符来避免重复请求。最后，我们在 subscribe 函数中将每个结果的标题添加到 result 元素中。
总结
RxJS 中的 fromEvent 操作符可以让开发者快速地将 DOM 事件转化为 Observables，方便进行响应式编程。它非常实用而且易于使用，我们可以根据应用场景进行配置来达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cf29b968c7c53b0f7abfc