RxJS 教程

时间 2019-11-05

标签 rxjs 教程繁體版

原文原文链接

"Reactive Programming是神马？"

互联网上有不少不是很友好的解释。维基百科宽泛而玄乎。 Stackoverflow教科书式的解释很是不适合信任Reactive Manifesto 听起来像是给给项目经理或者是销售的汇报。微软的 Rx 定义 "Rx = Observables + LINQ + Schedulers" 过重而且太微软化了，让人看起来不知所云。“响应”、“变化发生”这些术语没法很好地阐释Reactive Programming的显著特色，听起来和你熟悉的MV*、编程语言差异不大。固然，个人视角也是基于模型和变换的，要是脱离了这些概念，一切都是无稽之谈了。javascript

那么我要开始吧啦吧啦了，(后文中，将使用RP代替Reactive Programming，私底下译者将Reactive Programming，翻译为响应式编程)。java

RP 是针对异步数据流的编程。react

必定程度而言，RP并不算新的概念。Event Bus、点击事件都是异步流。开发者能够观测这些异步流，并调用特定的逻辑对它们进行处理。使用Reactive如同开挂：你能够建立点击、悬停之类的任意流。一般流廉价(点击一下就出来一个)而无处不在，种类丰富多样：变量，用户输入，属性，缓存，数据结构等等均可以产生流。举例来讲：微博回文(译者注：好比你关注的微博更新了)和点击事件都是流：你能够监听流并调用特定的逻辑对它们进行处理。jquery

基于流的概念，RP赋予了你一系列神奇的函数工具集，使用他们能够合并、建立、过滤这些流。 一个流或者一系列流能够做为另外一个流的输入。你能够合并两个流，从一堆流中过滤你真正感兴趣的那一些，将值从一个流映射到另外一个流。git

若是流是RP的核心，咱们不妨从“点击页面中的按钮”这个熟悉的场景详细地了解它。github

流是包含了有时序，正在进行事件的序列，能够发射(emmit)值(某种类型)、错误、完成信号。流在包含按钮的浏览器窗口被关闭时发出完成信号。web

咱们异步地捕获发射的事件，定义一系列函数在值被发射后，在错误被发射后，在完成信号被发射后执行。有时，咱们忽略对错误，完成信号地处理，仅仅关注对值的处理。对流进行监听，一般称为订阅，处理流的函数是观测者，流是被观测的主体。这就是观测者设计模式。ajax

教程中，咱们有时会使用ASCII字符来绘制图表：编程

--a---b-c---d---X---|->

a, b, c, d 是数据流发射的值
X 是数据流发射的错误
| 是完成信号
---> 是时序轴

哔哔完了，咱们来点新的，否则很快你就感受到寂寞了。咱们将把原来的点击事件流转换为新的点击事件流。json

首先咱们建立一个计数流来代表按钮被点击的次数。在RP中，每个流都拥有一系列方法，例如map，filter，scan 等等。当你在流上调用这些方法，例如clickStream.map(f)，会返回基于点击事件流的新的流，同时原来的点击事件流并不会被改变，这个特性被称为不可变性(immutability)。不可变性与RP配合相得益彰，如同美酒加咖啡。咱们能够链式地调用他们：clickStream.map(f).scan(g)

clickStream: ---c----c--c----c------c--->
               vvvvv map(c becomes 1) vvvvv
               ---1----1--1----1------1--->
               vvvvvvvvv  scan(+) vvvvvvvvv
counterStream: ---1----2--3----4------5--->

map(f) 函数对原来的流使用咱们出入的f函数进行转换，并生成新的流。在上面的例子中，咱们将每一次点击映射为数字1。scan(g)函数将全部流产生的值进行汇总，经过传入x = g(accumulated, current)函数产生新的值，g 是简单的求和函数。最后 counterStream在点击发生后发射点击事件发生的总数。

为了展现Reactive的真正力量，咱们举个例子：你想要“两次点击”事件的流，或者是“三次点击”，或者是n次点击的流。深呼吸一下，试着想一想怎么用传统的命令、状态式方法来解决。我打赌这个这会至关操蛋，你会搞些变量来记录状态，还要搞些处理时延的机制。

