[Cycle.js] From toy DOM Driver to real DOM Driver
This lessons shows how we are able to easily swap our toy DOM Driver with the actual Cycle.js DOM Driver, a more solid, more flexible, more efficient implementation.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-core/v6.0.3/dist/cycle.js"></script>
<script src="https://rawgit.com/cyclejs/cycle-dom/v9.1.0/dist/cycle-dom.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
const {h, h1, span, makeDOMDriver} = CycleDOM;
// Logic (functional)
function main(sources) {
const mouseover$ = sources.DOM.select('span').events('mouseover');
const sinks = {
DOM: mouseover$
.startWith(null)
.flatMapLatest(() =>
Rx.Observable.timer(0, 1000)
.map(i =>
h1({style: {background: 'red'}}, [
span([
`Seconds elapsed: ${i}`
])
])
)
),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
return sinks;
}
// Effects (imperative)
function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
}
const drivers = {
DOM: makeDOMDriver('#app'),
Log: consoleLogDriver,
}
Cycle.run(main, drivers);
[Cycle.js] From toy DOM Driver to real DOM Driver的更多相关文章
- [Cycle.js] Hello World in Cycle.js
Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we ...
- 学习RxJS：Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- [Cycle.js] The Cycle.js principle: separating logic from effects
The guiding principle in Cycle.js is we want to separate logic from effects. This first part here wa ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- jquery.cycle.js
jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...
- echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...
随机推荐
- hdu 5080 2014ACM/ICPC鞍山K题 polya计数
首先,中心点是能够直接算出来的 把全部的坐标相加再除n就能够 然后枚举一个不靠近中心的点,枚举它绕中心点旋转的角度.仅仅要枚举50次就能够了 计算出当前枚举的的角度能否形成一个置换群 计算循环节,再用 ...
- Linux基础知识（一）
1. Unix 和 Linux之间有什么关系? Linux可以说是Unix衍生过来的,它借鉴了很多Unix的设计理念,应该说,它们类似于父子关系,Linux又被称为类Unix系统. 2. BSD是什么 ...
- 利用iptables实现基于端口的网络流量统计
如何统计某个应用的网络流量(包括网络流入量和网络流出量)问题,可以转换成如何基于端口号进行网络流量统计的问题.大部分网络应用程序都是传输层及以上的协议,因此基于端口号(tcp, udp)统计网络流量基 ...
- js 计算某年某周日期范围
<HTML><HEAD><script type="text/javascript"> //目前只判断了4位有效输入的年份,//日期输出格式已处 ...
- mac中遇到的mysql编码问题
由于项目有需要支持表情包输入数据库,自己做了一下技术测试,修改了my.cnf的权限为777.结果就操蛋了.编码错误.... 直到我无意地输入mysql -h,提示我/etc/my.cnf被忽略的一段话 ...
- ajax请求或者页面需要缓存，代码如下
缓存页面代码 1 private void setClientCache(HttpServletResponse response, int maxAgeSec) 2 { 3 long maxAgeM ...
- jvm的client和server
最近研究c++代码调用java的jar,发现64位的下的jvm在server路径,而32位的jvm则存在client路径下面,于是十分好奇,查了下,这里做个记录 JVM Server模式与client ...
- C++类中的静态成员变量与静态成员函数
最近一直看c++相关的项目,但总是会被c++类中的静态成员变量与静态成员函数的理解感觉很是模糊,不明白为什么类中要是用静态成员变量.于是在网上搜集了一些资料,自己再稍微总结下. 静态成员的概念: 静态 ...
- 解决Sublime-Text-3在ubuntu下中文输入的问题
在ubuntu下使用ST这神器已经一段日子了,但是一直有个纠结的问题,就是中文输入非常坑爹,曾经一段时间,使用inputHelper这个插件来解决, 但是……每次都要按个快捷键,弹出一个小小小框来输入 ...
- AngularJS中ng-options简单用法及预选项失败的原因
刚刚接触AngularJs,记录一下ng-options的使用. 1.构造key-value数据 $scope.types = [ {id:"1",type:"AA&qu ...