[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 was logical, and this second part here was effects. Effects are everything that change the external world somehow, the real world such as the DOM is connected to the browser, which is the connected to the user, so when we do something like set the text content, we are changing the screen that will shown to the user. So things like console.log and HTTP network requests, all of these things are effects, and these things live in subscribes.

Logic on the other hand, this is not changing the external world anyhow, it‘s just an event stream of numbers every second, and we‘re mapping that event stream to another event stream with strings. This part here is functional, it‘s all about mapping some primitives to others, and this side is imperatives. Our guiding principle for Cycle.js is we want to push subscribes as far away as we can from our app.

So this part of subscribe we want this to live in the framework, and this part is the only thing that the developer will write as the app. That is the guiding principle to separate logic from effects.

console.clear();
// Logic
Rx.Observable.timer(0,1000)
.map( i => `Second elapsed ${i}`)

// Effect
.subscribe( text => console.log(text))
时间: 2024-11-05 11:24:57

[Cycle.js] The Cycle.js principle: separating logic from effects的相关文章

JavaScript模块化-require.js,r.js和打包发布

在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发布,性能优化,工程化管理都有密切的关系,这么重要的事情,在JavaScript大行其道的今天,不可能没有成熟的解决方案,所以从我的实践经验出发,从模块化讲到工程化,分享一下自己的经验. 这篇文章主要是讲require.js和r.js在项目中的使用,不会涉及到工程化问题,对此熟悉的看官可以略过此文.对

OSChina 开源周刊第三十三期 —— Node.js 和 io.js 准备合作!

每周技术抢先看,总有你想要的! 开源资讯 Node.js 和 io.js 准备合作!合久必分,分久必合? Nervana 开源深度学习软件,性能超 Facebook.Nvidia产品 B 站建开源工作组 多 APP 使用其开源项目 Android 新开发技术 Sky:Dart 开发 Android 应用 谷歌红帽及 VMware 宣布支持 CoreOS 容器 Oracle 宣布 Java 7 生命周期终结 Java 9 公布发行计划,明年 9 月发布正式版 IO.js 2.0.0 发布,服务器

青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,"青出于蓝而胜于蓝".今天,K就从下面几个方面来跟大家一起探讨一下,Vue.js到底在哪些方面更"胜于蓝". (一)简单的操作 这是K看来Vue.js最杰出的的方法,Vue.js致力于视图层的展现,这使它在与其他项目进行整合的时候会变得非常easy,这也使它更容易"嵌

Angular、React.js 和Node.js到底选谁?

为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情,但在这种情况下,对于到底应该选择哪种框架,程序员之间并没有一致的意见,每个人都有不同的想法,并且听起来都相当合理. 为了让一切归于和谐,本文就来探究一下这三大框架各自的优缺点. 基础知识部分: 在我们深入研究这三种框架的具体细节之前,先来了解一些前情提要.yigouyul22.com xucaiz

Require.js、Angular.js整合

Require.js 详见: 初识Require.js 解密Require.js Angular.js 详见: 初识Angular.js之爱恨情仇 整合Require.js.Angular.js 配置 在Requirejs中配置angular.js. require-main.js // 配置 requirejs.config({ ... paths: { 'jquery': 'libs/jquery-2.1.3/jquery.min', 'angular': 'libs/angular-1.3

webBrowser调用外部js文件和js函数(转载)

原文链接:http://fy5388.blog.163.com/blog/static/56499537201012594314130/ webBrowser调用外部js文件和js函数 '第一种方法:webbrowser动态调用html和js代码,都是动态的:代码示例: webBrowser1.Navigate("about:blank");webBrowser1.Document.OpenNew(True);webBrowser1.Document.Write("<H

node,js和vue.js的联合使用的小例子

1.本博客内容转发自http://www.cnblogs.com/zl-127/p/6543973.html. 2.配置好 node js环境 创建app.js文件,代码如下 var http = require("http"); var fs = require('fs'); var url = require('url'); http.createServer(function(request, response) { // 解析请求,包括文件名 var pathname = ur

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

Ext JS学习第八天 Ext基础之 认识Ext.js 和Ext-more.js

此文来记录学习笔记: •认识Ext.js 和Ext-more.js •首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义.基本的属性和方法,我们要重点学习和深入底层代码进行研究. •如果所示:API位置 . •Ext.js方法详解: –Ext.apply&Ext.applyIf –Ext.extend –typeOf –isEmpty.isIterable.isFunction.isArray... –Iterate 下面从栗子中看看这些方法是实际使用方法,请看栗子代码吧