若是用RP来解决，太他妈简单了。实际上4行代码就能够搞定。先不要看代码，无论你是菜鸟仍是牛逼，使用图表来思考可使你更好地理解构建这些流的方法。

灰色框里面的函数会把一个流转换成另一个流。首先咱们把点击打包到list中，若是点击后消停了250毫秒，咱们就从新打包一个新的list(显然buffer(stream.throttle(250ms))就是用来干这个的，不明白细节没有关系，反正是demo嘛)。咱们在列表上调用map()，将列表的长度映射为一个整数的流。最后，咱们经过filter(x >= 2)过滤掉整数1。哈哈：3个操做就生成了咱们须要的流，如今咱们能够订阅(监听)这个流，而后来完成咱们须要的逻辑了。

经过这个例子，我但愿你能感觉到使用RP的牛逼之处了。这仅仅是冰山一角。你能够在不一样地流上(好比API响应的流)进行一样的操做。同时，Reactive还提供了许多其余实用的函数。

"我要在从此采用RP范式进行编程吗？"

RP 提升了编码的抽象程度，你能够更好地关注在商业逻辑中各类事件的联系避免大量细节而琐碎的实现，使得编码更加简洁。

使用RP，将使得数据、交互错综复杂的web、移动app开发收益更多。10年之前，与网页的交互仅仅是提交表单、而后根据服务器简单地渲染返回结果这些事情。App进化得愈来愈有实时性：修改表单中一个域能够同步地更新到后端服务器。“点赞”信息实时地在不一样用户设备上同步。

现代App中大量的实时事件创造了更好的交互和用户体验，披荆斩棘须要利剑在手，RP就是你手中的利剑。

经过实例RP编程思想

咱们将从实例能够深刻RP的编程思想，文章末尾，一个完整地实例应用会被构建，你也会理解整个过程。

我选择 JavaScript 和 RxJS 做为实例的构建工具。由于大多开发者都熟悉JavaScript语言。Rx* library family 在各类语言和平台都是实现 (.NET, Java, Scala, Clojure, JavaScript, Ruby, Python, C++, Objective-C/Cocoa, Groovy, 等等)。不管你选择在哪一个平台或者那种语言实践RP，你都将从本教程中受益。(译者注：Rx，即ReactiveX，其中X表明不一样的语言和技术栈，好比.NET，Java，Scala，Ruby，Javascript。RxJS表示RP基于Javascript语言的实现。后文中Rx表明全部实现了RP的特定技术栈)

微博(Twitter)简易版“你可能感兴趣的人”

微博主页，有一个组件会推荐给你那些你可能感兴趣的人。

咱们的Demo将使用这个场景，关注下面这些主要特性：

页面打开后，经过API加载数据展现3个你可能感兴趣的用户帐号
点击“刷新”按钮，从新加载三个新的用户帐号
在一个用户帐号上点击'x' 按钮，清除当前这个帐户，从新加载一个新的帐户
每行展现帐户的信息和这个帐户主页的连接

其余特性和按钮咱们暂且忽略，因为Twitter在最近关闭了公共API受权接口，咱们选择Github做为代替，展现GitHub用户的帐户。实例中咱们使用该接口获取GitHub用户.

若是你但愿先睹为快，完成后的代码已经发布在了Jsfiddle。

"你可能感兴趣的用户"请求&响应

这个问题使用Rx怎么解?，呵呵，咱们从Rx的箴言开始： 神马都是流 。首先咱们作最简单的部分——页面打开后经过API加载3个帐户的信息。分三步走：(1)发一个请求(2)得到响应(3)依据响应渲染页面。那么，咱们先使用流来表示请求。我靠，表示个请求用得着吗？不过千里之行始于足下。

页面加载时，仅须要一个请求。因此这个数据流只包含一个简单的反射值。稍后，咱们再研究如何多个请求出现的状况，如今先从一个请求开始。

--a------|->

a是字符串 'https://api.github.com/users'

这个流中包含了咱们但愿请求的URL地址。一旦这个请求事件发生，咱们能够获知两件事情：请求流发射值(字符串URL)的时间就是请求须要被执行的时间，请求须要请求的地址就是请求流发射的值。

