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')
        );
  • 相关阅读:
    学习:HelloWorld项目目录
    学习:java设计模式—Adapter模式
    学习:java设计模式—Decorator模式
    MyEclipse8.5/8.6不能安装ADT
    学习:Android框架
    笔记:代码整洁之道
    JVM常用启动参数
    春雷第一声初入博客
    在Winform中更改控件导致designer中代码自动移除解决方法
    C#生成灰度图片:拖动图片到picturebox显示,拖动picturebox图片到资源管理器 (Drag & drop )
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5273274.html
Copyright © 2011-2022 走看看