扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章为大家展示了怎么理解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框架，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网