学习RxJS之JavaScript框架Cycle.js


Posted in Javascript onJune 17, 2019

是什么

Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI):

函数式

Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用。这些外部世界的副作用,做为Cycle.js的插件存在(drivers),它们负责:处理DOM、提供HTTP访问等。

响应式
Cycle.js 使用 rx.js 来实现关注分离,这意味着应用程序是基于事件流的,数据流是Observable 的:

HCI

HCI 是双向的对话,人机互为观察者

在这个交互模型中,人机之间的信息流互为输出输出,构成一个循环,也即 Cycle这一命名所指,框架的Logo更是以莫比乌斯环贴切的描述了这个循环。cycle_log

唯一的疑惑会是:循环无头无尾,信息流从何处发起?好问题,答案是:

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应用程序不管多复杂,都遵循一套输入输出的基本法,因此,组件化是很容易实现,无非就是函数对函数的组合调用

实战

准备工作

安装全局模块

依赖模块一览

"devDependencies": {
"babel-plugin-transform-react-jsx": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"uglifyify": "^3.0.1",
"watchify": "^3.7.0"
},
"dependencies": {
"@cycle/core": "^6.0.3",
"@cycle/dom": "^9.4.0",
"@cycle/http": "^8.2.2"
}

.babelrc (插件支持JSX语法)

{
"plugins": [
["transform-react-jsx", { "pragma": "hJSX" }]
],
"presets": ["es2015"]
}

Scripts(热生成和运行服务器)

"scripts": {
"start": "http-server",
"build": "../node_modules/.bin/watchify index.js -v -g uglifyify -t babelify -o bundle.js"
}

以下实例需要运行时,可以开两个shell,一个跑热编译,一个起http-server(爱用currently亦可

交互实例1

功能:两个button,一加一减, 从0起步,回显计数
demo地址: http://output.jsbin.com/lamexacaku

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>components</title>
</head>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>

index.js

import Cycle from '@cycle/core'
import { makeDOMDriver, hJSX } from '@cycle/dom'
function main({ DOM }) {
const decrement$ = DOM.select('.decrement').events('click').map(_ => -1)
const increment$ = DOM.select('.increment').events('click').map(_ => +1)
const count$ = increment$.merge(decrement$)
.scan((x, y) => x + y)
.startWith(0)
return {
DOM: count$.map(count =>
<div>
<input type="button" className="decrement" value=" - "/>
<input type="button" className="increment" value=" + "/>
<div>
Clicked {count} times~
</div>
</div>
)
}
}
Cycle.run(main, {
DOM: makeDOMDriver('#container'),
})

不难看出:

  • main()是个纯函数,从始至终不依赖外部状态,它的所有动力来自于DOM事件源click,这个状态机依靠Observable.prototype.scan()得以计算和传递,最后生成sinks传递给DOM driver以渲染;
  • 启动了这个循环是 .startWith();
  • Cycle.run是应用程序的入口,加载main()和DOM driver,后者对一个HTML容器进行渲染输出

交互实例2

功能: 一个button一个框,输入并点button后,通过Github api搜索相关的Repo,回显总数并展示第一页Repo列表

index.js

import Cycle from '@cycle/core'
import { makeDOMDriver, hJSX } from '@cycle/dom'
import { makeHTTPDriver } from '@cycle/http'
const GITHUB_SEARCH_URL = 'https://api.github.com/search/repositories?q='
function main(responses$) {
const search$ = responses$.DOM.select('input[type="button"]')
.events('click')
.map(_ => { return { url: GITHUB_SEARCH_URL } })
const text$ = responses$.DOM.select('input[type="text"]')
.events('input')
.map(e => { return { keyword: e.target.value } })
const http$ = search$.withLatestFrom(text$, (search, text)=> search.url + text.keyword)
.map(state => { return { url: state, method: 'GET' } })
const dom$ = responses$.HTTP
.filter(res$ => res$.request.url && res$.request.url.startsWith(GITHUB_SEARCH_URL))
.mergeAll()
.map(res => JSON.parse(res.text))
.startWith({ loading: true })
.map(JSON => {
return <div>
<input type="text"/>
<input type="button" value="search"/>
<br/>
<span>
{JSON.loading ? 'Loading...' : `total: ${JSON.total_count}`}
</span>
<ol>
{
JSON.items && JSON.items.map(repo =>
<div>
<span>repo.full_name</span>
<a href={ repo.html_url }>{ repo.html_url }</a>
</div>
)
}
</ol>
</div>
}
)
return {
DOM: dom$,
HTTP: http$,
}
}
const driver = {
DOM: makeDOMDriver('#container'),
HTTP: makeHTTPDriver(),
}
Cycle.run(main, driver)

有了实例1做铺垫,这段代码也就通俗易懂了,需要提示的是:

  • Rx的Observable对象,命名上约定以$符为结束,以示区分
  • Observable.prototype.withLatestFrom()的作用是:在当前Observable对象的事件触发时(不同于 combineLatest),去合并参数的目标Observable对象的最新状态,并传递给下一级Observer
  • 以上项目完整实例,可在 /rockdragon/rx_practise/tree/master/src/web 找到

小结

寥寥数语,并不足以概括Cycle.js,比如 MVI设计模式,Driver的编写,awesome-cycle 这些进阶项,还是留给看官们自行探索吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
Jun 07 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
javascript系统时间设置操作示例
Jun 17 #Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 #Javascript
Vue程序调试的方法
Jun 17 #Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 #Javascript
javascript实现日历效果
Jun 17 #Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 #Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 #Javascript
You might like
php4的session功能评述(三)
2006/10/09 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
调试php程序的简单步骤
2019/10/04 PHP
php实现图片压缩处理
2020/09/09 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
js格式化时间的方法
2015/12/18 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
韩国11街:11STREET
2018/03/27 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
群教班子对照检查材料
2014/08/26 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
医院科室评语
2015/01/04 职场文书
学雷锋倡议书
2015/01/19 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
比较几种Redis集群方案
2021/06/21 Redis
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python