什么是 Bacon.js
Bacon.js 是一个基于函数响应式编程（FRP）的 JavaScript 库，它提供了一种声明式的方式来处理异步和事件流。
Bacon.js 的核心概念是 "EventStream" 和 "Property"。EventStream 是表示事件序列的对象，而 Property 则代表一个随时间变化的值。使用这两个概念可以很方便地处理异步数据和事件。
安装和使用
安装 Bacon.js 可以通过 npm：
--- ------- -------
使用时需要将其引入到你的项目中：
------ ----- ---- ----------
或者通过 script 标签引入：
------- -------------------------------------------------------
创建 EventStream 和 Property
创建 EventStream 可以使用 Bacon.fromEvent 方法，它接收一个 DOM 元素和事件名作为参数：
----- ------ - ------------------------------------- ----- ----------- - ----------------------- ---------
创建 Property 可以使用 Bacon.constant 或 Bacon.combineTemplate 方法：
----- ---- - ------------------------ ----- --- - ------------------- ----- ------ - ----------------------- ----- --- ---
上面的代码创建了一个名为 person 的 Property，它包含一个 name 属性和一个 age 属性。当任意一个属性的值发生变化时，person 的值也会相应地更新。
处理 EventStream 和 Property
使用 Bacon.js 处理 EventStream 和 Property 的方式与使用普通数组和对象非常相似。例如，我们可以使用 map、filter、reduce 等方法来转换和处理它们：
----------- ---------- -- -------------- --------- -- - - ---- ---------- ----- ------ -- --- - ------ ------------ -- ------------------- ---------- ------ ---------------- ---- -- -------------------- -- ------ ----- -------
上面的代码将点击事件流转换为鼠标指针 X 坐标，并过滤出大于 100 的值，然后计算它们的总和并输出到控制台。同时还将 person 的属性值输出到控制台。
示例代码
下面是一个完整的示例代码，它创建了一个按钮和一个文本框，当点击按钮时会将文本框中的值加一：
--------- -----
------
------
----- ----------------
--------------- ------------
-------
------
------ ----------- ------------- ----------
------- ------------------ ----------
------- -------------------------------------------------------
--------
----- ----- - ------------------------------------
----- ------ - -------------------------------------
----- ----------- - ----------------------- ---------
----- ---------- - ---------------------- --------
---------- -- ---------------------------- -----
----- --- - --------------------- -- -- - - -- -- ------------ ------------
----------------- ---------
-- -------------- --- --- --- --- --------- ---- -- ------ --- ----- ------
-- ----------------- -- ----------- - -------
---------
-------
-------在这个示例中，我们使用了 Bacon.fromEvent 来创建 clickStream 和 inputValue，然后使用 Bacon.combineWith 方法将它们相加得到一个名为 sum 的 Property。最后，我们将 sum 的值赋给文本框的 value 属性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/32832