什么是 callbags？
在介绍 callbag-from-delegated-event 包之前，我们需要先了解一下什么是 callbags。
Callbags 是一种非常轻量级、灵活的数据流处理模型，它是响应式编程的一种实现方式。该模型以回调的方式，使数据流可以通过数据推送的方式，沿着多个处理阶段（称为操作符）流动。这让我们可以非常灵活地处理各种异步数据流。
什么是 callbag-from-delegated-event？
callbag-from-delegated-event 是一个十分小巧的 npm 包，它提供了一个函数，用于将 DOM 事件委派给 callbag 数据源。正常情况下，我们需要手动监听 DOM 事件，然后使用回调函数来处理数据。而使用 callbag-from-delegated-event，我们可以将处理事件的操作符串起来，从而形成通用的、可复用的响应式处理数据流。
如何使用 callbag-from-delegated-event？
接下来，我们来看一下如何使用 callbag-from-delegated-event。
安装
首先，需要前往项目文件夹，执行以下命令安装 callbag-from-delegated-event：
npm install callbag-from-delegated-event
使用方式
使用 callbag-from-delegated-event 非常简单。你只需要在 DOM 元素上调用监听函数 fromDelegatedEvent，然后连接一些操作符即可。
-- -------------------- ---- ------- ------ ------------------ ---- ------------------------------- ------ - ---- ------ - ---- ----------------- -- ------ --- -- ----- ------- - ------------------------------- -- - ----- ----- ------- --- ----- ------ - --------------------------- --------- -- ----------- ----- ------ - ----- ------- ----- -- -------------------- ----------- -- ---- --- -------- -- -- ------ ------- --- -- ---------------- -
在上述示例代码中，我们使用 fromDelegatedEvent 将 click 事件转换成了 callbag 数据源。然后，我们调用了两个操作符 map 和 filter。
map 操作符用于对事件参数进行转换，将事件转换为了目标元素的 innerHTML。而 filter 操作符则过滤掉了除了 innerHTML 为 'click' 的事件之外的所有事件。
最后，我们注册了一个订阅事件，用于输出处理过的事件数据。
总结
通过使用 callbag-from-delegated-event，我们可以轻松地将 DOM 事件转换为 callbag 数据源，并且可以使用操作符轻松处理事件数据流。该模块非常适用于需要处理大量事件的场景下，同时也是学习响应式编程的绝佳入门工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde599a