RxJS介绍

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。 可以把 RxJS 当做是用来处理事件的 Lodash 。

核心概念

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

• Observable (可观察对象)：表示一个概念，这个概念是一个可调用的未来值或事件的集合。
• Observer (观察者)：一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
• Subscription (订阅)：表示 Observable 的执行，主要用于取消 Observable 的执行。
• Operators (操作符)： 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
• Subject (主体)： 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。
• Schedulers(调度器)：用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

Observable – 可观察对象

Observable被称为可观察序列，简单来说数据就在Observable中流动，你可以使用各种operator对流进行处理。

// 当订阅下面代码中的 Observable 的时候会立即(同步地)推送值1、2、3，然后1秒后会推送值4，再然后是完成流
  const observable = rxjs.Observable
      // 通过create方法创建一个Observable
      // 回调函数会接受observer参数，也就是观察者角色
      .create(observer => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      setTimeout(() => {
          observer.next(4);
          observer.complete();
      }, 1000);
  });

Observer – 观察者

观察者只是一组回调函数的集合，每个回调函数对应一种Observable发送的通知类型：next、error和complete。
要使用观察者，需要把它提供给Observable的subscribe方法。
Next – 表示数据正常流动，没有出现异常
Error – 表示流中出错，可能是运行出错，http报错等
Complete – 表示流结束，不再发射新的数据
在一个流的生命周期中，error和complete只会触发其中一个，可以有多个next（表示多次发射数据），直到complete或者error。

console.log('just before subscribe');
// Observe观察者
  // Observer 是一个对象，这个对象具有三个方法，分别是 next, error, complete
  // 要使用观察者，需要把它提供给 Observable 的 subscribe 方法
  const observe = {
      next: x => console.log('got value ' + x),
      error: err => console.error('something wrong occurred: ' + err),
      complete: () => console.log('done'),
  };

  // 订阅这个 observable
  // 只有在订阅之后，才会在流Observable变化的时候，调用observer提供的方法，并通知他
 observable.subscribe(observe);
console.log('just after subscribe');
// 输出
  /*just before subscribe
  got value 1
  got value 2
  got value 3
  just after subscribe
  got value 4
  done*/

Subscription - 订阅

Subscription是表示可清理资源的对象，通常是Observable的执行。Subscription有一个重要的方法，即unsubscribe，它不需要任何参数，只是用来清理由Subscription占用的资源。
Subscription基本上只有一个unsubscribe()函数，这个函数用来释放资源或取消Observable执行。

let subscription = observable.subscribe(observe);
  setTimeout(() => {
      subscription.unsubscribe();
  }, 1000);

Operators - 操作符

操作符是Observable类型上的方法，比如map()、filter()、merge()等等。当操作符被调用时，它们不会改变已经存在的Observable实例。相反，它们会返回一个新的Observable，它的subscription逻辑基于第一个Observable。
RxJS的操作符有点多，我们可以按照种类分为：组合、条件、创建、错误处理、过滤、多播、转换以及一些工具。可参考https://rxjs-cn.github.io/learn-rxjs-operators/operators/，使用时按需要寻找，其实部分操作符从功能来讲可能会觉得区别不太大，区分起来也比较困难，我们可以查阅它们的弹珠图来方便我们区分。我们之举一个简单的例子来展示一下。

const { from } = rxjs;
    const { filter, take, last, startWith, skip } = rxjs.operators;

    // 发出(1, 2, 3, 4, 5)
    const source = from([1, 2, 3, 4, 5]);
    const example = source.pipe(
      // 开头追加 6, 8 得 6, 8, 1, 2, 3, 4, 5
      startWith(6, 8),
      // 舍弃第一个 得 8, 1, 2, 3, 4, 5
      skip(1),
      // 只取偶数得 8, 2, 4
      filter(num => num % 2 === 0),
      // 再取前俩得 8, 2
      take(2),
      // 只取最后一个得 2
      last()
    );
    example.subscribe(val => {
      console.log(`The number: ${val}`)
    });

Subject – 主体

