人機交互 JavaScript 框架：Cycle.js

jopen 9年前發布 | 14K 次閱讀 Cycle.js JavaScript開發

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') 
}
);

人機交互 JavaScript 框架 Cycle.js