zoukankan      html  css  js  c++  java
  • rxjs——subject和Observable的区别

    原创文章,转载请注明出处

    理解

    observable的每个订阅者之间,是独立的,完整的享受observable流动下来的数据的。
    subject的订阅者之间,是共享一个留下来的数据的

    举例

    这里的clock$ 被订阅者被 observerA,observerB ,observerC 三个订阅者在不同的时间独自订阅。
    对于三个订阅者,clock$ 都是从头重新完成的跑一遍。

        let a=''
            const clock$ = Rx.Observable.interval(1000).take(3);
    
            const observerA = {
                next(v) {
                    a+='--A执行了,'
                    console.log('A next: ' + v)
                    console.log(a)
                }
            }
            const observerB = {
                next(v) {
                    a+='--B执行了,'
                    console.log('B next: ' + v)
                    console.log(a)
                }
            }
    
            const observerC = {
                next(v) {
                    a+='--C执行了,'
                    console.log('C next: ' + v)
                    console.log(a)
                }
            }
    
    
            clock$.subscribe(observerA) // a Observable execution
    
            setTimeout(() => {
                clock$.subscribe(observerB) // another new Observable execution
            }, 7000)
    
            setTimeout(() => {
                clock$.subscribe(observerC) // another new Observable execution
            }, 14000)
    
    /*
    A next: 0
    --A执行了,
    A next: 1
    --A执行了,--A执行了,
    A next: 2
    --A执行了,--A执行了,--A执行了,
    B next: 0
    --A执行了,--A执行了,--A执行了,--B执行了,
    B next: 1
    --A执行了,--A执行了,--A执行了,--B执行了,--B执行了,
    B next: 2
    --A执行了,--A执行了,--A执行了,--B执行了,--B执行了,--B执行了,
    C next: 0
    --A执行了,--A执行了,--A执行了,--B执行了,--B执行了,--B执行了,--C执行了,
    C next: 1
    --A执行了,--A执行了,--A执行了,--B执行了,--B执行了,--B执行了,--C执行了,--C执行了,
    C next: 2
    --A执行了,--A执行了,--A执行了,--B执行了,--B执行了,--B执行了,--C执行了,--C执行了,--C执行了,
     */
    
    

    对于subject则不同
    observerA,observerB ,observerC 三个订阅者在不同的时间订阅同一个subject。
    他们三个在时间上是共享一个subject。
    subject产生数据时,你这个订阅者如果没来得及订阅,那对不起,过了这个村就没这个店,你错过了。

    const { Observable, Subject } = Rx
    
    
    const clock$ = Observable.interval(1000).take(3);
    
    const observerA = {
      next(v) {
        console.log('A next: ' + v)
      }
    }
    const observerB = {
      next(v) {
        console.log('B next: ' + v)
      }
    }
    const subject = new Subject()
    subject.subscribe(observerA)
    
    clock$.subscribe(subject)
    
    setTimeout(() => {
      subject.subscribe(observerB)
    }, 2000)
    
    /*
     * A next: 0
     * A next: 1
     * A next: 2
     * B next: 2
     */
    
  • 相关阅读:
    设计模式——单例模式
    设计模式——工厂模式在开发中的应用(简单计算器)
    设计模式——简单工厂模式—工厂方法模式—抽象工厂模式(比较)
    设计模式——抽象工厂模式
    设计模式——工厂方法模式
    设计模式——简单工厂
    Win7使用初体验
    上传文件夹
    java上传文件夹到oss
    java+上传一个文件夹
  • 原文地址:https://www.cnblogs.com/panfengde/p/10138899.html
Copyright © 2011-2022 走看看