zoukankan      html  css  js  c++  java
  • [RxJS] Basic DOM Rendering with Subscribe

    While frameworks like Angular 2 and CycleJS provides great ways to update the DOM and handle subscriptions for you, this lesson shows how you can still do basic subscribe blocks and manually update the DOM on your own.

    const Observable = Rx.Observable;
    
    const startButton = document.querySelector('#start');
    const halfButton = document.querySelector('#half');
    const quarterButton = document.querySelector('#quarter');
    
    const stopButton = document.querySelector('#stop');
    const resetButton = document.querySelector('#reset');
    
    const input = document.querySelector('#input');
    
    const start$ = Observable.fromEvent(startButton, 'click');
    const half$ = Observable.fromEvent(halfButton, 'click');
    const quarter$ = Observable.fromEvent(quarterButton, 'click');
    
    const stop$ = Observable.fromEvent(stopButton, 'click');
    const reset$ = Observable.fromEvent(resetButton, 'click');
    
    const input$ = Observable.fromEvent(input, 'input')
        .map(event => event.target.value);
    
    
    const data = {count:0};
    const inc = (acc)=> ({count: acc.count + 1});
    const reset = (acc)=> data;
    
    const starters$ = Observable.merge(
        start$.mapTo(1000),
        half$.mapTo(500),
        quarter$.mapTo(250)
    );
    
    const intervalActions = (time)=> Observable.merge(
        Observable.interval(time)
            .takeUntil(stop$).mapTo(inc),
        reset$.mapTo(reset)
    );
    
    const timer$ = starters$
        .switchMap(intervalActions)
        .startWith(data)
        .scan((acc, curr)=> curr(acc))
    
    
    timer$
        .do((x)=> console.log(x))
        .takeWhile((data)=> data.count <= 3)
    
        .withLatestFrom(
            input$.do((x)=> console.log(x)),
            (timer, input)=> ({count: timer.count, text: input})
        )
        .filter((data)=> data.count === parseInt(data.text))
        .reduce((acc, curr)=> acc + 1, 0)
        .repeat()
        .subscribe(
            (x)=> document.querySelector('#score').innerHTML = `
                ${x}
            `,
            err=> console.log(err),
            ()=> console.log('complete')
        );
  • 相关阅读:
    Open diary(每天更新)
    独立博客与秘密基地,以及对UI设计中拟物态的怀念
    如何在宝塔面板里设置脚本定时恢复数据库
    LaTex公式语法教程及手册(附emlogpro公式显示插件katex说明)
    关于梦的冷知识
    PTui又加全景图 佳田未来城 of 安阳
    原生js 以ajax(post)的方式传json至php,并让php解析为数组
    Python面向对象——
    Python中的模块、常用模块——12
    Python中的装饰器——11
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5273274.html
Copyright © 2011-2022 走看看