Subject是一个特殊类型的Observable，它允许将值多播给多个观察者，所以Subject是多播的，而普通的Observables是单播的（每个已订阅的观察者都拥有Observable的独立执行）。
每个Subject都是Observable。对于Subject，你可以提供一个观察者并使用 subscribe 方法，就可以开始正常接收值。从观察者的角度而言，它无法判断 Observable 执行是来自普通的 Observable 还是 Subject。
每个 Subject 都是观察者。Subject 是一个有如下方法的对象： next(v)、error(e) 和 complete() 。要给 Subject 提供新值，只要调用 next(theValue)，它会将值多播给已注册监听该 Subject 的观察者们。

  const {take} = rxjs.operators;

  const source = rxjs.interval(1000).pipe(take(3));
  const subject = new rxjs.Subject();

  // observer 其实就是实现了next方法，error方法和complete方法的对象
  const observerA = {
    next: value => {
      console.log(`A:` + value )
    },
    error: error => {
      console.log('Error:', error);
    },
    complete: () => {
      console.log('complete');
    }
  };

  const observerB = {
    next: value => {
      console.log(`B:` + value)
    },
    error: error => {
      console.log('Error:', error);
    },
    complete: () => {
      console.log('complete');
    }
  };

  // 不会执行，相当于注册 observer，只是将给定的观察者注册到观察者列表中
  subject.subscribe(observerA);
  subject.subscribe(observerB);
//  setTimeout(() => {
//      subject.subscribe(observerB);
//  }, 2000)


  // 注释去掉才会执行
  // source.subscribe(subject);

Schedulers – 调度器

调度器控制着何时启动subscription和何时发送通知。由三部分组成：
调度器是一种数据结构。它知道如何根据优先级或其他标准来存储任务和将任务进行排序。
调度器是执行上下文。它表示在何时何地执行任务（举例来说，立即的，或另一种回调函数机制（比如setTimeout）, 或动画帧)。
调度器有一个（虚拟的）时钟。调度器功能通过它的getter方法now()提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。

// 调度器可以让你规定 Observable 在什么样的执行上下文中发送通知给它的观察者。
    // https://www.jianshu.com/p/5624c8a6bd2b
    const observable = rxjs.Observable.create(observer => {
        observer.next(1);
        observer.next(2);
        observer.next(3);
        observer.complete();
    })
        // observeOn 作用
        // 改变通知的Notifications执行时机，即Observables中的Next,Error,Complete函数
        // 能够用于每个操作符的前面，即可以多次使用
        .observeOn(rxjs.Scheduler.async); // 设置为async
    console.log('just before subscribe');
    observable.subscribe({
        next: x=> console.log(`got value ${v}`),
        error: err => console.error(`something wrong occurred: ${err}`),
        complete: () => console.log('done')
    });
    console.log('just after subscribe');
    // 输出结果：
    /*just before subscribe
    just after subscribe
    got value 1
    got value 2
    got value 3
    done*/

范例

知乎上看到的大佬神留言：这个大佬：
比如你写一个基于 websocket 的在线聊天室，不可能每次 ws 收到新消息，都立刻渲染出来，这样在很多人同时说话的时候，一般会有渲染性能问题。

所以你需要收集一段时间的消息，然后把它们一起渲染出来，例如每一秒批量渲染一次。

用原生 JS 写的话，你需要维护一个队列池，和一个定时器，收到消息，先放进队列池，然后定时器负责把消息渲染出来，类似：

let messagePool = []
ws.on('message', (message) => {
    messagePool.push(message)
})

setInterval(() => {
    render(messagePool)
    messagePool = []
}, 1000)

这里已经是最简化的代码了，但逻辑依然很破碎，并且还要考虑清理定时器的问题。

如果用 RxJS，代码就好看了很多：

Rx.Observable
    .fromEvent(ws, 'message')
    .bufferTime(1000)
    .subscribe(messages => render(messages))

另外一个例子，比如我们在写一个游戏，当用户连续输入"上上下下左右左右BABA"的时候，就弹出隐藏的彩蛋，用原生 JS 的话也是需要维护一个队列，队列中放入最近12次用户的输入。然后每次按键的时候，都识别是否触发了彩蛋。

RxJS 的话就简化了很多，主要是少了维护队列的逻辑：

const code = [
   "ArrowUp",
   "ArrowUp",
   "ArrowDown",
   "ArrowDown",
   "ArrowLeft",
   "ArrowRight",
   "ArrowLeft",
   "ArrowRight",
   "KeyB",
   "KeyA",
   "KeyB",
   "KeyA"
]

Rx.Observable.fromEvent(document, 'keyup')
    .map(e => e.code)
    .bufferCount(12, 1)
    .subscribe(last12key => {
        if (_.isEqual(last12key, code)) {
            console.log('隐藏的彩蛋 \(^o^)/~')
        }
    })