使用 RxJS 构造复杂单页应用的数据逻辑
#长按上图识别二维码，参与OSC源创会年终盛典#
摘要: 本文整理自 OSC 第 54 期重庆源创会上徐飞老师的演讲，他详细地介绍了如何使用 RxJS 构造复杂单页应用的数据逻辑，干货满满，各位程序员不要错过了，尤其是前端的程序员们~欢迎大家积极参加源创会，一起交流、学习、进步。
徐飞，Teambition 前端架构师，长期从事企业应用前端架构的工作，对单页应用实现方案有深入的研究。这个领域和互联网传统的前端有一些区别，对数据层方面比较看重，对组件化要求会比较多一些。Teambition 是一个团队协同工具，对于数据的实时性要求非常高。
RxJS 是 Java 的 ReactiveX 库。总的来说，它用于描述数据变化与时间的关系，是可用于异步操作的 lodash。
这句话比较难懂，可以通过了解它的使用场景来理解。
我们经常看到这些场景：
微博的列表页面
各类协同工具的任务看板，比如 Teambition
这类场景的一个共同特点是：
由若干个小方块构成
每个小方块需要以一个业务实体为主体（一条微博，一个任务），聚合一些其他关联信息（参与者，标签等）
这么一个界面，考虑到它的完全展示，可能会有这么两种方案：
服务端渲染，查询所有数据，生成 HTML 之后发送给浏览器
前端渲染，查询所有数据，发送给浏览器生成 HTML 展示
微博使用的前一种，并且引入了 bigpipe 机制来生成界面，而 Teambition 则使用后一种，主要差别还是由于产品形态。
Teambition 业务场景
复杂的单页应用
主要功能都集中在一个页面中
同一份数据存在多份副本
全业务都有与服务端的实时数据同步
业务面临的问题
同一份数据在视图的多个地方使用
广泛地使用了本地数据缓存
每个业务场景都有服务端的 WebSocket 推送来更新数据
WebSocket 推送可能导致很多视图需要更新
先来看一个例子，现在有项目、任务这样的组织方式。任务是挂在项目下面的，如果需要查询一条任务，要先把它所属的项目（A）查询出来，此时切换到另一个项目（B），并点开其中一条任务，这个时候如果再切换回去。可以知道，刚刚已经请求过项目 A 的数据，那现在切换回去是否还需要再次请求呢？其实是可以不用，但是如果不请求会出现什么问题呢？毕竟不知道刚刚的过程中项目 A 是否有被修改。
所以，这就要求我们的数据查询是离散化的，任务信息和额外的关联信息分开查询，然后前端来组装，这样，一是可以减少传输数据量，二是可以分析出数据之间的关系，更新的时候容易追踪。
除此之外，Teambition 的操作会在全业务维度使用 WebSocket 来做更新推送，比如说，当前任务看板中，有某个东西变化了（其他人创建了任务、修改了字段），都会由服务端推送消息，来促使前端更新界面。
离散的数据会让我们需要使用缓存。比如说，界面建立起来之后，如果有人在其他端创建了任务，那么，本地的看板只需收到这条任务信息并创建视图，并不需要再去查询人员、标签等关联信息，因为之前已经获取过。所以，大致会是这个样子：
某视图组件的展示，需要聚合 ABC 三个实体，其中，如果哪个实体在缓存中存在，就不去服务端拉取，只拉取无缓存的实体。
这个过程带来第一个挑战：
查询同一种数据，可能是同步的（缓存中获取），可能是异步的（AJAX 获取），业务代码编写需要考虑两种情况。
WebSocket 推送则用来保证前端缓存的正确性。但是，需要注意到，WebSocket 的编程方式跟 AJAX 是不一样的，WebSocket 是一种订阅，跟主流程很难整合起来，而 AJAX 相对来说，可以组织到包含在主流程中。
例如，对同一种更新的不同发起方（自己修改一个东西，别人修改这个东西），这两种的后续其实是一样，但代码并不相同，需要写两份业务代码。
这样就带来第二个挑战：
获取数据和数据的更新通知，写法是不同的，会加大业务代码编写的复杂度。
数据这么离散，从视图角度看，每块视图所需要的数据，都可能是经过比较长而复杂的组合，才能满足展示的需要。
所以，第三个挑战：
每个渲染数据，都是通过若干个查询过程（刚才提到的组合同步异步）组合而成，如何清晰地定义这种组合关系？
此外，可能面临这样的场景：
一组数据经过多种规则（过滤，排序）之后，又需要插入新的数据（主动新增了一条，WebSocket 推送了别人新建的一条），这些新增数据都不能直接加进来，而是也必须走一遍这些规则，再合并到结果中。
这就是第四个挑战：
对于已有数据和未来数据，如何简化它们应用同样规则的代码复杂度。
带着这些问题，来开始今天的思考过程。
一、数据缓存中心化
第一点做的是数据缓存中心化，在前端把所有数据的缓存当做一个中心，但这里面就会出现两种情况：
上层视图第一次调用的时候，缓存不一定存在。这就需要向服务端请求数据之后，把数据拆解并缓存，这是一个异步加载的过程。
缓存存在的情况下，直接从缓存拼装数据给界面显示，这是同步的过程。
那么问题就来了，同样是请求一个项目的数据，有可能是同步，也有可能是异步的，代码该如何写，因为同步和异步的代码写法不一样。还有一个问题是 WebSocket 的消息是直接合并进缓存的。这个对前面的情况又会产生什么影响呢？
1. 同步与异步的统一
在前端，经常会碰到同步、异步代码的统一。假设要实现一个方法：当有某个值的时候，就返回这个值，否则去服务端获取这个值。
通常的做法是使用 Promise：
所以，处理这个事情的办法就是，如果不确定是同步还是异步，那就取异步，因为它可以兼容同步，刚才代码里面的 resolve 就是强制把同步的东西也转换为兼容异步的 Promise。
只用 Promise 当然也可以解决问题，但 RxJS 中的 Observable 在这一点上可以一样做到：
2. 跟 Promise 的差别
有人要说了，你这段代码还不如 Promise，因为还是要从它转啊，优势在哪里呢？
来看看刚才封装出来的方法，分别是怎么使用的呢？
在这一节里，不对比两者优势，只看解决问题可以通过怎样的办法：
getData(): T{}，只能做同步的事情
getDataP(): Promise&T& {}，可以做同步和异步的事情
getDataO(): Observable&T& {}，可以做同步和异步的事情
结论就是，无论 Promise 还是 Observable，都可以实现同步和异步的封装。
二、数据层的 Reactive API
主要是完成以下任务：
订阅并持续响应
数据的变更推送到有关联的订阅
获取与订阅的统一
通常，我们在前端会使用观察者或者订阅发布模式来实现自定义事件这样的东西，这实际上就是一种订阅。
从视图的角度看，其实它所面临的是：
得到了一个新的任务数据，我要展示它
至于说，这个东西是怎么得到的，是主动查询来的，还是别人推送过来的，并不重要，这不是它的职责，它只管显示。所以，要给它封装的是两个东西：
主动查询的数据
被动推送的数据
然后，就变成类似这么一个东西：
这么一来，视图这里就可以用相同的方式应对两种不同来源的数据了，service 内部可以去把两者统一，在各自的回调里面触发这个自定义事件 task。
但我们似乎忽略了什么事，视图除了响应这种事件之外，还需要去主动触发一下初始化的查询请求：
这样看起来还是挺别扭，回到上一节里面的那个 Observable 示例：
这里使用了 RxJS，可以先直接调用这个方法，然后立刻订阅这个方法的返回结果，这段代码起到两个作用，先是请求数据，然后订阅数据。也就是说，如果以后这条数据有变化，会随着程序执行的过程持续地拿到变化后的数据。这么一句好像就搞定了我们要求的所有事情。可以这么去理解这件事：
getDataO 是一个业务过程
业务过程的结果数据可以被订阅
这样，就可以把获取和订阅这两件事合并到一起，视图层的关注点就简单很多了。
三、组件的状态控制
1. 数据的流式封装
因为这两年 React 开始流行了，所以大家就开始关注视图和它的状态之间的关系 —— 某一个时间的状态可能是通过第一个数据跟第二个数据之间进行某种关系的组合，然后再跟另外一个数据进行组合，最后得到一个数据，把这个数据拿到视图上去展示，基本上来讲是这样的关系。
依据上一节的思路，可以把查询过程和 WebSocket 响应过程抽象，融为一体。说起来很容易，但关注其实现的话，就会发现这个过程是需要好多步骤的，比如说：
一个视图所需要的数据可能是这样的：
data1 跟 data2 通过某种组合，得到一个结果
这个结果再去跟 data3 组合，得到最终结果
怎么去抽象这个过程呢？
注意，这里面 data1，data2，data3，可能都是之前提到过的，包含了同步和异步封装的一个过程，具体来说，就是一个 RxJS Observable。
可以把每个 Observable 视为一节数据流的管道，我们所要做的，是根据它们之间的关系，把这些管道组装起来，这样，从管道的某个入口传入数据，在末端就可以得到最终的结果，数据在管道中就流动起来了。
2. 可组合的数据通道
RxJS 给我们提供了一堆操作符用于处理这些 Observable 之间的关系，比如说，可以通过一些方式（操作符）把管道连接起来
上述的 D 就是通过 C 进行一次转换所得到的数据管道，而 E 是把 A，B，D 进行拼装之后得到的数据管道
从以上的示意图就可以看出它们之间的组合关系，通过这种方式，可以描述出业务逻辑的组合关系，把每个小粒度的业务封装到数据管道中，然后对它们进行组装，拼装出整体逻辑来。因此最后得到的数据就始终是经过这种关系所组合得到的数据。
3. 现在和未来的统一
在业务开发中，我们时常遇到这么一种场景：
已过滤排序的列表中加入一条新数据，要重新按照这条规则走一遍。
我用一个简单的类比来描述这件事：
每个进教室的同学都可以得到一颗糖
这句话表达了两个含义：
在这句断言产生之前，对于已经在教室里的每个人，都应当去给他们发一颗糖
在这句断言形成以后，再进入这个教室的每个人，都应当得到一颗糖
这里面，第一句表达的是现在，第二句表达的是未来。我们编写业务程序的时候，往往会把现在和未来分开考虑，而忽略了他们之间存在的深层次的一致性。
想通了这个事情之后，再反过来考虑刚才这个问题，能得到的结论是：
进入本列表的数据都应当经过某种过滤规则和某种排序规则
这才是一个合适的业务抽象，然后再编写代码就是：
其中，source 代表来源，而 final 代表结果。来源经过 filterA 变换、sorterA 变换之后，得到结果。
然后，再去考虑来源的定义：
来源等于初始数据与新增数据的合并。
然后，实现出 filterA 和 sorterA，就完成了整个这段业务逻辑的抽象定义。给 start 和 patch 分别进行定义，比如说，start 是一个查询，而 patch 是一个推送，它就是可运行的了。最后，在 final 上添加一个订阅，整个过程就完美地映射到了界面上。
很多时候，我们编写代码都会考虑进行合适的抽象，但这两个字代表的含义在很多场景下并不相同。
很多人会懂得把代码划分为若干方法，若干类型，若干组件，以为这样就能够把整套业务的运转过程抽象出来，其实不然。
业务逻辑的抽象是与业务单元不同的方式，前者是血脉和神经，后者是肢体和器官，两者需要结合在一起，才能够成为鲜活的整体。
一般场景下，业务单元的抽象难度相对较低，很容易理解，也容易获得关注，所以通常都能做得还不错，比如最近两年，对于组件化之类的话题，都能够谈得起来了，但对于业务逻辑的抽象，大部分项目是做得很不够的，值得深思。
四、数据与视图的绑定
以上，谈及的都是在业务逻辑的角度，如何使用 RxJS 来组织数据的获取和变更封装，最终，这些东西是需要反映到视图上去的，这里面有些什么有意思的东西呢？
最近几年有很多关于视图层的新东西出现，这和之前 jQuery 直接操作数组不一样。比如说 Angular、React 和 Vue.js。从这几个主流的框架中，可以得到一个理念 —— MDV（模型驱动视图）。即任何东西都是在改动了数据之后，由视图层的框架自己按照定义好的规则来把视图改变。而不需要每次修改数据后，再手动改动视图。所以在这个理念下，一切对于视图的变更，首先都应当是模型的变更，然后通过模型和视图的映射关系，自动同步过去。
但是要考虑一点，到底是用什么东西驱动视图改变？其实不同的框架所采用的方式是不一样的，例如 Angular、Vue.js 与 React 就采用了不一样的方式。
Angular 是在每一个异步事件完成之后，对比一下现在的数据是否和之前的数据一样，如果不一样，把现在的数据拿去重绘之前的视图；
Vue.js 会让数据的 get 和 set 做一件事情，比如说 a.b = 1，会在内部监控到即时的 a.b 的赋值，并在给 a.b 赋值的时候，它会更新界面
React 是通过一个东西去收敛回来，因为它是单向数据，也就是输出一条数据，通过某个地方转向，然后再收敛回来，通过这种方式去改变视图。
假如说现在有一个场景，就是某一个属性是依赖于另外一些东西通过计算得到的，比如说界面上现在有三个输入框，第三个输入框里面的值要始终等于第一个跟第二个的和，如果在 Vue.js 上就需要定义一个 Computed Property，就是指某个属性是依赖于其他一些数据，通过计算得到的。这个计算是同步的，假如这个数据是隔几秒再传过来，这个关系不好定义。因为要计算属性，只能用当前的数据而不能是异步的，所以这里就可以用刚才的例子，就是先定义一个流，然后把这个流的数据往上面赋值。
再来看看这些前端 MV* 框架的目的：定义数据和视图的关系，当数据变更之后，自动更新视图。如果把下面数据的变更都用 RxJS 去实现，就是变成数据的管道，数据在管道里面流动，上层的就只需要订阅数据，然后更新界面上的状态。
1. 数据流与视图的结合
现在来看这样一个伪代码，比如说现在有一个请求的数据，既有请求又有订阅，拿到数据之后如何操作，如果是 React 或者 Vue.js 的话，就手动把拿到的数据往 state 或 data 里面设置；如果是 Angular 的话就更简单，可以直接把 Observable 用 async pipe 绑定到视图。在这些体系中，如果要使用 RxJS 的 Observable，都非常简单：
在这个过程中，可能会需要通过一些方式定义这种关系，比如 Angular 和 Vue 中的模板，React 中的 JSX 等等。
这里面有几个点要说一下：
Angular2 对 RxJS 的使用是非常方便的，形如：let todo of todos$ | async 这种代码，可以直接绑定一个 Observable 到视图上，会自动订阅和销毁，比较简便优雅地解决了“等待数据”，“数据结果不为空”，“数据结果为空”这三种状态的差异。Vue 也可以用插件达到类似的效果。
CycleJS 比较特别，它整个运行过程就是基于类似 RxJS 的机制，甚至包括视图，看官方的这个Demo：
这里面，注意 DOM.select 这段。这里，明显是在界面还不存在的情况下就开始 select，开始添加事件监听了，这就是我刚才提到的预先定义规则，统一现在与未来；如果界面有 .field，就立刻添加监听，如果没有，等有了就添加。
2. 整体状态
整个应用的结构如下所示，最下面是服务端，然后前端有一个数据缓存，数据缓存之上提供了一个 Reactive API，应注意到，这个 API 不是调用一次就没了，它可以持续不断地返回数据，然后再把这个切到视图上。
那么，从视图的角度，还可以对 RxJS 得出什么思考呢？
可以实现异步的计算属性。
在上次这篇里简单提了一下，其实整篇是在给这篇做伏笔。
有没有考虑过，如何从视图的角度去组织这些数据流？
一个分析过程可以是这样：
检阅某视图，发现它需要数据 a，b，c
把它们的来源分别定义为数据流 A，B，C
分析 A，B，C 的来源，发现 A 来源于 D 和 E；B 来源于 E 和 F；C 来源于 G
分别定义这些来源，合并相同的部分，得到多条直达视图的管道流
然后定义这些管道流的组合过程，做合适的抽象
五、如何理解整个机制？
怎么理解这么一套机制呢，可以想象一下这张图：
把 Teambition SDK 看作一个 CPU，API 就是他对外提供的引脚，视图组件接在这些引脚上，每次调用 API，就如同从一个引脚输入数据，但可能触发多个引脚对外发送数据。细节可以参见 SDK 的设计文档。
另外，对于 RxJS 数据流的组合，也可以参见，你点开链接之后可能心想：这两者有什么关系？
翻到最后那个图，从侧面看到多个波叠加，想象一下，如果把视图的状态理解为一个时间轴上的流，它可以被视为若干个其他流的叠加，这么多流叠加起来，在当前时刻的值，就是能够表达所见视图的全部状态数据。
这么想一遍是不是就容易理解多了？
Teambition SDK
Teambition 新版数据层使用 RxJS 构建，不依赖任何展现框架，可以被任何展现框架使用，甚至可以在NodeJS 中使用，对外提供了一整套 Reactive 的 API，可以查阅来了解详细的实现机制。
基于这套机制，可以很轻松实现一套基于 Teambition 平台的独立视图，欢迎第三方开发者发挥自己的想象，用它构建出各种各样有趣的东西。我们也会逐步添加一些示例。
使用 RxJS，可以达到以下目的：
同步与异步的统一
获取和订阅的统一
现在与未来的统一
可组合的数据变更过程
数据与视图的精确绑定
条件变更之后的自动重新计算
点击“阅读原文”获取更多精彩内容
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点㐴前端开发公众号
100G前端干货教程
100G前端干货教程
React 中文文档 (v16)
React-用于构建用户界面的 JAVASCRIPT 库
跟牛人学前端
跟牛人学前端
CSS3参考手册
CSS3参考手册 - 最新最全的CSS参考手册，CSS3属性集合，CSS3 Properties, CSS3, CSS3手册, CSS3参考手册
前端最新干货
前端最新干货
web在线直播课
潭州教育是中国较早的在线教育平台,教学内容涵盖网络营销,java,javascript,jquery,android,ios,mysql,围棋,刺绣,养殖,农业,手艺,网页设计,平面设计,影视后期,CAD建筑机械,网络营销,商战智慧,办公软件,三维设计,工业设计,淘宝摄影,英语,音乐,大学代理,Photoshop教程,
Max教程,Maya教程,CAD教程,会声会影教程,AI教程,淘宝开店,摄影教程,免费教程,素材下载等众多在线学习精品课程。经过10年的发展,潭州教育已经发展为中国规模较大的在线教育平台。
JavaScript 代码片段
精心挑选的有用的 JavaScript 代码片段，你可以在30秒或更短的时间内理解。
Parcel 中文文档
快速，零配置的 Web 应用程序打包器
您的位置： » 分类:
» 文章: React 教程：2018年学习 React.js 的综合指南
您可能感兴趣的文章
近期最热文章
- 39,313 - 8,134 - 8,123 - 5,010 - 3,051 - 2,389
关注WEB前端开发公众号Bitcoin Block Explorer - Blockchain&figure&&img src=&https://pic4.zhimg.com/v2-f338f0f109bbf95326bd3_b.jpg& data-rawwidth=&2000& data-rawheight=&1333& class=&origin_image zh-lightbox-thumb& width=&2000& data-original=&https://pic4.zhimg.com/v2-f338f0f109bbf95326bd3_r.jpg&&&/figure&&p&尽管原文一直在委婉地使用 &sunset&（日落）这个行话，但事实的确是：Airbnb 要放弃 React Native 了。&/p&&p&早上刷到 &a href=&http://link.zhihu.com/?target=https%3A//medium.com/%40gpeal%3Fsource%3Dpost_header_lockup& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Gabriel Peal&/a& 的推时，看到「两年，220 屏，12w 行 JS」，我的第一反应其实是「Airbnb 真的是很投入 RN 啊」。综所周知 Airbnb 是除 FB 之外对 React 投入最多，在社区里影响力最大的公司之一了， &a href=&http://link.zhihu.com/?target=https%3A//airbnb.design/painting-with-code/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&他们让 React 可以和 Sketch interop&/a& ，&a href=&http://link.zhihu.com/?target=https%3A//decosoftware.com/%23announcement& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&甚至专门收购了一家做 RN IDE 的公司&/a&。结果看到第二行「moving away」我就觉得不对劲了。Grabriel 相信也知道公开宣布放弃 RN 的影响太大（你看我都懒这么久了……），觉得写一篇文不够，于是一连发了 5 篇来解释。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-f65cdc79cc69_b.jpg& data-rawwidth=&2068& data-rawheight=&404& data-caption=&& data-size=&normal& class=&origin_image zh-lightbox-thumb& width=&2068& data-original=&https://pic2.zhimg.com/v2-f65cdc79cc69_r.jpg&&&/figure&&p&Well，让我们来看看他都说了啥。&/p&&h2&&b&1. React Native at Airbnb&/b&&/h2&&blockquote&In 2016, we took a big bet on React Native. Two years later, we’re ready to share our experience with the world and show what’s next.&/blockquote&&a data-draft-node=&block& data-draft-type=&link-card& href=&http://link.zhihu.com/?target=https%3A//medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.com/airbnb-engin&/span&&span class=&invisible&&eering/react-native-at-airbnb-f95aa460be1c&/span&&span class=&ellipsis&&&/span&&/a&&p&第一篇是一个开场，介绍了他们是为什么在 2016 年决定在 RN 上堵一把的。大家都知道 RN 理论上的一些优势，所以他们的主要目标是希望能通过 RN 做到：&/p&&ol&&li&大团队快速迭代（Allow us to &b&move faster&/b& as an organization.)&/li&&li&原生应用质量（Maintain the &b&quality bar&/b& set by native.）&/li&&li&代码跨双平台（Write product code &b&once&/b& for mobile instead of &b&twice&/b&.）&/li&&li&提升开发体验（Improve upon the &b&developer experience&/b&.）&/li&&/ol&&p&如果这四点都达到了，大概今天的文章就是另一个基调了。不着急，我们还有四篇文章呢。&/p&&p&&br&&/p&&h2&&b&2. React Native at Airbnb: The Technology&/b&&/h2&&blockquote&The technical details&/blockquote&&a data-draft-node=&block& data-draft-type=&link-card& href=&http://link.zhihu.com/?target=https%3A//medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.com/airbnb-engin&/span&&span class=&invisible&&eering/react-native-at-airbnb-the-technology-dafd0b43838&/span&&span class=&ellipsis&&&/span&&/a&&p&这篇文章着重从技术细节描述 RN 的优劣，我相信大家都比较关注这个，所以我把每一条都列出来了，当然更细的内容还是看原文&/p&&p&&b&他们满意的地方是：&/b&&/p&&ul&&li&跨平台 （只有 0.2% 的平台特定代码）&/li&&li&统一的设计语言，同时还能为不同平台提供不同设计&/li&&li&React 的 scale 很好，生命周期比原生简单，声明式很好&/li&&li&迭代速度快（主要是 hot reloading 很快）&/li&&li&大量基础设施的投入值得（网络、国际化、复杂动画、设备信息、用户信息等等都是通过一个桥把原生 api 暴露给 RN 的。）&/li&&ul&&li&同时他们在这里也指出：他们并不相信在一个已有 app 上集成 RN 是一件简单事儿，必须要大量且持续地投入基础设施才行（说好的「满意的地方」呢）&/li&&/ul&&li&性能 （尽管大家都担心但是其实基本没有问题）&/li&&ul&&li&不过首次渲染比较慢，导致不适合用作启动屏、deeplink，也增加了可交互时间（TTI），另外掉帧不好 debug（说好的「满意的地方」呢）&/li&&/ul&&li&Redux（好用，虽然废话太多）&/li&&li&背后是原生，一些曾经不确定能不能做的功能（&i&Shared element transitions、动画库 Lottie、网络层、核心基础设施）&/i&发现都能做&/li&&li&静态分析（eslint，prettier，一些性能检测）&/li&&li&动画&/li&&li&JS/React 的开源生态&/li&&li&Flexbox （via Yoga）&/li&&li&有时候可以加上 Web 跨三端&/li&&/ul&&p&&b&他们不满意的地方是：&/b&&/p&&ul&&li&RN 太不成熟&/li&&li&需要 fork RN&/li&&li&JS 不行 （JS 没有类型不 scale，flow 不好用，TS 不好集成到 babel 和 metro）&/li&&li&不好重构（JS 没有类型无法静态分析，重构引起的错误不能在编译时被捕捉到）&/li&&ul&&li&咳，用我 FB 的新编译到 JS 语言大 &a href=&http://link.zhihu.com/?target=https%3A//reasonml.github.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&ReasonML&/a& 啊……静态强类型 + 类型推断 + 自带不可变数据结构 + JS 友好语法 + 官方 React 支持，绝对 scale（咳扯远了&/li&&/ul&&li&JSCore 在 iOS / Android 上不一致 （Android 上是 RN 自己 bundle 的），很难 debug 这种坑&/li&&li&RN 的开源库质量不行（因为太少人能精通所有平台了）&/li&&li&做功能时要回去搞基础设施（因为有的基础设施可能还没暴露给 RN）&/li&&li&奔溃监控（业内没方案，只能自己搞）&/li&&li&原生桥太难写，另外 JS 的类型太难预料（和强类型语言 interop 时）&/li&&li&RN 运行时的初始化太慢 &/li&&li&首次渲染时间慢（需要从 主线程 -& JS -& Yoga -& 主线程）&/li&&li&应用体积&/li&&li&64 位 （因为 RN 不兼容的 &a href=&http://link.zhihu.com/?target=https%3A//github.com/facebook/react-native/issues/2814& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&issue&/a& 导致他们至今没法在 android 发布 64 位应用）&/li&&li&手势（iOS 和 Android 的手势不好统一，虽然他们搞了 &a href=&http://link.zhihu.com/?target=https%3A//github.com/kmagiera/react-native-gesture-handler& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native-gesture-handler&/a&）&/li&&li&长列表&/li&&li&升级 RN 有的时候非常麻烦&/li&&li&Accessibility （RN 的有 bug，又要 fork）&/li&&li&稀奇古怪的奔溃&/li&&li&安卓上的应用实例序列化问题&/li&&/ul&&p&hmm……真是吐槽吐到天上去了……&/p&&p&&br&&/p&&h2&&b&3. Building a Cross-Platform Mobile Team&/b&&/h2&&blockquote&Adapting mobile for a world with React Native&/blockquote&&a data-draft-node=&block& data-draft-type=&link-card& href=&http://link.zhihu.com/?target=https%3A//medium.com/airbnb-engineering/building-a-cross-platform-mobile-team-3e& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.com/airbnb-engin&/span&&span class=&invisible&&eering/building-a-cross-platform-mobile-team-3e&/span&&span class=&ellipsis&&&/span&&/a&&p&这篇主要讲述他们在组建跨平台的移动团队时所遇到的一些管理挑战。&/p&&ul&&li&RN 在内部的评论两极化，&/li&&li&要想有好的 RN 体验或者 debug 时还是需要懂 Native，这种原生和 RN 混合对招聘、开发环境、学习成本、测试、迭代速度带来的各种负面影响。&/li&&li&如何决定一个新功能是用原生还是 RN？？&/li&&li&怎么拆分团队？&/li&&/ul&&p&等等，很有意思，尤其值得 Engineering Manager/Director 阅读 ;)&/p&&p&&br&&/p&&h2&&b&4. Sunsetting React Native&/b&&/h2&&blockquote&Due to a variety of technical and organizational issues, we will be sunsetting React Native and putting all of our efforts into making native amazing.&/blockquote&&a data-draft-node=&block& data-draft-type=&link-card& href=&http://link.zhihu.com/?target=https%3A//medium.com/airbnb-engineering/sunsetting-react-native-a& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.com/airbnb-engin&/span&&span class=&invisible&&eering/sunsetting-react-native-a&/span&&span class=&ellipsis&&&/span&&/a&&p&面对技术与管理的双重挑战，他们认为 RN 并没有达到他们最初列出的四个目标，所以决定 sunset RN 了。&/p&&p&Airbnb 已经停止用 RN 一些开发新特性，并且准备在发布新设计的同时，从最主要的业务开发逐步转回 native，预计在 2019 取得一定的进展。&/p&&p&对于开源，他们会将一些好的 RN 项目转到 &a href=&http://link.zhihu.com/?target=https%3A//github.com/react-native-community& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&react-native-community&/a& 下面。&/p&&p&Airbnb 总计投入了 8w 行产品代码，220 个页面和 4w 行基础设施代码在 RN 上，同时也指出他们在 iOS/Android 上分别有 10 倍于此的代码量和 4 倍于此的页面数量。（这么多吗！？）&/p&&p&他们提到 RN 在走向成熟，包括 &a href=&http://link.zhihu.com/?target=https%3A//facebook.github.io/react-native/blog//state-of-react-native-2018& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&State of React Native 2018 · React Native&/a&&/p&&p&最后，说明他们放弃 RN 的举措并不是适用于所有公司的。但是由于上述痛点和资源等原因，决定 sunset RN。&/p&&p&&br&&/p&&h2&&b&5. What’s Next for Mobile at Airbnb&/b&&/h2&&blockquote&Bringing the best back to native&/blockquote&&a data-draft-node=&block& data-draft-type=&link-card& href=&http://link.zhihu.com/?target=https%3A//medium.com/airbnb-engineering/whats-next-for-mobile-at-airbnb-5eab& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&medium.com/airbnb-engin&/span&&span class=&invisible&&eering/whats-next-for-mobile-at-airbnb-5eab&/span&&span class=&ellipsis&&&/span&&/a&&p&最后一篇介绍了 Airbnb 在移动端的未来方向：&/p&&p&首先，介绍了一个他们的新方向：&/p&&p&&b&Server-Driven Rendering （服务端驱动渲染）&/b&&/p&&p&一言以蔽之，就是服务端发送某种 View 的抽象描述，然后移动端解析这种描述并渲染。&/p&&p&（其实阿里的 Weex 和 Facebook 内部都有类似的技术）&/p&&p&SDR（新词来了！）有诸多好处，详见原文吧 ;)&/p&&p&后面就是一些广告了，介绍了 Epoxy、MvRx、部分 build （类似 buck）技术，秀秀肌肉招招人，happy ending。&/p&&p&&br&&/p&&p&&br&&/p&&p&两年的 RN 投入付诸东流，我还是挺唏嘘的，一下也不知道该评论些什么。&/p&&p&如果你个人或者公司正在投入 React Native，不妨也看看 React Native Team 发布的 &a href=&http://link.zhihu.com/?target=https%3A//facebook.github.io/react-native/blog//state-of-react-native-2018& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&State of React Native 2018 · React Native&/a& ，React Native 正在经历一次巨大的重构，很多文中提及的问题也都是这次重构想要解决的，React Core Team 的 &首席科学家& Sebastian 正在很积极的参与这个项目 ;)&/p&&p&大家有什么想法，欢迎在评论里讨论吧 ;&/p&&p&&/p&
尽管原文一直在委婉地使用 "sunset"（日落）这个行话，但事实的确是：Airbnb 要放弃 React Native 了。早上刷到
的推时，看到「两年，220 屏，12w 行 JS」，我的第一反应其实是「Airbnb 真的是很投入 RN 啊」。综所周知 Airbnb 是除 FB 之外对…
&figure&&img src=&https://pic4.zhimg.com/v2-b19fedf16aa193d0aaf37a2_b.jpg& data-rawwidth=&1600& data-rawheight=&540& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&https://pic4.zhimg.com/v2-b19fedf16aa193d0aaf37a2_r.jpg&&&/figure&&blockquote&&p&本文是一系列介绍 RxJS 文章的第一篇，这一系列的文章将从一个小的例子开始，逐渐深入的讲解 RxJS 在各种场景下的应用。对应的，也会有对 RxJS 各种操作符的讲解（如果能坚持不弃坑的话。这篇文章将会用一个 Todo list 作为例子，讲解 RxJS 是如何组合各种同步/异步业务的，在这个过程中，初次接触 RxJS 的同学可能会被各种操作符和组合搞得云里雾里，但没关系，本片的主旨是让大家了解 RxJS 是如何在我们熟悉的那些业务场景中使用的，更细节的介绍将会在后续的文章中。&/p&&/blockquote&&h2&准备工作&/h2&&p&首先在 &a href=&http://link.zhihu.com/?target=https%3A//github.com/teambition/learning-rxjs& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - teambition/learning-rxjs: Learning RxJS step by step&/a& clone 项目所需的 seed，本文中所有涉及到 RxJS 的代码将全部使用 TypeScript 编写。&/p&&p&使用 npm start 启动 seed 项目，在浏览器中通过 &i&&a href=&http://link.zhihu.com/?target=http%3A//localhost%3A3000& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&localhost:3000&/span&&span class=&invisible&&&/span&&/a&&/i& 进入 demo 页面，这篇文章中我们将实现以下几点功能：&/p&&ol&&li&在输入框中输入字符，在回车的时候将输入框中的文字变成一个 todo item，同时清空输入框中的内容。&/li&&li&在输入框中输入字符，点击 add 按钮，将输入框中的文字变成一个 todo item，同时清空输入框中的文字。&/li&&li&点击一个 todo item，让它变成已完成的状态&/li&&li&点击 todo item 右边的 remove button，将这个 todo item 从 todo list 中移除。&/li&&/ol&&h2&第一个 Observable&/h2&&p&如果要响应用户按下回车这个行为，我们首先要获取用户输入的事件并把它转变成 Observable，在 RxJS 中，可以直接使用 fromEvent 操作符直接将一个 eventListener 转变成一个 Observable:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// src/app.ts&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&c1&&// do 操作符一般用来处理 Observable 的副作用，例如操作 DOM，修改外部变量，打 log&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span&&span class=&p&&))&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&p&这样在控制台就能看到每次用户输入时对应的 event 在 input$ Observable 中流动了。&/p&&br&&figure&&img src=&https://pic3.zhimg.com/v2-2d892a45c070bf921ce47b6_b.png& data-rawwidth=&2548& data-rawheight=&852& class=&origin_image zh-lightbox-thumb& width=&2548& data-original=&https://pic3.zhimg.com/v2-2d892a45c070bf921ce47b6_r.jpg&&&/figure&&br&&br&&h2&使用 filter 进行数据过滤&/h2&&p&但我们并不关心用户的输入的其它值，只需要获取&b&按下回车事件&/b&这个值，并作出响应。此时我们只需要对这个 Observable 进行 filter :&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import { Observable } from 'rxjs'
const $input = &HTMLInputElement&document.querySelector('.todo-val')
const input$ = Observable.fromEvent&KeyboardEvent&($input, 'keydown')
.filter(r =& r.keyCode === 13)
.do(r =& console.log(r))
const app$ = input$
app$.subscribe()
&/code&&/pre&&/div&&figure&&img src=&https://pic4.zhimg.com/v2-68dac6e52edef82a95cbe9f_b.png& data-rawwidth=&2556& data-rawheight=&898& class=&origin_image zh-lightbox-thumb& width=&2556& data-original=&https://pic4.zhimg.com/v2-68dac6e52edef82a95cbe9f_r.jpg&&&/figure&&br&&br&&h2&使用 map 进行数据的变换&/h2&&p&为了完成在回车的时候将输入框中的文字变成一个 todo item，我们需要获取 input 中的值，并将它变成一个 todo-item 节点。这个过程是一个很典型的 map 的过程: &br&可以类比于 Array 的 Map : [ … KeyboardEvent ] =& [… HTMLElement ] &br&首先在输入回车的时候把 KeyboardEvent map 到 string, filter 掉空值&/p&&br&&div class=&highlight&&&pre&&code class=&language-text&&&span&&/span&import { Observable } from 'rxjs'
const $input = &HTMLInputElement&document.querySelector('.todo-val')
const input$ = Observable.fromEvent&KeyboardEvent&($input, 'keydown')
.filter(r =& r.keyCode === 13)
const app$ = input$
.map(() =& $input.value)
.filter(r =& r !== '')
.do(r =& console.log(r))
app$.subscribe()
&/code&&/pre&&/div&&figure&&img src=&https://pic3.zhimg.com/v2-ab38b01a02ac_b.png& data-rawwidth=&2554& data-rawheight=&648& class=&origin_image zh-lightbox-thumb& width=&2554& data-original=&https://pic3.zhimg.com/v2-ab38b01a02ac_r.jpg&&&/figure&&br&&p&再来一个 createTodoItem 的 helper:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// lib.ts&/span&
&span class=&kr&&export&/span& &span class=&kr&&const&/span& &span class=&nx&&createTodoItem&/span& &span class=&o&&=&/span& &span class=&p&&(&/span&&span class=&nx&&val&/span&&span class=&o&&:&/span& &span class=&nx&&string&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&result&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLLIElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&createElement&/span&&span class=&p&&(&/span&&span class=&s1&&'LI'&/span&&span class=&p&&)&/span&
&span class=&nx&&result&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&s1&&'list-group-item'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&sb&&`&/span&
&span class=&sb&&
&/span&&span class=&si&&${&/span&&span class=&nx&&val&/span&&span class=&si&&}&/span&&span class=&sb&&&/span&
&span class=&sb&&
&button type=&button& class=&btn btn-default button-remove& aria-label=&right Align&&&/span&
&span class=&sb&&
&span class=&glyphicon glyphicon-remove& aria-hidden=&true&&&/span&&/span&
&span class=&sb&&
&/button&&/span&
&span class=&sb&&
&span class=&nx&&result&/span&&span class=&p&&.&/span&&span class=&nx&&innerHTML&/span& &span class=&o&&=&/span& &span class=&nx&&innerHTML&/span&
&span class=&k&&return&/span& &span class=&nx&&result&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&c1&&// app.ts&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&createTodoItem&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./lib'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span&&span class=&p&&.&/span&&span class=&nx&&keyCode&/span& &span class=&o&&===&/span& &span class=&mi&&13&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&))&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&figure&&img src=&https://pic4.zhimg.com/v2-3fc8b032cf_b.png& data-rawwidth=&2542& data-rawheight=&658& class=&origin_image zh-lightbox-thumb& width=&2542& data-original=&https://pic4.zhimg.com/v2-3fc8b032cf_r.jpg&&&/figure&&br&&p&将 map 出来的节点插入 DOM，顺便一提的是，在 RxJS 的范式中，数据流动中的 副作用 都应该写在 do 操作符中。&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&createTodoItem&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./lib'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$list&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLUListElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.list-group'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span&&span class=&p&&.&/span&&span class=&nx&&keyCode&/span& &span class=&o&&===&/span& &span class=&mi&&13&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&))&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&p&实现到这一步，我们已经可以把输入的字符串变成一个个 item 了:&/p&&br&&p&下一步我们来实现点击 add 按钮增加一个 todo item 功能。可以看到，在程序上这个操作和按下回车后需要的后续操作是一样的。所以我们只需要将点击 add 按钮事件也变成一个 Observable 然后与 按下回车 的 Observable merge 到一起就好了:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&createTodoItem&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./lib'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$list&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLUListElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.list-group'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$add&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.button-add'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&enter$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span&&span class=&p&&.&/span&&span class=&nx&&keyCode&/span& &span class=&o&&===&/span& &span class=&mi&&13&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&clickAdd$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&MouseEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$add&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&enter$&/span&&span class=&p&&.&/span&&span class=&nx&&merge&/span&&span class=&p&&(&/span&&span class=&nx&&clickAdd$&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&))&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&p&接下来在 do 操作符中把 input 中的值清除掉:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&p&&...&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span& &span class=&o&&=&/span& &span class=&s1&&''&/span&
&span class=&p&&})&/span&
&span class=&p&&...&/span&
&/code&&/pre&&/div&&h2&从 Observable mergeMap 到 新的 Observable&/h2&&p&在创建出这些 item 后，我们再给它们加上各自的 event listener 来完成 &strong&点击一个 todo item，让它变成已完成的状态&/strong& 功能，而新的 eventListener 只能在这些 item 创建出来以后加上。所以这个过程是 Observable&HTMLElement& =& map =& Observable&MouseEvent& =& merge 的过程，在 RxJS 中有一个操作符可以一步完成这个 map and merge 的过程:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&createTodoItem&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./lib'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$list&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLUListElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.list-group'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$add&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.button-add'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&enter$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span&&span class=&p&&.&/span&&span class=&nx&&keyCode&/span& &span class=&o&&===&/span& &span class=&mi&&13&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&clickAdd$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&MouseEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$add&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&enter$&/span&&span class=&p&&.&/span&&span class=&nx&&merge&/span&&span class=&p&&(&/span&&span class=&nx&&clickAdd$&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span& &span class=&o&&=&/span& &span class=&s1&&''&/span&
&span class=&p&&})&/span&
&span class=&c1&&// map and merge&/span&
&span class=&p&&.&/span&&span class=&nx&&mergeMap&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&MouseEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span& &span class=&o&&=&&/span& &span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&target&/span& &span class=&o&&===&/span& &span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&mapTo&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&$todoItem&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&contains&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&))&/span& &span class=&p&&{&/span&
&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&remove&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span& &span class=&k&&else&/span& &span class=&p&&{&/span&
&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&))&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&blockquote&&p&因为 todoItem 上还有其它功能性的按钮，比如移除 todoItem ，所以在 mergeMap 中我们用 filter 过滤掉了非 li 标签的点击事件。同时下一个 do 操作符中需要 consume 这个 $todoItem 对象，所以我们在 filter 后将它 mapTo 下一个操作符。&/p&&/blockquote&&h2&从一个 Observable map 到不同的 Observable，share/publish 它再操作它&/h2&&p&为了实现点击 remove 按钮，把当前的 todoItem 移除，我们需要从 item$ 的 Observable 中重新 mergeMap 出新的 remove$ 的 Observable:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&Observable&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'rxjs'&/span&
&span class=&kr&&import&/span& &span class=&p&&{&/span& &span class=&nx&&createTodoItem&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'./lib'&/span&
&span class=&kr&&const&/span& &span class=&nx&&$input&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLInputElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.todo-val'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$list&/span& &span class=&o&&=&/span& &span class=&o&&&&/span&&span class=&nx&&HTMLUListElement&/span&&span class=&o&&&&/span&&span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.list-group'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&$add&/span& &span class=&o&&=&/span& &span class=&nb&&document&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.button-add'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&enter$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&KeyboardEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$input&/span&&span class=&p&&,&/span& &span class=&s1&&'keydown'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span&&span class=&p&&.&/span&&span class=&nx&&keyCode&/span& &span class=&o&&===&/span& &span class=&mi&&13&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&clickAdd$&/span& &span class=&o&&=&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&MouseEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$add&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&input$&/span& &span class=&o&&=&/span& &span class=&nx&&enter$&/span&&span class=&p&&.&/span&&span class=&nx&&merge&/span&&span class=&p&&(&/span&&span class=&nx&&clickAdd$&/span&&span class=&p&&)&/span&
&span class=&kr&&const&/span& &span class=&nx&&item$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span& &span class=&o&&=&/span& &span class=&s1&&''&/span&
&span class=&p&&})&/span&
&span class=&kr&&const&/span& &span class=&nx&&toggle$&/span& &span class=&o&&=&/span& &span class=&nx&&item$&/span&&span class=&p&&.&/span&&span class=&nx&&mergeMap&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&o&&&&/span&&span class=&nx&&MouseEvent&/span&&span class=&o&&&&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&e&/span& &span class=&o&&=&&/span& &span class=&nx&&e&/span&&span class=&p&&.&/span&&span class=&nx&&target&/span& &span class=&o&&===&/span& &span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&mapTo&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&$todoItem&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&k&&if&/span& &span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&contains&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&))&/span& &span class=&p&&{&/span&
&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&remove&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span& &span class=&k&&else&/span& &span class=&p&&{&/span&
&span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&classList&/span&&span class=&p&&.&/span&&span class=&nx&&add&/span&&span class=&p&&(&/span&&span class=&s1&&'done'&/span&&span class=&p&&)&/span&
&span class=&p&&}&/span&
&span class=&p&&})&/span&
&span class=&kr&&const&/span& &span class=&nx&&remove$&/span& &span class=&o&&=&/span& &span class=&nx&&item$&/span&&span class=&p&&.&/span&&span class=&nx&&mergeMap&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&kr&&const&/span& &span class=&nx&&$removeButton&/span& &span class=&o&&=&/span& &span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&querySelector&/span&&span class=&p&&(&/span&&span class=&s1&&'.button-remove'&/span&&span class=&p&&)&/span&
&span class=&k&&return&/span& &span class=&nx&&Observable&/span&&span class=&p&&.&/span&&span class=&nx&&fromEvent&/span&&span class=&p&&(&/span&&span class=&nx&&$removeButton&/span&&span class=&p&&,&/span& &span class=&s1&&'click'&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&mapTo&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&$todoItem&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&c1&&// 从 DOM 上移掉 todo item&/span&
&span class=&kr&&const&/span& &span class=&nx&&$parent&/span& &span class=&o&&=&/span& &span class=&nx&&$todoItem&/span&&span class=&p&&.&/span&&span class=&nx&&parentNode&/span&
&span class=&nx&&$parent&/span&&span class=&p&&.&/span&&span class=&nx&&removeChild&/span&&span class=&p&&(&/span&&span class=&nx&&$todoItem&/span&&span class=&p&&)&/span&
&span class=&p&&})&/span&
&span class=&kr&&const&/span& &span class=&nx&&app$&/span& &span class=&o&&=&/span& &span class=&nx&&toggle$&/span&&span class=&p&&.&/span&&span class=&nx&&merge&/span&&span class=&p&&(&/span&&span class=&nx&&remove$&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&console&/span&&span class=&p&&.&/span&&span class=&nx&&log&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span&&span class=&p&&))&/span&
&span class=&nx&&app$&/span&&span class=&p&&.&/span&&span class=&nx&&subscribe&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&p&然而，这段代码并没有按我们预期的工作，remove button 点击之后是没有反应的。 &br&这是因为： &br&&strong&Observable 默认是 lazy 且 unioncast的，这意味着:&/strong&&/p&&ol&&li&它只有在订阅的时候才会被执行&/li&&li&它被多个订阅者订阅会执行多次，并且执行时上下文是独立的&/li&&/ol&&p&也就是说，我们的 remove$ Observable 会重新让 item$ Observable 中的逻辑重新执行一遍:&/p&&br&&figure&&img src=&https://pic4.zhimg.com/v2-ef98d1a63cd07a94a1e01d52bea8bb87_b.png& data-rawwidth=&1574& data-rawheight=&992& class=&origin_image zh-lightbox-thumb& width=&1574& data-original=&https://pic4.zhimg.com/v2-ef98d1a63cd07a94a1e01d52bea8bb87_r.jpg&&&/figure&&br&&p&在上图中，toggle$ Observable 先订阅并执行了黄色箭头部分的过程，remove$ Observable 订阅的时候重新执行绿色部分的过程，然而这个时候 input$ Observable 中已经不会流数据出来了。&/p&&p&想象一下，首先 toggle$ Observable 被订阅，随后 remove$ Observable 被订阅。此时由于这两个 Observable 被订阅导致 $item Observable 被订阅了&b&两次&/b&，所以对 input 与 add button 的 addEventlistener 逻辑执行了&b&两次&/b&。在按下回车或者点击 add button 的时候，第一个 item$ Observable 的订阅逻辑先执行，向 DOM 中加入了一个 todoItem 并将 input 清空，此时再执行第二个 item$ Observable 的订阅逻辑，此时 input 里面已经为空，所以这个 item$ Observable 里面没有数据流过，这也是我们的代码没有按照预期执行的原因。为了验证这个猜想，我们只需要把 $item Observable 中的 do 操作符中的&i& $&b&input.value = '' &/b&&/i&注释掉就可以更直观的观察到程序现在的运行状态了:&/p&&figure&&img src=&https://pic2.zhimg.com/v2-94eafcc2f3d4c321fa05_b.png& data-rawwidth=&2552& data-rawheight=&832& class=&origin_image zh-lightbox-thumb& width=&2552& data-original=&https://pic2.zhimg.com/v2-94eafcc2f3d4c321fa05_r.jpg&&&/figure&&br&&p&图中红色的箭头是 toggle$ Observable 的 subscribe 逻辑执行的结果，这个 todoItem 节点只会处理 toggle 逻辑。黄色箭头的部分是 remove$ Observable 的 subscribe 逻辑执行的结果，这个 todoItem 节点只会处理 remove 逻辑。(这也很好的证明了 Observable 是 unioncast 的特性）&/p&&p&解决的方法其实很简单，我们不想要在每次订阅的时候都重复执行 item$ Observable 的逻辑，所以只需要:&/p&&br&&div class=&highlight&&&pre&&code class=&language-js&&&span&&/span&&span class=&kr&&const&/span& &span class=&nx&&item$&/span& &span class=&o&&=&/span& &span class=&nx&&input$&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(()&/span& &span class=&o&&=&&/span& &span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&filter&/span&&span class=&p&&(&/span&&span class=&nx&&r&/span& &span class=&o&&=&&/span& &span class=&nx&&r&/span& &span class=&o&&!==&/span& &span class=&s1&&''&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&map&/span&&span class=&p&&(&/span&&span class=&nx&&createTodoItem&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&k&&do&/span&&span class=&p&&((&/span&&span class=&nx&&ele&/span&&span class=&o&&:&/span& &span class=&nx&&HTMLLIElement&/span&&span class=&p&&)&/span& &span class=&o&&=&&/span& &span class=&p&&{&/span&
&span class=&nx&&$list&/span&&span class=&p&&.&/span&&span class=&nx&&appendChild&/span&&span class=&p&&(&/span&&span class=&nx&&ele&/span&&span class=&p&&)&/span&
&span class=&nx&&$input&/span&&span class=&p&&.&/span&&span class=&nx&&value&/span& &span class=&o&&=&/span& &span class=&s1&&''&/span&
&span class=&p&&})&/span&
&span class=&p&&.&/span&&span class=&nx&&publishReplay&/span&&span class=&p&&(&/span&&span class=&mi&&1&/span&&span class=&p&&)&/span&
&span class=&p&&.&/span&&span class=&nx&&refCount&/span&&span class=&p&&()&/span&
&/code&&/pre&&/div&&p&此时的 item$ 是这样的&/p&&figure&&img src=&https://pic2.zhimg.com/v2-83e1b936dba9ea77f9449_b.png& data-rawwidth=&1290& data-rawheight=&1318& class=&origin_image zh-lightbox-thumb& width=&1290& data-original=&https://pic2.zhimg.com/v2-83e1b936dba9ea77f9449_r.jpg&&&/figure&&br&&br&&blockquote&&p&关于 Observable 的 &b&hot&/b& vs &b&cold&/b&, &b&Observable&/b& vs &b&Subject&/b& 等概念，以及这里为什么用 &b&publishReplay&/b&, 它的参数为什么是 1，将会在后续的章节中深入讲解，这里我们只需要关注这种行为就好了。&/p&&/blockquote&&p&自此，一个简单的 todoList 的四种需求已经被我们用 RxJS 实现了，下一篇文章我们会介绍如何用 RxJS 把网络请求，websocket 等事件接入到这些业务逻辑中。&/p&&br&&h2&广告&/h2&&p&&i&skipUntil(you are interested in TypeScript)&/i&&/p&&p&关于 TypeScript 的最佳实践，一直都有一些小伙伴问我，之前也一直没有精力做详细的回答。现在好消息来了，由我和 &a href=&http://link.zhihu.com/?target=https%3A//github.com/Davidcai1993& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DavidCai1993 (David Cai) · GitHub&/a&, &a href=&http://link.zhihu.com/?target=https%3A//github.com/vagusX& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&vagusX (vagusX) · GitHub&/a&
翻译的 Learning TypeScript 中文版近期就会开卖了！书里面涵盖了运用面向对象的最佳实践编写可维护可扩展的 TypeScript 代码，搭建自动化的 TypeScript workflow，使用 TypeScript 进行自动化单元测试 & 集成测试，使用 TypeScript 及其最佳实践从头实现 MVC 框架 & 应用 等多个方面的内容，讲解非常详细，我的很多 TypeScript 编写习惯都是在译这本书的时候养成的，值得一看！&/p&
本文是一系列介绍 RxJS 文章的第一篇，这一系列的文章将从一个小的例子开始，逐渐深入的讲解 RxJS 在各种场景下的应用。对应的，也会有对 RxJS 各种操作符的讲解（如果能坚持不弃坑的话