RxJS官方教程（一）概览

介绍

RxJS是一个使用可观察序列组成异步和基于事件的程序的库。它提供了一种核心类型，Observable，广播类型（Observer，Schedulers，Subjects）和受Array＃extras（map，filter，reduce，every等）启发的运算符，允许将异步事件作为集合处理。

ReactiveX将Observer模式与Iterator模式和函数编程与集合相结合，以满足管理事件序列的理想方式的需求。

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

Observable：可观察对象，表示可以调用的未来值或事件集合的想法。
Observer：观察者，是一组回调函数，处理Observable提供的值。
Subscription：订阅关系，表示Observable的执行，主要用于取消执行。
Operators：算子，是纯粹的函数，用函数式编程风格处理值或事件集合，map，filter，concat，flatMap等。
Subject：主题，相当于EventEmitter，是将值或事件广播到多个Observer的唯一方法。
Scheduler：控制并发的集中调度器，使我们能够协调发生在setTimeout或requestAnimationFrame或其他的事件。

第一个例子

通常，您注册事件侦听器。

var button = document.querySelector('button');
button.addEventListener('click',() => console.log('Clicked!'));

使用RxJS可以创建一个observable。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
    .subscribe(() => console.log('Clicked!'));

Purity 纯粹性

RxJS的强大之处在于它能够使用纯函数生成值。这意味着您的代码不容易出错。

通常你会创建一个不纯的函数，其中你的代码的其他部分可能会搞乱你的状态。

var count = 0;
var button = document.querySelector('button');
button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

使用RxJS可以隔离状态。

var button = document.querySelector('button');
Rx.Observable.fromEvent(button,'click')
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Clicked ${count} times`))

scan操作符就像数组的reduce函数，回调函数接受一个参数，初始值为0，返回的值作为下一个回调函数的入参。

Flow 流

RxJS拥有一系列操作符，可帮助您控制事件如何流经您的可观察对象。

这是使用纯JavaScript的每秒最多允许一次点击的方式：

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', () => {
    if (Date.now() - lastClick >= rate){
        console.log(`Clicked ${++count} times`);
        lastClick = Date.now();
    }
});

使用RxJS：

var button = document.querySelector('button');
Rx.Observable.fromEvent(button,'click')
    .throttleTime(1000)
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Clicked ${count} times`));

其他的流控制符： filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged。

Value 值

您可以转换通过您的observable传递的值。

以下是在纯JavaScript中为每次点击添加当前鼠标x位置的方法：

var count = 0;
var rate = 1000;
var lastClick = Date.now() - rate;
var button = document.querySelector('button');
button.addEventListener('click', (event) => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count)
    lastClick = Date.now();
  }
});

使用RxJS：

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
    .throttleTime(1000)
    .map(event => event.clientX)
    .scan((count, clientX) => count + clientX, 0)
    .subscribe(count => console.log(count));

其他产生值得操作符：pluck, pairwise, sample。

官网 http://reactivex.io/rxjs/manual/overview.html#introduction

最后编辑于：2018.10.03 19:17:21

RxJS官方教程（一） 概览

介绍

第一个例子

Purity 纯粹性

Flow 流

Value 值

RxJS官方教程（一）概览