rxjs 是一个响应式编程的库。用于编写异步操作或基于回调的代码更容易。
核心有三点:
1.observer. 观察者,观察obervable中丢出来的数据
2.subject 主题,把可观察对象整合到一起,把观察的数据共享
3.schedulers 调度器

流程:create 一个observable。通过subscribe订阅监听异步操作的变化。

关键字:
subscribe 监听异步操作。
finalize 当异步操作stop 的时候被调用的。
unsubscrible 取消监听 (取消后要清理定时器)

可观察对象observable

首先我们需要创建一些可观察对象observables

// 来自一个或多个值
 Rx.Observable.of(‘foo’, ‘bar’);
 // 来自数组
 Rx.Observable.from([1,2,3]);
 // 来自事件
 Rx.Observable.fromEvent(document.querySelector(‘button’), ‘click’);
 // 来自 Promise
 Rx.Observable.fromPromise(fetch(’/users’));
 // 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
 // fs.exists = (path, cb(exists))
 var exists = Rx.Observable.bindCallback(fs.exists);
 exists(‘file.txt’).subscribe(exists => console.log(‘Does file exist?’, exists));
 // 来自回调函数(最后一个参数得是回调函数,比如下面的 cb)
 // fs.rename = (pathA, pathB, cb(err, result))
 var rename = Rx.Observable.bindNodeCallback(fs.rename);
 rename(‘file.txt’, ‘else.txt’).subscribe(() => console.log(‘Renamed!’));

在这里我们就可以看到当我们想观察的时候,根据我们观察的对象不同也有不同的观察方法。

当我们创建一个可观察的对象的时候,分两种形式:
如果是外部产生的事件 var myObservable = new Rx.Subject(); 如果是内部的事件var myObservable = Rx.Observable.create

拿例子介绍一下需要的部分关键字

// 输入 "hello world"
var input = Rx.Observable.fromEvent(document.querySelector('input'), 'input');

// 过滤掉小于3个字符长度的目标值
input.filter(event => event.target.value.length > 2)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "hel"

// 延迟事件
input.delay(200)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "h" -200ms-> "e" -200ms-> "l" ...

// 每200ms只能通过一个事件
input.throttleTime(200)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "h" -200ms-> "w"

// 停止输入后200ms方能通过最新的那个事件
input.debounceTime(200)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "o" -200ms-> "d"

// 在3次事件后停止事件流
input.take(3)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "hel"

// 直到其他 observable 触发事件才停止事件流
var stopStream = Rx.Observable.fromEvent(document.querySelector('button'), 'click');
input.takeUntil(stopStream)
  .map(event => event.target.value)
  .subscribe(value => console.log(value)); // "hello" (点击才能看到)

这是因为函数和 Observables 都是惰性运算。如果你不调用函数,console.log(‘Hello’) 就不会执行。Observables 也是如此,如果你不“调用”它(使用 subscribe),console.log(‘Hello’) 也不会执行。

订阅 Observables
它是惰性运算,只有在每个观察者订阅后才会执行。随着时间的推移,执行会以同步或异步的方式产生多个值。

Observable 执行可以传递三种类型的值:

“Next” 通知: 发送一个值,比如数字、字符串、对象,等等。 “Error” 通知: 发送一个 JavaScript 错误 或 异常。
“Complete” 通知: 不再发送任何值。

//Observable 严格遵守自身的规约,所以下面的代码不会发送 "Next" 通知 4:
var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
  observer.next(4); // 因为违反规约,所以不会发送
});
//在 subscribe 中用 try/catch 代码块来包裹任意代码是个不错的主意,如果捕获到异常的话,会发送 "Error" 通知:
var observable = Rx.Observable.create(function subscribe(observer) {
  try {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
  } catch (err) {
    observer.error(err); // 如果捕获到异常会发送一个错误
  }
});

当你订阅了 Observable,你会得到一个 Subscription ,它表示进行中的执行。只要调用 unsubscribe() 方法就可以取消执行。

操作符Operator

就是把我观察的数据进行一些处理

主体subject

把很多个可观察对象进行整合,类似于数据共享。

调度器 schedulers