是什么

Cycle.js 是一個極簡的JavaScript框架（核心部分加上注釋125行），提供了一種函數式，響應式的人機交互接口（以下簡稱HCI）：

函數式

Cycle.js 把應用程序抽象成一個純函數 main()，從外部世界讀取副作用(sources)，然后產生輸出(sinks) 傳遞到外部世界，在那形成副作用。這些外部世界的副作用，做為Cycle.js的插件存在(drivers)，它們負責：處理DOM、提供HTTP訪問等。

響應式
Cycle.js 使用 rx.js 來實現關注分離，這意味著應用程序是基于事件流的，數據流是Observable 的：

HCI

HCI 是雙向的對話，人機互為觀察者

在這個交互模型中，人機之間的信息流互為輸出輸出，構成一個循環，也即 Cycle這一命名所指，框架的Logo更是以莫比烏斯環貼切的描述了這個循環。cycle_log

唯一的疑惑會是：循環無頭無尾，信息流從何處發起？好問題，答案是：

However, we need a .startWith() to give a default value. Without this, nothing would be shown! Why? Because our sinks is reacting to sources, but sources is reacting to sinks. If no one triggers the first event, nothing will happen. —— via examples

有了.startWith() 提供的這個初始值，整個流程得以啟動，自此形成一個閉環，一個事件驅動的永動機 :)

Drivers

driver 是 Cycle.js 主函數 main()和外部世界打交道的接口，比如HTTP請求，比如DOM操作，這些是由具體的driver 負責的，它的存在確保了 main()的純函數特性，所有副作用和繁瑣的細節皆由 driver來實施——所以 @cycle/core 才125 行，而@cycle/dom 卻有 4052 行之巨。

driver也是一個函數，從流程上來說，driver 監聽sinks（main()的輸出）做為輸入，執行一些命令式的副作用，并產生出sources做為main()的輸入。

DOM Driver

即 @cycle/dom，是使用最為頻繁的driver。實際應用中，我們的main()會與DOM進行交互：

組件化
每個Cycle.js應用程序不管多復雜，都遵循一套輸入輸出的基本法，因此，組件化是很容易實現，無非就是函數對函數的組合調用

實戰

準備工作

安裝全局模塊

依賴模塊一覽

"devDependencies": {"babel-plugin-transform-react-jsx": "^6.8.0","babel-preset-es2015": "^6.9.0","babelify": "^7.3.0","browserify": "^13.0.1","uglifyify": "^3.0.1","watchify": "^3.7.0"},"dependencies": {"@cycle/core": "^6.0.3","@cycle/dom": "^9.4.0","@cycle/http": "^8.2.2"}

.babelrc （插件支持JSX語法）

{"plugins": [["transform-react-jsx", { "pragma": "hJSX" }]],"presets": ["es2015"]}