怎么理解Cyclejs函数式和响应式的js框架-创新互联

本篇文章为大家展示了怎么理解Cycle js函数式和响应式的js框架，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

Cycle.js带有所有现代前端库的时髦基因：纯函数式，全响应式，组件化等等……它主要解决的核心问题是人机交互，最后我们还能发现这个其实更通用，我们可以用它构建更完整的响应式系统。

Cycle.js的核心依赖

是Rxjs，而Rxjs的核心是Observable。它现在是ES的stage-1提案，因此很可能在一两年内被加入原生js的Api。你现在可以把它简单看作一个高级Promise，而熟悉.Net的同学可以经常对比Linq思考。Promise是一个存储（可能存在）的值的异步容器，而Observable是存储流的容器，这些可爱的容器可以替我们打理异步序列、可能性、流这些抽象概念的上下文。

分形架构的好处显而易见，就是复用容易，组合方便，Cycle.js推崇的也是分形架构。其将应用抽象为了一个纯函数main(sources)，该函数接收一个sources参数，用来从外部环境获得诸如DOM、HTTP这样的副作用，再输出对应的sinks去影响外部环境。

Cycle.js应用

基于这种简单而直接的抽象，Cycle.js容易做到分形，即每个Cycle.js应用（每个main函数）可以组合为更大的Cycle.js应用：

在分形体系下，通过runAPI，能驱动任何Cycle.js应用运行，无论它是一个简单的Cycle.js应用，还是一个嵌套复合的Cycle.js应用。

import{div,label,input,hr,h2,makeDOMDriver}from'@cycle/dom'

functionmain(sources){

constinput$=sources.DOM.select('.field').events('input')

constname$=input$.map(ev=>ev.target.value).startWith('')

constvdom$=name$.map(name=>

div([

label('Name:'),

input('.field',{attrs:{type:'text'}}),

hr(),

h2('Hello'+name),

])

)

return{DOM:vdom$}

}

run(main,{DOM:makeDOMDriver('#app-container')})

上述内容就是怎么理解Cycle js函数式和响应式的js框架，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。