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的更多相关文章

  1. [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 ...

  2. 学习RxJS：Cycle.js

    原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...

  3. RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？

    RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...

  4. [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 ...

  5. jquery.cycle.js简单用法实例

    样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...

  6. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  7. 从零开始的JS生活（二）——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  8. jquery.cycle.js

    jquery.cycle.js简单用法实例 样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width ...

  9. echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

    一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...

随机推荐

  1. Android控件属性大全[整理转载]

    控件属性: android属性 Android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料, 第一类:属性值为true或falseandroid:layout_ ...

  2. 转载--DEV GridControl 的一些基本操作

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  3. vs2012快捷键失效解决办法

    快速解决vs开发工具快捷键失效,看图

  4. 《第一行代码》学习笔记17－碎片Fragment（2）

    1.碎片的状态和回调: (1)运行状态:碎片可见+所关联的活动处于运行状态. (2)暂停状态:当活动进入暂停状态(由于另一个未占满屏幕的活动被添加到栈顶),与其相关联的可见碎片会进入暂停状态. (3) ...

  5. Windows命令行(DOS命令)教程 -1 （转载） http://www.pconline.com.cn/pcedu/rookie/basic/10111/15325.html

    一.命令行简介 命令行就是在Windows操作系统中打开DOS窗口,以字符串的形式执行Windows管理程序. 在这里,先解释什么是DOS? DOS--Disk Operation System 磁盘 ...

  6. C#之获取本地IP地址

    最近协助一个项目解决了一个获取IP地址的问题,手机客户端与WebService进行通讯,然后WebService通过TCP通讯把指令传递到另一台PC机上.在测试的过程中,总是会出现WebService ...

  7. Go学习笔记(一):Ubuntu 环境下Go的安装

    本文是根据<Go Web 编程>,逐步学习 Ubuntu 环境下go的安装的笔记. <Go Web 编程>的URL地址如下: https://github.com/astaxi ...

  8. android 开发中判断网络是否连接的代码

    在android的开发中,尤其是与访问网络有关的开发,都要判断一下手机是否连接上了网络,下面是一个判断是否连接网络的嗲吗片段: package cn.com.karl.util; import com ...

  9. WordPress nginx环境下开启多站点

    在wp-config.php插入 define('WP_ALLOW_MULTISITE', true); 进入管理页面安装网络,子目录模式按提示再在wp-config.php插入 define('MU ...

  10. eclipse 将文件夹作为sourcefolder

    文件夹---右键