[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数据请求时未调用 ...
随机推荐
- [Regular Expressions] Find Plain Text Patterns
The simplest use of Regular Expressions is to find a plain text pattern. In this lesson we'll look a ...
- OLE-DB 操作excel 基本
1 方法用例 *&---------------------------------------------------------------------* *& 本程序总结了常 ...
- Eclipse导出jar包Unity打包错误
前几天接SDK使用的是Android Studio昨天打开AndroidStudio后自动更新了gradler然后失败了然后AndroidStudio就挂了.就是用之前的方法Eclipse到处jar包 ...
- Android-IM架构设计
###1. 架构总览 ###2. 模块介绍 ####2.1 协议封装与任务流程 #####1) 协议与任务的封装 a. 协议有协议头(协议头因为格式相同,被抽象出来)和协议体组成,协议有两类:请求协议 ...
- Hacker（16）----防范端口扫描与嗅探
端口扫描与嗅探都是黑客常用的招数,其目的是定位目标计算机和窃取隐私信息.为确保自己计算机的安全,用户需要掌握防范嗅探与端口扫描的常见措施,保障个人隐私信息安全. 一.掌握防范端口扫描的常用措施 防范端 ...
- ulimit 参数介绍
Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源情况,设置各linux 用户的最大进程数 可以用ulimit -a 来显示当前的各种用户进程限制.下面我把某linux用户的最 ...
- Android之Activity启动的源码简介
从一个简单的startActivity开始 进入了Activity.java public void startActivity(Intent intent) { this.startActivity ...
- .net 4.0 面向对象编程漫谈基础篇读书笔记
话说笔者接触.net 已有些年头,做过的项目也有不少,有几百万的,也有几十万的,有C/S的,也有B/S的.感觉几年下来,用过的框架不少,但是.net的精髓一直没有掌握.就像学武之人懂得各种招式,但内功 ...
- ognl.NoSuchPropertyException(没有对应属性异常)
ognl.NoSuchPropertyException: com.xie.struts2.tags.modal.Student.sName(没有对应属性异常) at ognl.ObjectPrope ...
- jQuery选择器的学习
jQuery的核心在于它的选择器,通过观看视频和阅读,发现jQuery选择器大体上的分类可分为这么几种(不同人方式不同,这里选择一个自认为比较好的): 1.基础选择器(对应api文档中的基本选择器和层 ...