[Cycle.js] Introducing run() and driver functions
Currently the code looks like :
// Logic (functional)
function main() {
return {
DOM: Rx.Observable.timer(0, 1000)
.map(i => `Seconds elapsed ${i}`),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
} // Effects (imperative)
function DOMEffect(text$) {
text$.subscribe(text => {
const container = document.querySelector('#app');
container.textContent = text;
});
} function consoleLogEffect(msg$) {
msg$.subscribe(msg => console.log(msg));
} const sinks = main();
DOMEffect(sinks.DOM);
consoleLogEffect(sinks.Log);
We still have this part of code which didn't wrap into a function, we can wrap into a run() function, this can provide a main enterence for the code:
function run(mainFn){
const sinks = mainFn();
DOMEffect(sinks.DOM);
consoleLogEffect(sinks.Log);
} run(main);
Let's say we want to remove consoleLogEffect, current way we need to comment out from the main() function.
The problems are that in the first place we are hard coding these effects inside run. Instead, we should be able to specify that these are the effects that I want to run my main function, so we need to give our effects to run as well.
That will be an object. Effects functions will be an object, and the keys will match those keys that we saw from the sync here. The DOM function is DOM Effect, and the log function is consoleLogEffect.
const effects = {
DOM: DOMEffect,
Log: consoleLogEffect
} function run(mainFn, effects){
const sinks = mainFn();
Object.keys(effects)
.forEach( (effectKey)=>{
effects[effectKey](sinks[effectKey]);
})
} run(main, effects);
The last thing author introduce the 'driver' as the name instead of 'effect' ...
// Logic (functional)
function main() {
return {
DOM: Rx.Observable.timer(0, 1000)
.map(i => `Seconds elapsed ${i}`),
Log: Rx.Observable.timer(0, 2000).map(i => 2*i),
};
} // Effects (imperative)
function DOMDriver(text$) {
text$.subscribe(text => {
const container = document.querySelector('#app');
container.textContent = text;
});
} function consoleLogDriver(msg$) {
msg$.subscribe(msg => console.log(msg));
} function run(mainFn, drivers) {
const sinks = mainFn();
Object.keys(drivers).forEach(key => {
drivers[key](sinks[key]);
});
} const drivers = {
DOM: DOMDriver,
Log: consoleLogDriver,
} run(main, drivers);
[Cycle.js] Introducing run() and driver functions的更多相关文章
- [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 Dr ...
- [Cycle.js] Generalizing run() function for more types of sources
Our application was able to produce write effects, through sinks, and was able to receive read effec ...
- [Cycle.js] Main function and effects functions
We need to give structure to our application with logic and effects. This lessons shows how we can o ...
- 学习RxJS:Cycle.js
原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架( ...
- [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 与 React/Vue 相比更适用于什么样的应用场景?
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
- jquery.cycle.js简单用法实例
样式: a{text-decoration: none;} *{;;} /*容器设置*/ .player { width:216px; height:248px; background:url(htt ...
- [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 ...
- [antd-design-pro] mock 数据(post,request不一致)Sorry, we need js to run correctly!
Sorry, we need js to run correctly! 可能问题: mock数据 api 和 request api 不一致 'POST /api/banners/left' ...
随机推荐
- FZU 1686 神龙的难题(DLX反复覆盖)
FZU 1686 神龙的难题 pid=1686" target="_blank" style="">题目链接 题意:中文题 思路:每个1看成列, ...
- vi & vim 基本指令(持续更新ing)
Abstract:1) 文本编辑模式: --INSERT--2)一般模式: --i.o.a.R--3)命令行命令模式 ...
- C库专题(Day1)
<assert.h> C库宏-assert() 定义:#define assert(ignore) ((void)0) void assert(int experession); ex ...
- python 下的数据结构与算法---1:让一切从无关开始
这段时间把<Data Structure and Algorithms with python>以及<Problem Solving with Algorithms and Dat ...
- (转)【已解决】关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案
近日在使用sql2008的过程中,要对已经创建完成的表结构进行修改,却一直提示弹出如下提示: “ 不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻止保 ...
- GridView 和 Access数据库实现数据绑定(asp.net)
前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="主页.aspx.cs ...
- asp.net "callback" 和 "postback" 的区别.
下图解释了基于 asp.net的 "postback" 和 "callback"的生命周期: Postback 是在将 整个页面的数据 从 client 提交到 ...
- Unity5.3——UI之Canvas
原文:http://docs.unity3d.com/Manual/UISystem.html Canvas 所有的UI都应该放在Canvas里面(子层).Canvas是一个带有Canvas组件的Ga ...
- Ubuntu下安装搜狗拼音输入法
Ubuntu默认输入法是ibus输入法,其实用着也可以了,但是说句实话在某些情况下真的不怎么智能.习惯了搜狗所以,查阅资料测试成功后整理如下, 1.安装搜狗拼音 sudo apt-add-reposi ...
- include,include_once,require,require_once的区别
1.include,require在其被调用的位置处包含一个文件. 2.include_once,require_once函数的作用与include相同,不过它会首先验证是否已包含该文件.如果已经包含 ...