人机交互 JavaScript 框架:Cycle.js
jopen
9年前
Cycle.js 是一个人机交互的 JavaScript 框架。Cycle 的核心是由 human() 和 computer () 两个函数相互作用而建立的模型。计算机的输出作为人体的输入,反之亦然,然后导出方程 x = human(computer(x)),这个 x 是可以观察的。人机相互观察,这就是我们说的“功能单项数据流”,或者“反应对话”,作为一个应用程序的开发者,你只要指定 computer() 的功能。
示例代码:
import {run} from '@cycle/core'; import {h, makeDOMDriver} from '@cycle/web'; function main(responses) { return { DOM: responses.DOM.get('.field', 'input') .map(ev => ev.target.value) .startWith('') .map(name => h('div', [ h('label.label', 'Name:'), h('input.field', {attributes: {type: 'text'}}), h('hr'), h('h1.header', 'Hello ' + name) ]) ) }; } run(main, { DOM: makeDOMDriver('.js-container') } );