在Rx*中构建一个单值的流很容易。官方术语中把流称为“观察的对象”("Observable")，由于流能够被观察、订阅，这么称呼显得很蠢，我本身把他们称为 stream 。

var requestStream = Rx.Observable.just('https://api.github.com/users');

目前这个携带字符串的流没有其余操做,咱们须要在这个流发射值以后，作点什么：经过订阅这个流来实现。

requestStream.subscribe(function(requestUrl) {
  // 执行异步请求
  jQuery.getJSON(requestUrl, function(responseData) {
    // ...
  });
}

咱们采用了jQuery的Ajax回调 (假设读着已经了解jQuery ajax回调) 来处理异步请求操做。且慢，Rx天生就是处理异步数据流的，
为什么不把请求的响应做为一个携带数据的流呢？么么哒，概念上没有问题，咱们就来操做一下。

requestStream.subscribe(function(requestUrl) {
  // 执行异步请求
  var responseStream = Rx.Observable.create(function (observer) {
    jQuery.getJSON(requestUrl)
    .done(function(response) { observer.onNext(response); })
    .fail(function(jqXHR, status, error) { observer.onError(error); })
    .always(function() { observer.onCompleted(); });
  });
  
  responseStream.subscribe(function(response) {
    // 业务逻辑
  });
}

使用Rx.Observable.create()方法能够自定义你须要的流。你须要明确通知观察者(或者订阅者)数据流的到达(onNext()) 或者错误的发生(onError())。这个实现中，咱们封装了jQuery 的异步 Promise。那么Promise也是可观察对象吗？

冰狗，你猜对啦！

可观察对象(Observable)是超级Promise(原文Promise++，能够对比C，C++，C++在兼容C的同时引入了面向对象等特性)。在Rx环境中，你能够简单的经过var stream = Rx.Observable.fromPromise(promise)将Promise转换为可观察对象，咱们后面将这样使用，惟一的区别是，可观察对象与Promises/A+ 并不兼容, 可是理论上不会产生冲突。 Promise 能够看作只能发射单值的可观察对象，Rx流则容许返回多个值。

不过，可观察对象至少和Promise同样强大。若是你相信针对Promise的那些吹捧，不妨也留意一下Rx环境中的可观察对象。

回到咱们的例子，细心的你确定看到了subscribe()的嵌套使用，这和回调函数嵌套同样使人恼火。responseStream 的确和 requestStream 存在依赖关系。前面咱们不是提到过Rx有一些牛逼的工具集吗？在Rx中咱们拥有简单的机制把一个流转化为一个新的流，咱们不妨试试。

咱们先介绍 map(f)函数。该函数在流A的每一个之上调用函数f() ，而后在流B上生成对应的新值。若是在请求、响应流上调用map(f)，咱们能够将请求的URL隐射为响应流中的Promise(此时响应流中包含了Promise的序列)。

var responseMetastream = requestStream
  .map(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

咱们把上面代码执行后的返回结果称为 metastream (译者注：按字面能够翻译为“元流”，即包含流的流。相似概念例如：元编程——用于生成程序的编程方法；元知识——获取知识的知识)：包含其余流的流。没什么吓人的，一个metastream会在执行后发射一个流。你能够把它看作一个指针指针)：每个发射的值是指向另一个流的指针。在咱们的例子中，每个URL被映射为一个指向Promise流的指针，每个Promise流中包含了相应的响应信息。

(译者注：如下给出 metastream 的方法的解析方法，方便与下面的方法进行对比)：

responseMetastream.subscribe(function(streamedPromise) {
    // 首先展开metastream，获取内部的流
    streamedPromise.subscribe(function(responseJsonObject) {
        // 返回内部流发射的值
        return responseJsonObject;
    });
});

当前版本响应产生的metastream看起来有些让人疑惑，彷佛用处不大。当前场景中，咱们仅仅须要得到简单的响应流，流中发射的值为简单的JSON对象。使用flatMap:这个函数能够将枝干的流的值发射到主干流之上。固然metastream的产生并非bug，只是这个场景不适合而已，map()，flatMap()都是Rx处理异步请求工具中的一部分。(译者注：若是流A中包含了若干其余流，在流A上调用flatMap()函数，将会发射其余流的值，并将发射的全部值组合生成新的流。)

var responseStream = requestStream
  .flatMap(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

赞！响应流是依照请求流定义的，若是场景中生成了更多的请求流，咱们也会生成一样多的响应流：

请求流:  --a-----b--c------------|->
响应流:  -----A--------B-----C---|->

(小写字母表示请求, 大写字母表明响应)

得到响应流以后，咱们就能够再订阅后渲染页面了:

responseStream.subscribe(function(response) {
  // 在浏览器中渲染响应数据的逻辑
});

马克一下目前的代码:

var requestStream = Rx.Observable.just('https://api.github.com/users');

var responseStream = requestStream
  .flatMap(function(requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
  });

responseStream.subscribe(function(response) {
  // 在浏览器中渲染响应数据的逻辑
});

刷新“你可能感兴趣的用户”

忘了说了，咱们每一次请求都会返回100个GitHub用户的数据。GitHub的API只容许咱们设置页面的偏移量可是不能设置每次得到数据的数量。嗯，咱们须要3个推荐用户的数据，其余97个就这样浪费了。暂时忽略这个问题，后面咱们看看怎么缓存数据来减小数据的浪费。

每一次点击刷新按钮(高能注意：是一个按钮，点击后刷新“我可能感兴趣的人”的数据，而不是浏览器的刷新按钮)，请求流都会发射新的URL值，咱们以此得到新的响应。刷新分为两步：产生一个刷新按钮被点击的事件流(RP箴言：神马都是流)；订阅刷新事件流后改变请求流的URL地址。RxJS提供了工具方便咱们将时间监听器转换为可观察对象。

var refreshButton = document.querySelector('.refresh');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');

由于点击刷新事件并不会携带须要请求的API的URL，咱们须要把每一次点击映射到真正的URL之上。具体实现方式是，在刷新点击流发生后，咱们经过产生随机的页面拼凑出URL，并向GitHub发起请求。

var requestStream = refreshClickStream
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });

因为是简单的教程，我并无写相关的测试，可是我仍然知道原先的功能被我搞砸啦。呃。。。页面打开后竟然没有请求流了，除非我点击刷新按钮，不然数据怎么都出不来。擦。。。我但愿无论是点击刷新按钮"_仍是_"第一次打开页面，均可以产生得到“我可能感兴趣的人”的数据的GitHub的请求流。

把两个流分开写特别简单，咱们已经知道怎么作了：

var requestOnRefreshStream = refreshClickStream
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });
  
