原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简 ...
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/
是什么
Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI):
函数式
Cycle.js 把应用程序抽象成一个纯函数 main()
,从外部世界读取副作用(sources
),然后产生输出(sinks
) 传递到外部世界,在那形成副作用。这些外部世界的副作用,做为Cycle.js的插件存在(drivers),它们负责:处理DOM、提供HTTP访问等。
响应式
Cycle.js 使用 rx.js 来实现关注分离,这意味着应用程序是基于事件流的,数据流是 Observable 的:
HCI
HCI 是双向的对话,人机互为观察者:
在这个交互模型中,人机之间的信息流互为输出输出,构成一个循环,也即 Cycle这一命名所指,框架的Logo更是以莫比乌斯环贴切的描述了这个循环。
唯一的疑惑会是:循环无头无尾,信息流从何处发起?好问题,答案是:
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进行交互:
- 需要传递内容给用户时,
main()
会返新的DOM sinks,以触发domDriver()
生成virtual-dom
,并渲染 main()
订阅domDriver()
的输出值(做为输入),并据此进行响应
组件化
每个Cycle.js应用程序不管多复杂,都遵循一套输入输出的基本法,因此,组件化是很容易实现,无非就是函数对函数的组合调用
实战
准备工作
安装全局模块
npm install -g http-server
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:学习RxJS:Cycle.js
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。