美文网首页
01RxJS-响应式编程类库

01RxJS-响应式编程类库

作者: learninginto | 来源:发表于2020-12-31 10:23 被阅读0次
    RxJS.png
    rxjs-响应式编程类库)RxJS官网

    RxJS(Reactive Extensions For JavaScript是ReactiveX编程理念的JavaScript版本。

    rx把事件和数据看成一个流,所有的操作都是异步的,可以把RxJS想成处理异步行为的Lodash。

    简单来说,它将一切数据,包括HTTP请求,DOM事件或者普通数据等包装成流的形式,然后用强大丰富的操作符对流进行处理,使你能以同步编程的方式处理异步数据,并组合不同的操作符来轻松优雅的实现你所需要的功能。

    • 纯函数的特性

    没有返回值;不会改变原数据;(输入一定、输出也一定)

    const arr = [1,2,3,4,5];
    arr.slice(0,3);//arr不变,slice就是纯函数
    arr.splice(0,3,2);//arr被改变,splice不是纯函数
    
    rxjs初体验——控制点击频率,每次点击间隔1S以上
    • 原生实现
    let count = 0;
    let rate = 1000;
    let lastClick = Date.now() - rate;
    document.addEventListener('click', ()=>{
        if(Date.now() - lastClick >= rate){
            console.log(`Clicked ${++count} times`);
            lastClick = Date.now();
        }
    })
    
    • rxjs实现
    import { fromEvent } from 'rxjs'
    import { throttleTime, scan } from 'rxjs/operators'
    fromEvent(document, 'click').
        pipe(
            throttleTime(1000),
            scan(count => count + 1, 0)
        )
        .subscribe(count => console.log(`click ${count} times`)
    )
    
    rxjs和promise
    • 可观察对象是声明式的,在被订阅之前,它不会开始执行;而promise是在创建时就立即执行的。
    class AppComponent{
        newPromise(){
            const p = new Promise(resolve => {
                console.log('initial a promise');//立即触发
            })
        }
        newObservable(){
            const o = new Observable(subscriber => {
                console.log('initial a newObservable');//不触发
            })
        }
    }
    
    • 串联,和上一条类似,只有当调用subscribe方法时,才会执行所有管道函数
    class AppComponent{
        newPromise(){
            const p = new Promise(resolve => {
                console.log('initial a promise');//立即触发
                resolve(['a','b,','c'])
            }).then(res => {
                console.log('第一个then')
                return res;
            }).then(res => {
                console.log('第二个then')
                return res;
            })
        }
        newObservable(){
            const o = new Observable(subscriber => {
                console.log('initial a newObservable');//不触发
                subscriber.next(['a','b','c'])
            }).pipe(
                map(res => {
                    console.log('第一个map')
                    return res;
                }),
                map(res =>{
                    console.log('第二个map')
                    return res;
                })
            );//不订阅,pipe中的所有函数都不会触发
        }
    }
    
    • Observable可以手动取消,Promise被解析时自动完成
    const sub = interval(1000).subscribe(res => {
        console.log('interval', res);
    });
    class App{
        calcelObservable(){
            sub.unsubscribe();
        }
    }
    
    rxjs与原生js的区别
    • concat

    类似于forEach,可以用在循环中

    const arr$ = from(['a', 'b', 'c']);
    const arr2$ = from(['1', '2', '3']);
    concat(arr$, arr2$).subscribe(res => {
      console.log('concat', res)
    })
    //concat a
    //concat b
    //concat c
    //concat 1
    //concat 2
    //concat 3
    
    • filter
    const arr$ = from(['a', 'b', 'c']);
    const arr2$ = from([1, 2, 3, 4]);
    concat(arr$, arr2$).pipe(filter(item => item > 2)).subscribe(res => {
      //整理过滤大于3的数字
      console.log('concat', res)
    })
    
    • reduce
    from([1, 2, 3, 4]).pipe(reduce((s, v) => s + v)).subscribe(res => {
      console.log('concat', res)
    })
    //10
    
    • scan

    与reduce不同,返回的是每一次的结果

    from([1, 2, 3, 4]).pipe(scan((s, v) => s + v)).subscribe(res => {
      console.log('concat', res)
    })
    
    //concat 1
    //concat 3
    //concat 6
    //concat 10
    

    相关文章

      网友评论

          本文标题:01RxJS-响应式编程类库

          本文链接:https://www.haomeiwen.com/subject/iojloktx.html