简介
@nll/rx-from-events 是一个使用观察者模式（Observer Pattern）的 JavaScript 库，它可以将 DOM 事件或 Node 的事件转换成一组可观察的对象。我们可以用它来监听事件、合并事件，甚至作为一个类似 Promise 的异步编程解决方案。它基于 RxJS 实现，提供了一种简单的方式来管理不同的事件类型和回调函数。
安装
通过 npm 安装：
npm install @nll/rx-from-events
然后在代码中引入：
const fromEvent = require('@nll/rx-from-events');使用
使用 @nll/rx-from-events 主要有两个 API：fromEvent 和 fromEventPattern。fromEvent 用于将 DOM 事件转化为可观察对象，fromEventPattern 将任何自定义事件转化为可观察对象。
fromEvent
fromEvent 用于将 DOM 事件转化为可观察对象。以下是使用示例：
const { fromEvent } = require('@nll/rx-from-events');
const button = document.querySelector('button');
const clicks = fromEvent(button, 'click');
clicks.subscribe(() => console.log('Clicked!'));上面代码中，我们首先获取一个按钮元素，然后用 fromEvent 方法创建一个可观察对象。这个对象会在每次按钮被点击时发出一个新值。最后我们订阅这个对象，当按钮被点击时会输出 "Clicked!"。
也可以使用 ES6 语法：
import { fromEvent } from '@nll/rx-from-events';以下是其他可选项：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------------- -- --------- ----- ------- - ------------------------------------ ----- ------ - ------------------ --------- -- ------- ----------------- ----- -- -------------------------- -- ---- ----- -- --------------------- -- ----- -- -- ----------------------- -- -------- -- -- ---- ----- ------------ - ----------------- ----- -- -------------------------- ----- -- --------------------- -- -- ----------------------- -- ---------------------------
在上面的代码中，我们首先使用 querySelectorAll 获取了多个按钮，然后使用 fromEvent 方法同时为它们创建了一个可观察对象。我们可以为这个对象注册监听器，当任何一个按钮被点击时就会打印它。
当你想要一次性监听一个事件时，可以使用 subscribe 的第二个参数。当事件完成时，它将被自动取消订阅。还可以使用 unsubscribe 方法来手动取消订阅。
fromEventPattern
如果需要将自定义事件（样式、动画、Node 事件等）转化为可观察对象，则使用 fromEventPattern。以下是使用示例：
-- -------------------- ---- -------
----- - ---------------- - - -------------------------------
----- ------ - -
--------- -
----------- - ---
--
--------------------------- --------- -
------------------ ---------- -------- ---
--
------------------------------ --------- -
----- ----- - ----------------------
- -- ----------- --- --------- -- ---------- --- --------
--
-- ------ --- --- -
------------------------- ---
-
--
------- -
------------------------- -- -
-- ---------------- --- -------- -
-----------------
-
---
-
--
----- ------ - -----------------
------- -- -------------------------------- ---------
------- -- ----------------------------------- --------
--
------------------- -- -------------------------
---------------上面代码中，我们自定义了一个 Button 对象，添加一个可自定义的事件 click。利用 fromEventPattern 方法将 Button 中的 click 事件转化为可观察对象。最后监听对象输出 "Clicked!"。
结论
@nll/rx-from-events 提供了一种管理事件的方式，通过可观察对象与订阅，使我们在事件处理的架构设计时拥有更多的思考空间，能更好的理解事件的本质。有了 @nll/rx-from-events，我们可以更加信任、安全并且自由地处理回调监听机制，提高我们的代码设计效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601681e8991b448de2e6