在前端开发中，为了更好地处理异步事件，我们常常会使用 RxJS 或者 Bacon.js 等响应式编程的工具库。然而，对于小型项目或者简单的场景来说，引入这些库似乎过于头重脚轻。那么我们有没有更轻量级的工具可以用呢？答案是有的，那就是 callbag。
在本文中，我们将介绍一个非常实用的 callbag 工具包—— callbag-from-event。
callbag-from-event 简介
callbag-from-event 是一个可以将任意 JavaScript 事件转化为可供 callbag 使用的可观察数据源的 npm 包。使用该 包，我们可以绑定 JavaScript 事件（如 DOM 事件或 Node.js EventEmitter 事件）生成一个 callbag 转化器，它可以将该类型的事件转化为 callbag 数据源。
该 npm 包导出了一个可以将事件源（event source）转化为 callbag 的函数，以供开发人员使用。
const fromEvent = require('callbag-from-event');API 文档
该函数的从类型定义来看是：
declare function fromEvent<EventData = any, Emitter = any, SetSource = any>( fn: Fn<EventData, SetSource>, addListener: AddListener<Emitter>, removeListener: RemoveListener<Emitter, SetSource>, options?: FromEventOptions ): Source<EventData>;
callbag-from-event 包提供了四个参数：
- fn：转化函数，用来返回事件的值。它会被传入事件对象，评估该事件对象应该返回什么值。
- addListener：在事件源上添加事件监听器的函数，它会在转换逻辑中被调用。
- removeListener：从事件源中移除事件监听器的函数。
- options：用来配置包的可选参数。
其中，addListener 和 removeListener 参数取决于你使用的事件源。在接下来的例子中，我们会使用 DOM 事件源来解释这个 API。
简单教程：使用 callbag-from-event
假设我们需要监听一个按钮的点击事件，并在用户点击按钮时打印一个信息到控制台。我们可以使用 callbag-from-event 包来实现：
-- -------------------- ---- -------
------ --------- ---- ---------------------
----- ------ - -------------------------------------
----- ----------- - ----------------- ---------
-------------- --- -- -- -
-- -- --- -- -
------------------- -- -----------
-
---上面的示例中，我们先使用 DOM API 获取了一个按钮元素，并生成了一个 clickSource 可观察数据源。在我们调用这个数据源时，它会启动监听器，从而打印出我们想要的信息。
注意，clickSource 函数的第二个参数是一个回调函数，在我们调用可观察数据源后它就会被触发。在回调函数中，我们可以通过检查“type”参数是否为 1，来确定什么时候需要做出响应。
高级教程：改善 clickSource 实例
那么现在的问题是：如何在 clickSource 启动时，仅打印 “Button is clicked!” 一次而不是每次单击都打印一次呢？
下面我们就来讲述一下如何实现这个目标：
-- -------------------- ---- -------
------ --------- ---- ---------------------
--- ---------- - --
----- ------ - -------------------------------------
----- ----------- - ----------------- ---------
-------------- --- -- -- -
-- -- --- - -- ---------- --- -- -
------------------- -- -----------
---------- -- --
-
---上面这种方法虽然也可以达到设置避免打印多次的效果，但它并不是一个完善的解决方案，然而我们可以通过一些技巧来解决这个问题。
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ----- ---- ------- ---- - ---- -----------------
----- ------ - -------------------------------------
----- ----------- - ----------------- ---------
-----
------------
-------- -- ----------
------ -- ------- -- ----------- -- - ----- ----------
--------- -- ---------- --- -- -- --------
---- --- -- -- -
-- -- --- -- -
--------------- -- ----
---------- -- --
-
---上面这个例子中，我们使用了 callbag-basics 中的管道和操作符(keywords-filter)。使用 take(1) 操作符，我们限制 clickSource 事件的触发次数为 1 次。接着，我们使用管道将事件映射为一个消息字符串，并过滤了不需要的事件。最后，我们在回调函数中紧跟处理，做出响应。
有了这个方案，我们就可以改善 clickSource 实例，以实现我们的需求。
结论
callbag-from-event 是一个非常实用的 npm 包，它可以快速将任意事件源转换为可供 callbag 使用的可观察数据源。引入这个库可以使我们更加优雅地处理异步事件，从而提高前端代码的可读性、可维护性和性能。
当然，除了 callbag-from-event 可能会有其它的方案，怎么选择，需要根据具体的业务场景和个人习惯来决定，本文只是为前端同行提供一个学习和指导的参考，希望大家能够从中受益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/199921