Shulou(Shulou.com)06/03 Report--

This article shows you how to understand the Cycle js functional and responsive js framework, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Cycle.js comes with all the trendy genes of modern front-end libraries: pure functional, fully responsive, componentized, etc. It mainly solves the core problem of human-computer interaction, and finally we can find that this is actually more general, and we can use it to build a more complete responsive system.

Core dependencies of Cycle.js

It's Rxjs, and the core of Rxjs is Observable. It is now ES's stage-1 proposal, so it is likely to be added to the native js's Api within a year or two. You can now think of it simply as an advanced Promise, while students who are familiar with .net can often think about it compared to Linq. Promise is an asynchronous container for storing (possible) values, while Observable is a container for storing streams. These lovely containers can take care of the context of abstract concepts such as asynchronous sequences, possibilities, and streams for us.

The advantage of fractal architecture is obvious, that is, it is easy to reuse and easy to combine, and Cycle.js also advocates fractal architecture. It abstracts the application as a pure function main (sources), which receives a sources parameter to obtain side effects such as DOM and HTTP from the external environment, and then outputs the corresponding sinks to affect the external environment.

Cycle.js application

Based on this simple and straightforward abstraction, Cycle.js is easy to be fractal, that is, each Cycle.js application (each main function) can be combined into a larger Cycle.js application:

Under the fractal system, any Cycle.js application can be driven by runAPI, whether it is a simple Cycle.js application or a nested composite Cycle.js application.

Import {div,label,input,hr,h2,makeDOMDriver} from'@cycle/dom'

Functionmain (sources) {

Constinput$=sources.DOM.select ('.field'). Events ('input')

Constname$=input$.map (ev= > ev.target.value) .startWith ('')

Constvdom$=name$.map (name= >

Div ([

Label ('Name:')

Input ('.field', {attrs: {type:'text'}})

Hr ()

H2 ('Hello'+name)

])

)

Return {DOM:vdom$}

}

Run (main, {DOM:makeDOMDriver ('# app-container')})

The above is how to understand the Cycle js functional and responsive js framework. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.