var startupRequestStream = Rx.Observable.just('https://api.github.com/users');

可是咱们怎么把两个流“合并”在一块呢？使用 merge()函数吧。咱们用ASCII图表来解释这个函数的做用：

流 A: ---a--------e-----o----->
流 B: -----B---C-----D-------->
          vvvvvvvvv merge vvvvvvvvv
          ---a-B---C--e--D--o----->

使用merge()后简单多了:

var requestOnRefreshStream = refreshClickStream
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });
  
var startupRequestStream = Rx.Observable.just('https://api.github.com/users');

var requestStream = Rx.Observable.merge(
  requestOnRefreshStream, startupRequestStream
);

若是不须要requestOnRefreshStream、startupRequestStream这两个中间流，写法更干净、简洁。

var requestStream = refreshClickStream
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  })
  .merge(Rx.Observable.just('https://api.github.com/users'));

还能更简单，更有可读性:

var requestStream = refreshClickStream
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  })
  .startWith('https://api.github.com/users');

startWith() 函数的做用和它的命名同样。不管是什么样的流，startWith(x) 都会把x做为这个流的启示输入并发射出来。上面的实现，还不够DRY(Don't repeat yourself，不要重复!)，API请求的URL地址重复了两遍。咱们将 startWith() 紧接在refreshClickStream以后，在页面打开后就模拟一次点击。

var requestStream = refreshClickStream.startWith('startup click')
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });

Nice！事情不会被搞砸了，startWith()完美解决了问题。

