Cycle.js是一个基于函数式响应式编程（Functional Reactive Programming，FRP）的JavaScript框架，由André Staltz提出。它的核心思想非常简洁：把整个Web应用抽象为一个纯函数，这个函数接收事件流作为输入，返回命令流作为输出。与传统的命令式或组件化框架不同，Cycle.js不直接操作DOM，而是通过驱动器（Driver）来处理所有副作用。理解Cycle.js的关键在于理解它如何利用流（Stream）来描述用户交互、网络请求和界面更新，并借助单向数据流保证应用逻辑的可预测性。
核心抽象：sources与sinks是如何工作的
在Cycle.js中，一个应用被定义为一个纯函数main，它的签名可以简单表示为main(sources)返回sinks。这里的sources是一个对象，里面包含来自外部世界的输入流，例如DOM事件流、HTTP响应流、定时器事件流等。sinks同样是一个对象，包含要发送给外部世界的输出流，例如虚拟DOM节点流、HTTP请求流、写入存储的指令流等。main函数内部不执行任何副作用，它只负责声明性地描述数据流之间的变换关系。
举一个最简单的计数器例子。用户点击按钮时会产生一个click事件流，这个事件流位于sources.DOM中。main函数拿到这个流之后，通过fold操作符把每一次点击累加成一个计数值，然后把计数值映射成虚拟DOM节点，最终将虚拟DOM节点流放入sinks.DOM中返回。整个过程main函数没有读取任何全局状态，也没有直接修改页面，它只是对流进行了变换。这种设计让测试变得非常直接，因为给定固定的输入流就能确定输出流，不需要模拟浏览器环境。
下面的代码展示了一个计数器的main函数形态，它使用了Cycle.js官方推荐的小型流库xstream。其中div和button是来自snabbdom的虚拟DOM辅助函数，它们返回描述界面结构的普通JavaScript对象。
function main(sources) {
const click$ = sources.DOM.select('.increment').events('click');
const count$ = click$.fold((acc, ev) => acc + 1, 0);
const vdom$ = count$.map(count =>
div([
h1('Count: ' + count),
button('.increment', 'Increment')
])
);
return {
DOM: vdom$
};
}
驱动器机制：副作用与纯函数的隔离
Cycle.js通过驱动器（Driver）来处理所有外部副作用。驱动器是一个函数，它接收sinks中对应键的流作为输入，执行实际的副作用，并返回一个sources中对应键的流作为输出。例如，DOM驱动器接收sinks.DOM中的虚拟节点流，将其渲染到页面上，同时监听用户交互事件，把事件打包成流返回给sources.DOM。HTTP驱动器接收sinks.HTTP中的请求流，发起网络请求，并将响应包装成流放入sources.HTTP。
驱动器的接口是标准化的，这与中间件的概念有些相似。开发者可以编写自己的驱动器，比如用来操作localStorage、WebSocket或Canvas。由于驱动器只有副作用，不含业务逻辑，因此可以被复用和测试。main函数与驱动之间通过run函数连接，run函数的调用方式如下面的代码所示。run负责在main和drivers之间建立循环连接，并且管理流订阅和生命周期。
import { run } from '@cycle/run';
import { makeDOMDriver } from '@cycle/dom';
const drivers = {
DOM: makeDOMDriver('#app')
};
run(main, drivers);
这种隔离方式解决了传统MVC或组件式框架中常见的一个问题：业务逻辑与视图操作、网络请求混杂在一起，导致单元测试困难。在Cycle.js里，main函数永远不碰真实的DOM元素，也不调用XMLHttpRequest，它只处理抽象的数据流。所有不纯的操作都被推到驱动器层，而驱动器层通常由框架本身或经过充分测试的库提供。
单向数据流的实现：从驱动到main再到驱动
Cycle.js的数据流向看似是一个循环：驱动器产生sources，sources进入main，main返回sinks，sinks又进入驱动器。这个循环可以用两个等式描述：sinks = main(sources)；sources = drivers(sinks)。但如果仔细分析，数据在每个环节都是单向传递的，不存在隐式的反向更新。一个事件从DOM驱动器出发，经过sources.DOM进入main，经过变换后生成新的虚拟DOM放入sinks.DOM，最后由DOM驱动器渲染，完成一个完整周期。
这种循环与双向数据绑定有着本质区别。双向绑定中，视图和模型之间会相互自动修改，数据流动方向不清晰，调试时很难追踪状态变化。而Cycle.js的循环是异步的、基于流驱动的。每次用户交互只会触发一次完整的数据流动，流不会在main内部修改输入，也不会在驱动器中修改业务状态。整个链条遵循函数式编程的不可变原则，这使得状态变化完全可预测。
代码层面，Cycle.js经常使用xstream或RxJS提供的操作符来组合多个流。例如需要同时监听键盘输入和鼠标点击时，可以用combine或merge将不同来源的流合并后再计算状态。下面的示例展示了如何把两个独立的动作流合并，再生成用户列表的虚拟DOM。这种以流为中心的编程方式特别适合处理复杂的异步交互。
function main(sources) {
const add$ = sources.DOM.select('.add').events('click').mapTo(1);
const remove$ = sources.DOM.select('.remove').events('click').mapTo(-1);
const count$ = xs.merge(add$, remove$)
.fold((acc, delta) => acc + delta, 0);
const vdom$ = count$.map(count =>
div([
h2('Total: ' + count),
button('.add', 'Add'),
button('.remove', 'Remove')
])
);
return { DOM: vdom$ };
}
DOM Driver的实现原理与虚拟DOM
Cycle.js的DOM驱动器内部使用了虚拟DOM技术，默认基于snabbdom库。当main函数返回一个vnode流时，DOM驱动器会订阅这个流，对每次发出的新vnode都会与上一次渲染的真实DOM进行diff比较，然后仅对发生变化的部分执行真实DOM更新。这种机制保证了渲染效率，开发者不需要手动操作DOM节点，只需要描述不同状态下的虚拟视图结构。
事件监听方面，DOM驱动器采用事件委托的方式。它会在根容器上统一绑定事件，当事件冒泡到根容器时，再根据事件类型和目标元素判断是否匹配某个select选择器。sources.DOM.select方法返回一个带选择器的对象，调用其events方法即可得到过滤后的事件流。这种方式避免了为每个动态元素单独绑定和解绑事件，特别适合列表渲染等场景。
为了让多个组件之间的事件选择器不冲突，Cycle.js提供了isolate机制。每个被隔离的组件会获得一个独立的选择器命名空间，例如组件A中的<button>事件不会与组件B中的同名按钮混淆。这一机制在构建大型应用时非常重要，它让组件可以像函数一样被组合和复用，同时保持内部状态的隔离。Cycle.js的函数式响应式架构因此在复杂前端项目中展现出独特的优势。