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/

# 相关链接

: 支付宝打赏

: 微信打赏