RxJS的demo

2020-08-12 loading

# RxJS 简介

在 RxJS 中用来解决异步事件管理的的基本概念是:

  • Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。
    • Observables 是使用 Rx.Observable.create 或创建操作符创建的,并使用观察者来订阅它,然后执行它并发送 next / error / complete 通知给观察者,而且执行可能会被清理。这四个方面全部编码在 Observables 实例中,但某些方面是与其他类型相关的,像 Observer (观察者) 和 Subscription (订阅)。
  • Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
    • 观察者是由 Observable 发送的值的消费者。观察者只是一组回调函数的集合,每个回调函数对应一种 Observable 发送的通知类型:next、error 和 complete 。
  • Subscription (订阅): 表示 Observable 的执行,主要用于取消 Observable 的执行。
    • Subscription 是表示可清理资源的对象,通常是 Observable 的执行。Subscription 有一个重要的方法,即 unsubscribe,它不需要任何参数,只是用来清理由 Subscription 占用的资源。
  • Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
  • Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
    • RxJS Subject 是一种特殊类型的 Observable,它允许将值多播给多个观察者,所以 Subject 是多播的,而普通的 Observables 是单播的(每个已订阅的观察者都拥有 Observable 的独立执行)。
var subject = new Rx.Subject();
subject.subscribe({
  next: (v) => console.log("observerA: " + v),
});
subject.subscribe({
  next: (v) => console.log("observerB: " + v),
});

subject.next(1);
subject.next(2);
// 输出
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2
  • Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

# RxJS demo 项目

# 目录

<nav>
  <ul>
    <li>
      <a routerLink="/subject">subject</a>
      <ul>
        <li>BehaviorSubject</li>
        <li>ReplaySubject</li>
        <li>AsyncSubject</li>
      </ul>
    </li>
    <li>
      <a routerLink="/operator">operator</a>
      <ul>
        <li><a routerLink="/operator/create">创建操作符</a></li>
        <li><a routerLink="/operator/switch">转换操作符</a></li>
        <li><a routerLink="/operator/filter">过滤操作符</a></li>
        <li><a routerLink="/operator/combine">组合操作符</a></li>
        <li><a routerLink="/operator/multicst">多播操作符</a></li>
        <li><a routerLink="/operator/error">错误处理操作符</a></li>
        <li><a routerLink="/operator/tools">工具操作符</a></li>
        <li><a routerLink="/operator/boolean">条件和布尔操作符</a></li>
        <li><a routerLink="/operator/math">数学和聚合操作符</a></li>
      </ul>
    </li>
  </ul>
</nav>

每个目录下面有响应的示例

# 启动

clone 项目到本地,启动

npm run start

访问http://localhost:4200/

# 相关链接