让我们一起来学习 RxJS
aezi3943
8年前
<h2><strong>What Is RxJS</strong></h2> <p>通过 <strong> 阅读 <a href="/misc/goto?guid=4959717416649186477" rel="nofollow,noindex">官方文档</a> </strong> ，不难得出：RxJS 可以很好 <strong>解决异步和事件组合的问题</strong> 。</p> <p>这个时候我就有疑问了，异步问题不是用 Promise ( async/await ) 就好了吗？</p> <p>至于事件，配合框架 ( React, Vue, Angular2 等 ) 的话不也很容易解决吗？</p> <p>不管怎样, 让我们先看个 Hello World 吧。( 我要看 <a href="/misc/goto?guid=4959717416732300904" rel="nofollow,noindex">DEMO</a> )</p> <h3><strong>Rx's Hello World</strong></h3> <pre> <code class="language-javascript">// auto-complete const Observable = Rx.Observable const input = document.querySelector('input') const search$ = Observable.fromEvent(input, 'input') .map(e => e.target.value) .filter(value => value.length >= 1) .throttleTime(100) .distinctUntilChanged() .switchMap(term => Observable.fromPromise(wikiIt(term))) .subscribe( x => renderSearchResult(x), err => console.error(err) )</code></pre> <p>上面的代码做了以下事情：</p> <ul> <li> <p>监听input元素的input事件</p> </li> <li> <p>一旦发生，把事件对象e映射成input元素的值</p> </li> <li> <p>接着过滤掉值长度小于1的</p> </li> <li> <p>并且还设置了一个throttle( 节流器 )，两次输入间隔不超过 100 毫秒为有效输入</p> </li> <li> <p>如果该值和过去最新的值相等的话，忽略他</p> </li> <li> <p>最后，拿到值便调用Wikipedia的一个API</p> </li> <li> <p>最后的最后，需要subscribe才能拿到API返回的数据</p> </li> </ul> <p>是不是看起来就觉得很cool，好想学！</p> <p>短短几行代码就完成了一个 auto-complete 组件。</p> <h2><strong>How It Works</strong></h2> <p>那上面的代码是什么意思？</p> <p>RxJS 到底是如何工作的？如何解决异步组合问题的？</p> <h3><strong>Observable</strong></h3> <p>Rx 提供了一种叫 <strong>Observable</strong> 的数据类型，兼容 ECMAScript 的 <a href="/misc/goto?guid=4959717416820674705" rel="nofollow,noindex">Observable Spec Proposal</a> 草案标准。他是 Rx 最核心的数据类型，结合了 <a href="/misc/goto?guid=4959617323358662558" rel="nofollow,noindex">Observer Pattern</a> ， <a href="/misc/goto?guid=4959717416925455069" rel="nofollow,noindex">Iterator Pattern</a> 。</p> <p>那到底什么是 Observable ？</p> <p>Observable 其实就是一个 <strong>异步的数组</strong> 。 <em> ( ---> <a href="/misc/goto?guid=4959717417011932155" rel="nofollow,noindex">2 minute introduction to rx</a> ) </em></p> <p>不妨想像一下， <strong>数组 + 时间轴 = Observable</strong> 。</p> <p>数组元素的值是未来某个时间点 <em>emit</em> ( 产生 ) 的，但是我们并不关心这个时间点，因为利用了「观察者模式」 <em>subscribe</em> ( 订阅 ) 了这个数组，只要他 <em>emit</em> 了值，就会自动 <em>push</em> 给我们。</p> <p>我们再用图来表示一下的话：</p> <pre> <code class="language-javascript">--a---b-c--d-----e--|--></code></pre> <p>这种图叫做 <a href="/misc/goto?guid=4959717417097542244" rel="nofollow,noindex">marble diagram</a> 。</p> <p>我们可以把 ASCII 的 marble 图转成 SVG 的： <a href="/misc/goto?guid=4959717417176323661" rel="nofollow,noindex">ASCII -> SVG</a> 。</p> <p>- 表示时间轴， a ~ e 表示 emit 的值， | 则表示这个 stream 已经结束了。</p> <p>比方说， click 事件用上图来表示： a 表示第 1 次点击， b 表示第 2 次点击，如此类推。</p> <p>如果你觉得 Observable 这个名字不够形象不够 cool 的话，你可把他叫做 <a href="/misc/goto?guid=4959717417265409317" rel="nofollow,noindex">stream</a> ，因为他的 marble 图就像 steam 一样。所以啊，下面我都会把 <em>Observable</em> 称作 <em>stream</em> 。</p> <h3><strong>Operators</strong></h3> <p>那么，我们怎么对 stream 进行操作呢？怎么把多个 stream 组合在一起呢？</p> <p>我们前面不是说了「 Observable 其实就是 <em>异步数组</em> 」吗？在 JavaScript 里的数组不是有很多内置的方法吗？比如 map , filter , reduce 等等。类似地，Observable 也有自己的方法，也就是所谓的 <a href="/misc/goto?guid=4959717417356272759" rel="nofollow,noindex">operator</a> 。比如上面例子中的 map , filter , throttleTime , distinctUntilChanged 等等很多很有用的 operator 。</p> <p>面对 RxJS 那么多 operator ，我们要怎么学习呢？很简单：</p> <p><a href="/misc/goto?guid=4959717417436577163" rel="nofollow,noindex">分类别</a> + <a href="/misc/goto?guid=4959717417097542244" rel="nofollow,noindex">画 marble 图</a> + <a href="/misc/goto?guid=4959717417533214332" rel="nofollow,noindex">看例子</a> + <a href="/misc/goto?guid=4959717417620401627" rel="nofollow,noindex">选</a></p> <p>现在，就让我们画出上面 Hello World 例子的 marble 图。</p> <pre> <code class="language-javascript">const search$ = Observable.fromEvent(input, 'input') .map(e => e.target.value) .filter(value => value.length >= 1) .throttleTime(100) .distinctUntilChanged() .switchMap(term => Observable.fromPromise(wikiIt(term))) .subscribe( x => renderSearchResult(x), err => console.error(err) )</code></pre> <p>假设输入了 5 次，每次输入的值一次为： a , ab , c , d , c ，并且第 3 次输入的 c 和第 4 次的 d 的时间间隔少于 100ms ：</p> <pre> <code class="language-javascript">---i--i---i-i-----i---|--> (input) map ---a--a---c-d-----c---|--> b filter ---a--a---c-d-----c---|--> b throttleTime ---a--a---c-------c---|--> b distinctUntilChanged ---a--a---c----------|--> b switchMap ---x--y---z----------|--></code></pre> <p>如果我告诉你学习 <strong>RxJS 的捷径是「学会看和画 marble 图」</strong> ，你信还是不信？</p> <h2><strong>Learn By Doing</strong></h2> <p>现在，就让我们结合上面的知识，来实现一个简单的 canvas 画板。</p> <p>根据 canvas 的 <a href="/misc/goto?guid=4959717417696380732" rel="nofollow,noindex">API</a> ，我们需要知道两个点的坐标，这样才能画出一条线。</p> <h3>Step 1</h3> <p>( 我要看 <a href="/misc/goto?guid=4959717417791408077" rel="nofollow,noindex">DEMO</a> )</p> <p>那么，现在我们需要做的是 <strong>创建</strong> 一个关于鼠标移动的 stream 。于是，我们 <strong>去文档找对应的 operator 类别</strong> ，也就是 <a href="/misc/goto?guid=4959717417889026926" rel="nofollow,noindex">Creation Operators</a> ，然后得到 <a href="/misc/goto?guid=4959717417978417214" rel="nofollow,noindex">fromEvent</a> 。</p> <pre> <code class="language-javascript">const canvas = document.querySelector('canvas') const move$ = Rx.Observable.fromEvent(canvas, 'mousemove')</code></pre> <p>对应的 marble 图：</p> <pre> <code class="language-javascript">--m1---m1-m2--m3----m4---|--> (mousemove)</code></pre> <p>接着，我们需要拿到每次鼠标移动时的坐标。也就是说：需要 <strong>变换</strong> stream 。</p> <p>对应类别的 operator 文档： <a href="/misc/goto?guid=4959717418058391866" rel="nofollow,noindex">Transformation Operators</a> ---> <a href="/misc/goto?guid=4959717418145765344" rel="nofollow,noindex">map</a> 。</p> <pre> <code class="language-javascript">const move$ = Rx.Observable.fromEvent(canvas, 'mousemove') .map(e => ({ x: e.offsetX, y: e.offsetX }))</code></pre> <p>此时的 marble 图：</p> <pre> <code class="language-javascript">--m1---m2-m3--m4----m5---|--> (mousemove) map --x1---x2-x3--x4----x5---|--> (点坐标)</code></pre> <p>然后，怎么拿到两个点的坐标呢？我们需要再 <strong>变换</strong> 一下 stream 。</p> <p>对应类别的 operator 文档： <a href="/misc/goto?guid=4959717418058391866" rel="nofollow,noindex">Transformation Operators</a> ---> <a href="/misc/goto?guid=4959717418238229331" rel="nofollow,noindex">bufferCount</a> 。</p> <pre> <code class="language-javascript">const move$ = Rx.Observable.fromEvent(canvas, 'mousemove') .map(e => ({ x: e.offsetX, y: e.offsetY })) .bufferCount(2)</code></pre> <p>marble 图：</p> <pre> <code class="language-javascript">--m1---m2-m3--m4----m5---|--> (mousemove) map --x1---x2-x3--x4----x5---|--> (点坐标) bufferCount(2) -------x1-----x3----x5---|---> (两点坐标) x2 x4</code></pre> <p>然而你会发现，此时画出来的 <a href="/misc/goto?guid=4959717417791408077" rel="nofollow,noindex">线段是不连续的</a> 。为什么？我也不知道！！</p> <p>那就让我们看看别人是怎么写的吧： <a href="/misc/goto?guid=4959717418329214113" rel="nofollow,noindex">canvas paint</a> 。</p> <h3><strong>Step 2</strong></h3> <p>( 先让我要看看 <a href="/misc/goto?guid=4959717418408268534" rel="nofollow,noindex">DEMO</a> )</p> <p>换了一种思路，并没有 <strong>变换</strong> stream ，而是把两个 stream <strong>组合</strong> 在一起。</p> <p>查看文档 <a href="/misc/goto?guid=4959717418492069198" rel="nofollow,noindex">Combination Operators</a> ---> <a href="/misc/goto?guid=4959717418571543583" rel="nofollow,noindex">zip</a> 以及 <a href="/misc/goto?guid=4959717418656223762" rel="nofollow,noindex">Filtering Operators</a> ---> <a href="/misc/goto?guid=4959717418742821224" rel="nofollow,noindex">skip</a></p> <pre> <code class="language-javascript">const move$ = Rx.Observable.fromEvent(canvas, 'mousemove') .map(e => ({ x: e.offsetX, y: e.offsetY })) const diff$ = move$ .zip(move$.skip(1), (first, sec) => ([ first, sec ]))</code></pre> <p>此时的 marble 图：</p> <pre> <code class="language-javascript">--x1---x2-x3--x4----x5---|--> (move$) skip(1) -------x2-x3--x4----x5---|--> --x1---x2-x3--x4----x5---|--> (move$) -------x2-x3--x4----x5---|--> zip -------x1-x2--x3----x4---|--> (diff$) x2 x3 x4 x5</code></pre> <p>这样一来，diff$ emit 的值就依次为(x1, x2),(x2,x3)，(x3,x4) …… 现在，鼠标移动的时候，就可以 <a href="/misc/goto?guid=4959717418408268534" rel="nofollow,noindex">画出美丽的线条</a> 。</p> <h3><strong>Step 3</strong></h3> <p>( 我想看 <a href="/misc/goto?guid=4959717418842985259" rel="nofollow,noindex">DEMO</a> )</p> <p>就在此时我恍然大悟，终于知道前面用 bufferCount 为什么不行了。我们不妨来比较一下：</p> <pre> <code class="language-javascript">-------x1-----x3----x5---|---> (bufferCount) x2 x4 -------x1-x2--x3----x4---|--> (diff$) x2 x3 x4 x5</code></pre> <p>bufferCount emit 的值依次为：(x1,x2)，(x3,x4)…… x2和x3之间是有间隔的。这就是为什么线段会不连续的原因。</p> <p>然后看 <a href="/misc/goto?guid=4959717418238229331" rel="nofollow,noindex">bufferCount</a> 文档的话，你会发现 <strong> 可以使用 bufferCount(2,1) 实现同样的效果</strong>。这样的话，我们就不需要使用zip来组合两个stream。Cool </p> <pre> <code class="language-javascript">const move$ = Rx.Observable.fromEvent(canvas, 'mousemove') .map(e => ({ x: e.offsetX, y: e.offsetX })) .bufferCount(2, 1)</code></pre> <p>此时的marble图：</p> <pre> <code class="language-javascript">--m1---m2-m3--m4----m5---|--> (mousemove) map --x1---x2-x3--x4----x5---|--> (点坐标) bufferCount(2, 1) -------x1-x2--x3----x4---|---> (两点坐标) x2 x3 x4 x5</code></pre> <h2><strong>Step 4</strong></h2> <p>( 我就要看 <a href="/misc/goto?guid=4959717418934520279" rel="nofollow,noindex">DEMO</a> )</p> <p>接下来，我们想实现「只有鼠标按下时，才能画画，否则不能」。</p> <p>首先我们需要 <strong>创建</strong> 两个关于鼠标动作的 stream 。</p> <pre> <code class="language-javascript">const down$ = Rx.Observable.fromEvent(canvas, 'mousedown') const up$ = Rx.Observable.fromEvent(canvas, 'mouseup')</code></pre> <p>当鼠标按下的时候，我们需要把他 <strong>变换</strong> 成鼠标移动的 stream ，直到鼠标放开。</p> <p>查看文档 <a href="/misc/goto?guid=4959717418058391866" rel="nofollow,noindex">Transformation Operators</a> ---> <a href="/misc/goto?guid=4959717419026938903" rel="nofollow,noindex">switchMapTo</a> 。</p> <pre> <code class="language-javascript">down$.switchMapTo(move$)</code></pre> <p>此时的 marble 图：</p> <pre> <code class="language-javascript">--d---d-d-----d---d--|--> (mousedown) switchMapTo --m---m-m-----m---m--|--></code></pre> <p>此时，鼠标放开了我们还能 <a href="/misc/goto?guid=4959717418934520279" rel="nofollow,noindex">继续画画</a> ，这显然不是我们想要的。这个时候我们很容易会使用 <a href="/misc/goto?guid=4959717419113940258" rel="nofollow,noindex">takeUntil</a> 这个 operator ，但是这是不对的，因为他会把 <em>stream</em> complete 掉。</p> <p>还是让我们看看别人是怎么写的吧： <a href="/misc/goto?guid=4959717418329214113" rel="nofollow,noindex">canvas paint</a> 。</p> <h3><strong>Step 5</strong></h3> <p>( 我只想看 <a href="/misc/goto?guid=4959717419209575748" rel="nofollow,noindex">DEMO</a> )</p> <p>思路是这个样子的：</p> <p>把up$和down$<strong>组合</strong>成一个新的stream，但为了分辨他们，我们需要先把他们<strong>变换</strong>成新的stream 。</p> <p>查看文档 <a href="/misc/goto?guid=4959717418492069198" rel="nofollow,noindex">Combination Operators</a> ---> <a href="/misc/goto?guid=4959717419301050132" rel="nofollow,noindex">merge</a> 。</p> <p><a href="/misc/goto?guid=4959717418058391866" rel="nofollow,noindex">Transformation Operators</a> ---> <a href="/misc/goto?guid=4959717418145765344" rel="nofollow,noindex">map</a> 。</p> <pre> <code class="language-javascript">const down$ = Rx.Observable.fromEvent(canvas, 'mousedown') .map(() => 'down') const up$ = Rx.Observable.fromEvent(canvas, 'mouseup') .map(() => 'up') const upAndDown$ = up$.merge(down$)</code></pre> <p>再来看看他们的 marble 图：</p> <pre> <code class="language-javascript">--d--d-d----d--d---|--> (down$) ----u---u-u------u-|--> (up$) merge --d-ud-du-u-d--d-u-|--> (upAndDown$)</code></pre> <p>此时，我们再 <strong>变换</strong>upAndDown$ 。如果是down的话，则变换成move$，否则变换成一个空的stream 。</p> <p>查看文档 <a href="/misc/goto?guid=4959717417436577163" rel="nofollow,noindex">Creation Operators</a> ---> <a href="/misc/goto?guid=4959717419410618526" rel="nofollow,noindex">empty</a> 。</p> <p><a href="/misc/goto?guid=4959717418058391866" rel="nofollow,noindex">Transformation Operators</a> ---> <a href="/misc/goto?guid=4959717419506172863" rel="nofollow,noindex">switchMap</a> 。</p> <pre> <code class="language-javascript">upAndDown$ .switchMap(action => action === 'down' ? move$ : Rx.Observable.empty() )</code></pre> <p>你要的 marble 图：</p> <pre> <code class="language-javascript">--d-ud-du-u-d--d-u-|--> (upAndDown$) switchMap --m-em-me-e-m--m-e-|--></code></pre> <p>其实这个canvas画板不用RxJS实现也不会很难。但是当我们把他扩展成一个「你画我猜」之后，用RxJS处理异步就会变得简单起来。比如，添加新的工具栏(调色板，撤销…… ) ，即时通信(同步画板，聊天) ……</p> <p>另外，如果你想边学习 RxJS 边实现一些小东西的话：</p> <ul> <li><a href="/misc/goto?guid=4959717419592953615" rel="nofollow,noindex">staltz - rxjs training</a></li> <li><a href="/misc/goto?guid=4959628481675151351" rel="nofollow,noindex">GitHub - Who to Follow</a></li> <li><a href="/misc/goto?guid=4959717419701785209" rel="nofollow,noindex">RxJS 4.x Example</a></li> <li><a href="/misc/goto?guid=4959717419784356239" rel="nofollow,noindex">RxJs Playground</a></li> <li><a href="/misc/goto?guid=4959717419862831414" rel="nofollow,noindex">Yet Another RSS Reader</a></li> <li><a href="/misc/goto?guid=4959717419944019752" rel="nofollow,noindex">rx-ifying a chat room built with reactjs and socket io</a></li> <li><a href="/misc/goto?guid=4959717420033416856" rel="nofollow,noindex">angular2-hacknews</a></li> </ul> <h2><strong>Production</strong></h2> <p>怎么把RxJS应用到实际生产的web应用当中呢？</p> <p>怎么结合到当前流行的框架当中呢？</p> <h3><strong>Vue</strong></h3> <p>你可以直接在各种 <a href="/misc/goto?guid=4959717420116678312" rel="nofollow,noindex">Lifecycle Hooks</a> 中使用 RxJS 。</p> <p>比如created的时候初始化一个Observable，beforeDestroy时就取消订阅Observable。( 查看 <a href="/misc/goto?guid=4959717420194737280" rel="nofollow,noindex">DEMO</a> )</p> <pre> <code class="language-javascript">new Vue({ el: '#app', data: { time: '' }, created () { this.timer$ = Rx.Observable.interval(1000) .map(() => new Date()) .map(d => moment(d).format('hh:mm:ss')) .subscribe(t => { this.time = t }) }, beforeDestroy () { this.timer$.unsubscribe() } })</code></pre> <p>其实已经有对应的插件<a href="/misc/goto?guid=4959717420270898551" rel="nofollow,noindex">vue-rx</a>帮我们干了上面的dirty work。他会分别在init和beforeDestroy的时候自动地订阅和取消订阅 Observable ：<a href="/misc/goto?guid=4959717420356266355" rel="nofollow,noindex">Vue.js + RxJS binding mixin in 20 lines</a> 。</p> <p>因此，我们可以直接把一个Observable写到data中：<a href="/misc/goto?guid=4959717420442728758" rel="nofollow,noindex">vue-rx/example.html</a> 。</p> <h3><strong>React</strong></h3> <p>类似地，React也可以在他组件的<a href="/misc/goto?guid=4959717420516786189" rel="nofollow,noindex">lifecycle hooks</a>里调用RxJS：<a href="/misc/goto?guid=4959717420613590994" rel="nofollow,noindex">fully-reactive-react</a>。也可以使用<a href="/misc/goto?guid=4959717420693835471" rel="nofollow,noindex">rxjs-react-component</a>把 Observable 绑定到 state 。 如果你结合 Redux 的话，可以使用这个 <a href="/misc/goto?guid=4959717420773255676" rel="nofollow,noindex">redux-oservable</a> 。</p> <h3><strong>Angular2</strong></h3> <p>RxJS已经是Angular2的标配，不多说。</p> <p>更多可查看对应的文档<a href="/misc/goto?guid=4959717420861974413" rel="nofollow,noindex">Angular2 - Server Communication</a> 。</p> <p>更多关于RxJS的集成：<a href="/misc/goto?guid=4959717420944803210" rel="nofollow,noindex">RxJS community</a> 。</p> <h2><strong>You Might Not Need RxJS</strong></h2> <p>根据 <a href="/misc/goto?guid=4959717421017000839" rel="nofollow,noindex">When to Use RxJS</a> ，我们可以知道RxJS的适用场景是：</p> <ul> <li> <p>多个复杂的异步或者事件组合在一起</p> </li> <li> <p>处理多个数据序列（有一定顺序）</p> </li> </ul> <p>我觉得，如果你没被异步问题困扰的话，那就不要使用RxJS吧，因为Promise已经能够解决简单的异步问题了。至于Promise和 Observable的区别是什么呢？可以看 <a href="/misc/goto?guid=4959717421107701078" rel="nofollow,noindex">Promise VS Observable</a> 。</p> <p>讲真，<strong>RxJS 在实际生产中适用的业务场景有哪些</strong>？哪些场景是需要多个异步组合在一起的？游戏吗？即时通信？还有一些特殊的业务。是我的写的业务太少了吗？还是我平时写业务的时候，为写而写，没有把他们抽象起来。</p> <p>另外，我倒是对 Teambition 关于 RxJS 的思路有点感兴趣： <em> <a href="/misc/goto?guid=4959717421200905352" rel="nofollow,noindex">xufei - 数据的关联计算 -> Brooooooklyn 评论</a> </em> & <a href="/misc/goto?guid=4959717421275092995" rel="nofollow,noindex">xufei - 对当前单页应用的技术栈思考</a> 。</p> <h2><strong>Summary</strong></h2> <ul> <li> <p>RxJS 是用来解决异步和事件组合问题</p> </li> <li> <p>Observable = <a href="/misc/goto?guid=4959717417011932155" rel="nofollow,noindex">异步数组</a> = 数组 + 时间轴 = stream</p> </li> <li> <p>Operators = <a href="/misc/goto?guid=4959717417436577163" rel="nofollow,noindex">分类别</a> + <a href="/misc/goto?guid=4959717417097542244" rel="nofollow,noindex">画 marble 图</a> + <a href="/misc/goto?guid=4959717417533214332" rel="nofollow,noindex">看例子</a> + <a href="/misc/goto?guid=4959717417620401627" rel="nofollow,noindex">选</a></p> </li> <li> <p><strong>更多更详细的更准确的请看 <a href="/misc/goto?guid=4959007487147762984" rel="nofollow,noindex">文档</a> ！ </strong></p> </li> </ul> <p> </p> <p>来自：https://fe.ele.me/let-us-learn-rxjs/</p> <p> </p>