3位“你可能感兴趣的用户”的流的构建

目前为止，仅仅在订阅(subscribe())时，你会触及到“感兴趣的用户”区块的渲染。可是经过刷新按钮，问题接踵而至：你点击了刷新按钮，在新的响应到达以前，原来的“你可能感兴趣的”3个用户并不会立刻消失。为了加强用户体验，咱们但愿在用户点击了刷新按钮后就清楚老数据。

refreshClickStream.subscribe(function() {
  // 清楚旧数据： 3个你可能感兴趣的用户的DOM元素
});

停！不要用力过猛。两个订阅行为都会影响到这个区块的渲染。(responseStream.subscribe()、refreshClickStream.subscribe())，而且上面的设计也不符合关注分离的理念。还记得RP 神马都是流 的箴言吗？

那么开始构建这个专门的推荐流：流会发射“你可能感兴趣的用户”的JSON对象。咱们会分别构建三种这样的流，第一种长这个样：

var suggestion1Stream = responseStream
  .map(function(listUsers) {
    // 随机从列表中取出一个用户
    return listUsers[Math.floor(Math.random()*listUsers.length)];
  });

另外两个流suggestion2Stream 和 suggestion3Stream复制粘贴就好啦。呃。。。DRY不要重复，我把这个问题做为这个教程的联系，本身作一遍你会去思考这类场景中如何避免代码的重复。

译者注：若是使用UnderScore，一种方法是，新的方法老是会返回JSON Object数组:

var suggestionStream = responseStream
  .map(suggestionN(listUsers, n));

function suggestionN(listUsers, n) {
    _.times(n, function() {
        return listUsers[Math.floor(Math.random()*listUsers.length)];
    })
}

咱们再也不订阅响应流，而是变动为：

suggestion1Stream.subscribe(function(suggestion) {
  // 在区块中渲染1位用户的DOM元素
});

回到原始需求：“每一次刷新后，清除原来的用户”，咱们能够在刷新后，返回null做为推荐流：

var suggestion1Stream = responseStream
  .map(function(listUsers) {
    // 随机从列表中取出一个用户
    return listUsers[Math.floor(Math.random()*listUsers.length)];
  })
  .merge(
    refreshClickStream.map(function(){ return null; })
  );

在渲染环节，null表明无数据，咱们就隐藏以前的DOM元素。

suggestion1Stream.subscribe(function(suggestion) {
  if (suggestion === null) {
    // 在区块中隐藏一个推荐用户的DOM元素
  }
  else {
    // 在区块中渲染一个推荐用户的DOM元素
  }
});

整个事件流如图所示:

刷新按钮流: ----------o--------o---->
     请求流: -r--------r--------r---->
     响应流: ----R---------R------R-->   
 推荐1个用户: ----s-----N---s----N-s-->

N 表示 null.

页面打开后，咱们渲染“空”推荐区块，能够经过在推荐流中附加startWith(null)实现：

var suggestion1Stream = responseStream
  .map(function(listUsers) {
    // 随机从列表中取出一个用户
    return listUsers[Math.floor(Math.random()*listUsers.length)];
  })
  .merge(
    refreshClickStream.map(function(){ return null; })
  )
  .startWith(null);

Which results in:

刷新按钮流: ----------o---------o---->
      请求流: -r--------r---------r---->
      响应流: ----R----------R------R-->   
 推荐1个用户:  -N--s-----N----s----N-s-->

关闭一个推荐元素，从缓存得到新的推荐元素

最后一个须要实现的功能是：点击'x'按钮后关闭当前的推荐元素，载入一个新的数据并渲染。拍脑壳意向，不管点击了啥按钮，咱们从新请求一次新数据，生成一个新的响应流就行了：

var close1Button = document.querySelector('.close1');
var close1ClickStream = Rx.Observable.fromEvent(close1Button, 'click');
// close2Button 和 close3Button 做为练习

var requestStream = refreshClickStream.startWith('startup click')
  .merge(close1ClickStream) // 加上这个
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });

擦，点击了关闭按钮整个推荐区块都被刷新了！看来咱们只有使用原来的相应流才能解决这个bug，何况每次慷慨大方的GitHub给咱们100个用户的数据，咱们只使用3个，还有1大堆留着等咱们用呢，没有必要再请求更多的数据了。

