rxjs-1介绍

Posted 2021-03-14 叶动风随

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

rxjs是一组异步和事件基础的库通过使用可观察的序列，它提供一个核心类型 Observable,

伴随类型（Observer观察者, Schedulers调度, Subjects主题）和操作符，其灵感来源于 Array#extras(map, filter, reduce, every, etc)。操作符准许操作异步事件的集合

 

Think of RxJS as Lodash for events.

rxjs操作事件类似于Lodash操作js

 

ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collectionsto fill the need for an ideal way of managing sequences of events.

ReactiveX 合并 观察者模式、迭代器模式和函数式编程集合，满足管理事件序列的理想方式

 

 

The essential concepts in RxJS which solve async event management are:

Rxjs解决异步事件管理的必要概念如下：

 

• Observable: represents the idea of an invokable collection of future values or events.
• 可观察的：代表概念是由未来的值或者事件组成的可调用集合
• Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
• 观察者：一个回调函数集合，它知道怎样监听被 可观察的对象 已交付  的值
• Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
• 订阅：代表一个可观察的 的执行，它的主要用处是取消一个执行
• Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
• 操作符：纯函数，它使实现函数式编程风格的集合行为变为可能，操作符如：map, filter, concat, reduce
• Subject: is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
• 主题：等价于事件触发，这个唯一的种方式于多播一个值或者一个事件到多个观察者
• Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.
• 调度;集中式调度程序用于控制并发，允许我们使配合当计算发生在 setTimeout 或者 requestAnimationFrame 或其他
  

First examples

Normally you register event listeners.

document.addEventListener(‘click‘, () => console.log(‘Clicked!‘));

Using RxJS you create an observable instead.

import { fromEvent } from ‘rxjs‘;

fromEvent(document, ‘click‘).subscribe(() => console.log(‘Clicked!‘));

 

Purity

纯净

What makes RxJS powerful is its ability to produce values using pure functions. That means your code is less prone to errors.

Rxjs强大的是它能力其生产的值使用纯函数，这意味着你的代码较少遇到错误

Normally you would create an impure function, where other pieces of your code can mess up your state.

正常时你会创建不纯的函数，其他地方你的代码可能会弄乱你的状态

 

let count = 0;
document.addEventListener(‘click‘, () => console.log(`Clicked ${++count} times`));

 

Using RxJS you isolate the state.

import { fromEvent } from ‘rxjs‘;
import { scan } from ‘rxjs/operators‘;

fromEvent(document, ‘click‘)
  .pipe(scan(count => count + 1, 0))
  .subscribe(count => console.log(`Clicked ${count} times`));

Flow

流

RxJS has a whole range of operators that helps you control how the events flow through your observables.

Rxjs有一系统操作符帮助你控制怎么让事件流穿过你的可能的对象

This is how you would allow at most one click per second, with plain javascript:

这个你怎么控制最多一次点击每秒，用普通JavaScript

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

With RxJS:

import { fromEvent } from ‘rxjs‘;
import { throttleTime, scan } from ‘rxjs/operators‘;

fromEvent(document, ‘click‘)
  .pipe(
    throttleTime(1000),
    scan(count => count + 1, 0)
  )
  .subscribe(count => console.log(`Clicked ${count} times`));

Other flow control operators are filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged etc.

其他流控制操作符

Values

值

You can transform the values passed through your observables.

你会转换值当穿过你的可观察的对象

Here‘s how you can add the current mouse x position for every click, in plain JavaScript:

这是你怎么增加当前鼠标x坐标为每次点击，javascript

let count = 0;
const rate = 1000;
let lastClick = Date.now() - rate;
document.addEventListener(‘click‘, event => {
  if (Date.now() - lastClick >= rate) {
    count += event.clientX;
    console.log(count);
    lastClick = Date.now();
  }
});

With RxJS:

import { fromEvent } from ‘rxjs‘;
import { throttleTime, map, scan } from ‘rxjs/operators‘;

fromEvent(document, ‘click‘)
  .pipe(
    throttleTime(1000),
    map(event => event.clientX),
    scan((count, clientX) => count + clientX, 0)
  )
  .subscribe(count => console.log(count));

Other value producing operators are pluck, pairwise, sample etc.

其他值生产操作符