• 通俗理解RxJS(一)


    自学 Rx 快有一个周了, 它非常适合处理复杂的异步场景。结合自己所学,决定写系列教程。

    我认为, Rx 中强大的地方在于两处

    • 管道思想,通过管道,我们订阅了数据的来源,并在数据源更新时响应 。
    • 强大的操作符,通过操作符对流和流中的数据转换,拼接,以形成我们想要的数据模型 。

    数据管道

    在 Rx 中,我们先预装好管道,通过管道流通数据 。这些管道的来源多种, create ,from, fromEvent, of .., 通过操作符将管道 拼接,合并,映射...形成最终的数据模型 。
    对于管道来说,有两点非常重要

    • . 管道是懒执行的,只有订阅器 observer subscribe了 数据管道,这个管道才会有数据流通 。
    • . 整个节点组成一个完整的管道,订阅了后面的管道节点,也会同时订阅之前的管道节点 ,每个节点接受之前的值,并发出新值。

    在很多教程中, Rx 往往以这个例子开始 :

      const example = Rx.Observable.create ((observer) => {
        const timer = setTimeout(() => {
          observer.next(8);
        })
        observer.next(10);
        return () => {
          clearTimeout(timer);
        }
      })
    
      const unsubscribe = example.subscribe((a) => {
        console.log(a);
      })
    
      //结果当然是 10, 8.
    

    这个例子发现了两种相似的设计模式

    • 迭代器模式
    • 观察者模式

    迭代器模式:类似于 JS 6 增加的迭代器 。

      const iterator = [1, 2, 3][Symbol.iterator]();
      while(true) {
        const result = iterator.next();
        if(result.done) return;
    
        cnosole.log(result.value);
      }
    

    观察者模式: 事件模型是最常见的观察者模式, 定义生产者与消费者,生产者发出值,消费者收到消息,并执行相应行文 。 Observable 与其不同的是, Observable 是拉模型,懒执行,只有指定订阅者,生产者才会派发。 Rx 中的推模型实现Subject 就是采用观察者模式,不管有没有订阅者,都会推送数据 。

    操作符

    Rx 如此高效和强大,得益于其强大的操作符 。
    主要包含下面几类

    • 创建操作符: create, range, of, from, fromEvent, fromPromise, empty ..
    • 组合 contact ,merge, startWith, zip ..
    • 时间 delay , throttle, dobounceTime, interval ..
    • 过滤: filter, first, last, skip, distinct, take ..
    • 转换: buffer,map, mapTo, mergeMap, switch, switchMap, reduce, scan ..
    • 工具: do, toPromise ..

    vs Promise

    很多大牛介绍,在相对简单的情况下,大可不必使用 Observable ,Promise 足以应对。
    类似于下面的模型

      new Promise ((resolve, reject) = {})
      .then()
      .then()
      .then() ...
    

    这种模型非常大程度改善了 回调地狱, 也能处理大部分的异步场景,name 对于 Rx , 它有哪些地方不足呢 ?

    • Rx 抽象了数据的来源,主要是对事件和网络请求的抽象 。
    • Rx 可以多次发出数据, 而Promise 只能发出一次数据, 复用之前的管道。
    • Rx 可以是懒执行的,只有在订阅之后,才会发出值,也就是订阅 。 而Promise 在定义后理解执行 。
    • 注意到我们上面的例子,是可以cancle 取消订阅的。
      return () => {
            clearTimeout(timer);
          }
        })
    
        const unsubscribe = example.subscribe((a) => {
          console.log(a);
        })
    

    create 会返回一直函数,这个函数用于清理管道执行产生的垃圾,比如这里的定时器 。调用 unsubscribe 会取消订阅,并执行清理函数。

    • Promise 中数据变换只有通过then 链来进行,这点在fetch API 中体现最明显。但是Rx包含大量的操作符,简化了很多运算 。

    尾声

    在这一篇, 我介绍了Rx 的概念,以及与Promise 的对比,理解Rx ,主要是理解管道思想和响应式编程 。说Rx 门槛高,也就是新手们管道思想和响应式编程在前端的实践不多。
    在下一篇,会分类使用所有的操作符,如果算是API 文档,那就死文档吧 。

  • 相关阅读:
    JavaScript引用类型
    Java08_方法
    网络爬虫(一)
    openCV(四)——鼠标绘制
    openCV(三)——视频
    openCV(二)——基础绘制函数
    openCV(一) 读取保存图像
    JAVA07-数组
    JAVA06-while循环,do while循环
    JAVA05-switch多重选择
  • 原文地址:https://www.cnblogs.com/likeFlyingFish/p/7661395.html
Copyright © 2020-2023  润新知