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