【[Cycle.js] Main function and effects functions】的更多相关文章

[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 organize our code into two parts: main() function for logic, and effects functions for effects. // Logic (functional) function main() { return Rx.Obser…

[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(te…

The App Life Cycle & The Main Function

The App Life Cycle Apps are a sophisticated interplay between your custom code and the system frameworks. The system frameworks provide the basic infrastructure that all apps need to run, and you provide the code required to customize that infrastruc…

[Cycle.js] Customizing effects from the main function

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect. // Logic (functional) function…

[Cycle.js] Read effects from the DOM: click events

So far we only had effects that write something to the external world, we are not yet reading anything from the external world into our app. This lesson shows how we can change the DOM Driver to return a "DOM Source" representing read effects, s…

[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 con…

[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 effects, through the DOM sources. However, the main function only gets the DOMSource as input. This lessons shows how we can generalize main to receive an…

[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.cloudf…

学习RxJS：Cycle.js

原文地址:http://www.moye.me/2016/06/16/learning_rxjs_part_two_cycle-js/ 是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用.这些外部世界的副作用,做为Cycle.js的…

[Cycle.js] Fine-grained control over the DOM Source

Currently in our main() function,  we get click$ event. function main(sources) { const click$ = sources.DOM; const sinks = { DOM: click$ .startWith(null) .flatMapLatest(() => Rx.Observable.timer(0, 1000) //describe what element should exist .map(i =>…