[译]RxJS文档01——介绍

BlackHole1 发布于2019-08-20 17:30 / 2360人阅读

摘要：原文是一个使用可观察量队列解决异步编程和基于事件编程的库。提供了几个管理异步事件的核心概念可观察量，代表了一个由未来获取到的值或事件组成的集合。相当于事件触发器，是向多个广播事件或推送值的唯一方法。

原文:http://reactivex.io/rxjs/manu...

RxJS 是一个使用可观察量(observable)队列解决异步编程和基于事件编程的js库。
他提供了一个核心的类型Observable，和若干附属类型(Observer、Schedulers、Subject)以及一组的操作符(map,filter,reduce,every等等)，可以像操作集合一样处理异步事件流。

Think of RxJS as Lodash for events.

为了较好的管理事件队列，响应式编程组合了观察者模式和迭代器模式，并且提供了操作集合的函数式编程方法。

RxJS提供了几个管理异步事件的核心概念:

Observable: 可观察量，代表了一个由未来获取到的值或事件组成的集合。

Observer:观察者，是一个集合，由监听Observable推送消息的一个或多个回调函数组成。

Subscription:订阅过程，代表了Observable的执行过程，通常用来取消或者中断Observable的执行过程。

Operators: 操作符是一些纯函数，用来采用函数式编程风格处理集合，比如：map,filter,concat,flatMap等等。

Subject: Subject相当于事件触发器(EventEmitter)，是向多个Observer广播事件或推送值的唯一方法。

Schedulers: 调度者集中了派发器(dispatcher)控制并发，允许我们在使用类似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!"));

纯函数

采用纯函数生产数据，使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()方法。他将一个值传递给回调函数，之后的返回值则会作为一个输入被传递给下一个时间点上的回调函数。

流

为了控制Observable实例中事件流，RxJS提供了各种各样的操作符。

以下的例子展示了使用纯js，实现至少间隔1秒发出一次点击事件的代码:

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等等。

值

你可以改变Observable流中的值。

以下的例子，使用纯js实现了获取每次click事件时鼠标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等等。

GPU云服务器云服务器 RxJS 引入rxjs Rxjs_Subject php01

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83630.html

[译]RxJS文档04——Observer 观察者

摘要：原文什么是观察者是流推送数据的用户。观察者们就是一组函数的集合，监听着每一个流推送出的不同类型的通知，包括和。如果没有为某个类型的通知提供，流的执行过程仍然会照常进行，但是响应的通知将会被忽略，因为观察者没有提供相应的来接收。原文: http://reactivex.io/rxjs/manu... 什么是Observer？观察者(Observer)是Observable流推送数据的...

xiaolinbang 2019-08-20 17:30 评论0 收藏0
[译] RxJS文档05——Subscription

摘要：原文什么是是一个对象，表示一种可被处置的资源，通常指代一个流的执行过程。在之前版本中的，被称为可被处置的。本质是一个含有方法，用来释放资源或者取消流执行的对象。原文: http://reactivex.io/rxjs/manu... 什么是Subscription? Subscription是一个对象，表示一种可被处置的资源，通常指代一个Observable流的执行过程。 Subsc...

walterrwu 2019-08-20 17:30 评论0 收藏0
[译]RxJS文档08——操作符分类

摘要：原文各种各样的操作符按照不同的目的，分类几个大类创建，变化，过滤，组合，广播，错误处理，使用工具等等。原文:http://reactivex.io/rxjs/manu... 各种各样的操作符按照不同的目的，分类几个大类:创建，变化，过滤，组合，广播（multicasting），错误处理，使用工具等等。以下的列表，按照分类罗列了全部的操作符：创建操作符 Creation Opera...

phoenixsky 2019-08-20 17:29 评论0 收藏0
[译]RxJS文档07——Operators 操作符

摘要：原文提供的操作符非常有用，尽管是基础对象。我们称这种现象为操作符订阅链。静态操作符是依赖于类的一组纯函数，通常被用来从头创建流。最常见的静态操作符类型是所谓的创建操作符。贯穿本站的文档，我们会广泛的使用珠宝图去解释操作符是如何生效的。原文:http://reactivex.io/rxjs/manu... Operators RxJS提供的操作符非常有用，尽管Observable是基础...

cooxer 2019-08-20 17:29 评论0 收藏0
[译] RxJS文档02—— Observable 可观察量

摘要：原文可观察量是一种能惰性推送的集合，他可以包含多个值。是一种惰性计算方式，会在迭代中同步的返回到无限个可能的话返回值。使用一种处理方法，最终可能会或可能不会返回一个值。无论是同步方式还是异步方式，都可以择其一来传递返回值。原文：http://reactivex.io/rxjs/manu... Observable 可观察量是一种能惰性推送的集合，他可以包含多个值。下面的表格对比了推送...

A Loity 2019-08-20 17:30 评论0 收藏0