让咱们从流的角度思考，当点击'x'事件发生后，咱们使用 最近一次的相应流 并从中随机取出用户就行了：

请求流: --r--------------->
      响应流: ------R----------->
   点击关闭流: ------------c----->
推荐1个用户流: ------s-----s----->

在Rx*框架中，一个使用函数叫 combineLatest 。函数将两个流做为输入，而且当其中任意一个流发射以后， combineLatest 都会组合两个流中最新的值 a 和 b而后输出一个新的流，流的值为 c = f(x,y) 其中 f(x, y) 是传入的自定义函数，配合上时序图更好理解:

流 A:     --a-----------e--------i-------->
流 B:     -----b----c--------d-------q---->
          vvvvvvvv combineLatest(f) vvvvvvv
          ----AB---AC--EC---ED--ID--IQ---->

这里的函数f，将输入的字符串变为大写

如今咱们在 close1ClickStream 和 responseStream使用combineLatest() ，只要用户点击关闭按钮，咱们就结合最新的响应流来产生suggestion1Stream。另外一个方面，combineLatest() 是一个同步操做：每当新的响应流发射了值，一样会结合 close1ClickStream产生新的推荐数据。这样咱们大大简化了suggestion1Stream：

var suggestion1Stream = close1ClickStream
  .combineLatest(responseStream,             
    function(click, listUsers) {
      return listUsers[Math.floor(Math.random()*listUsers.length)];
    }
  )
  .merge(
    refreshClickStream.map(function(){ return null; })
  )
  .startWith(null);

最后还有一点点问题：combineLatest()须要结合传入的两个流，若是其中一个流从未发射过任何值，combineLatest()将不会输入任何新的流。回顾一下上面的ASCII图表，当第一个流发射值a时，不会有任何输出，仅当第二个流也发射了值b后，combineLatest()才会开始向外输出。

解决方法不少，咱们采起最简单的方式(上面例子也用到过)，咱们在页面打开时限模拟一次关闭按钮的点击：

var suggestion1Stream = close1ClickStream.startWith('startup click') // we added this
  .combineLatest(responseStream,             
    function(click, listUsers) {
      return listUsers[Math.floor(Math.random()*listUsers.length)];
    }
  )
  .merge(
    refreshClickStream.map(function(){ return null; })
  )
  .startWith(null);

总结

再Mark一下当前的代码，是否是颇有成就感：

var refreshButton = document.querySelector('.refresh');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');

var closeButton1 = document.querySelector('.close1');
var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click');
// close2 和 close3 做为练习

var requestStream = refreshClickStream.startWith('startup click')
  .map(function() {
    var randomOffset = Math.floor(Math.random()*500);
    return 'https://api.github.com/users?since=' + randomOffset;
  });

var responseStream = requestStream
  .flatMap(function (requestUrl) {
    return Rx.Observable.fromPromise($.ajax({url: requestUrl}));
  });

var suggestion1Stream = close1ClickStream.startWith('startup click')
  .combineLatest(responseStream,             
    function(click, listUsers) {
      return listUsers[Math.floor(Math.random()*listUsers.length)];
    }
  )
  .merge(
    refreshClickStream.map(function(){ return null; })
  )
  .startWith(null);
// suggestion2Stream 和 suggestion3Stream 做为练习

suggestion1Stream.subscribe(function(suggestion) {
  if (suggestion === null) {
    // 隐藏一个用户的DOM元素
  }
  else {
    // 渲染一个新的推荐用户的DOM元素
  }
});

1. RxJS教程
2. RxJS基础教程
3. Rxjs 01-认识Rxjs
4. rxjs-流式编程
5. RxJS
6. rxjs
7. [rxjs] Throttled Buffering in RxJS (debounce)
8. RxJS实践，Vue如何集成RxJS
9. RxJS——函数式编程
10. 响应式编程 · RxJS
更多相关文章...
• Maven 教程 - Maven教程
• Lua 教程 - Lua 教程
• Java 8 Stream 教程
• YAML 入门教程