ReactiveCocoa框架菜鸟入门(五)——信号的FlattenMap与Map
2016-09-19 14:23
375 查看
文章背景
本文是在阅读《ReactiveCocoa入门教程:第一部分》一文后,提出的一些补充。主要是比较深入的研究了信号(Signal)的FlattenMap与Map与Map方法。读者应该至少了解信号的概念,以及信号的基本操作。
问题提出
有时候,我们需要把一个异步的API用信号的方式来表示。比如,点击登录按钮后异步的访问服务器,当获取到数据的时候再调用订阅者的处理方法。一个可能会出现的代码大概是这样:<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repea 4000 t: initial initial;">- (RACSignal *)signInSignal { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [RACSignal createSignal:^RACDisposable *(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> subscriber){ [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.signInService</span> signInWithUsername:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.usernameTextField</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> password:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.passwordTextField</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> complete:^(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span> success){ [subscriber sendNext:@(success)]; [subscriber sendCompleted]; }]; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>; }]; } [[[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.signInButton</span> rac_signalForControlEvents:UIControlEventTouchUpInside] map:^<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> x){ <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> signInSignal]; }] subscribeNext:^(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> x){ <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSLog</span>(@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Sign in result: %@"</span>, x); }];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li></ul>
这样的代码并不能正常运行,原文给出的解决方案是把map方法换成flattenMap方法,但是却没有给出解释。在此专栏的上一篇文章,我们已经研究过了flattenMap的工作原理,并且明确了一点:map方法是基于flattenMap方法实现的。
再探FlattenMap与Map
在了解这两个方法的工作原理之前,我们不妨梳理一下思路。对于一个信号流(由若干个信号前后拼接而成)中的每一个信号而言,我们最关心它能传递出什么数据,就像我们只关心水龙头里面流出的是水还是石油一样。至于流入的数据,一定是上一个信号的流出数据。然而,在之前的讨论中我们已经清楚,信号能流出什么样的数据,是在创建这个信号的决定的。也就是说,订阅者拿到的数据,取决于在创建信号的时候,我们制定的sendNext方法的参数。与现实生活不同的是,我们可以在水龙头之间添加过滤网来实现类似的功能。
在《ReactiveCocoa框架菜鸟入门——信号(Signal)详解》一文中,我们已经详细的查看了bind方法和flattenMap方法的代码和文档。
flattenMap方法,实际上是根据前一个信号传递进来的参数重新建立了一个信号,这个参数,可能会在创建信号的时候用到,也有可能根本用不到。比如在之前的例子中,我们其实调用了自定义的方法来创建信号。
之前提到过,我们关注一个信号能传递什么数据出来,那么调用了flattenMap方法创建的信号,会传出什么样的值呢?
答案是不知道!!!
因为flattenMap方法并不关心生成的信号会传递什么值,它只负责
根据前一个信号的参数创建一个新的信号!
而至于这个信号会传递什么值,之前也提到过,是在创建信号的时候指定的。比如本文所举的例子中,我们自定义的信号会传递这样的值
<code class="hljs ini has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 102, 102);">[subscriber sendNext:@(success)]</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
理解了这一点之后,map方法就简单了。先看一下map方法的定义:
<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (instancetype)map:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> (^)(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> value))block { NSCParameterAssert(block != <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>); Class class = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.class</span>; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [[<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> flattenMap:^(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> value) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> [class <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span>:block(value)]; }] setNameWithFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"[%@] -map:"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.name</span>]; }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li> bdb5 <li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>
这里的[class return:block(value)]方法实现了flattenMap方法的功能,他返回了一个信号。return:方法的代码实现有点长,有兴趣的读者可以自行查阅,这里就不具体分析,总结来说就是,这个信号传递的值讲是block(value)。
flattenMap方法和map方法都有一个带参数value的block作为这个方法的参数。不同的是,flattenMap方法通过调用block(value)来创建一个新的方法。它可以灵活的定义新创建的信号。而map方法,将会创建一个和原来一模一样的信号,只不过新的信号传递的值变为了block(value)。
总结一下,个人对map的理解是“变换”。map方法,根据原信号创建了一个新的信号,并且变换了信号的输出值。这两个信号具有明显的先后顺序关系。而flattenMap方法,直接生成了一个新的信号,这两个信号并没有先后顺序关系,属于同层次的平行关系。这也许就是为什么会被命名为flattenMap吧。
实践检验
回头看一看此前的例子之所以用map方法不行的原因在于,map方法创建的信号,接收了前一个信号传递的值,传出的值是[self signInSignal]的执行结果,即任然是一个信号,但是我们并不需要这个信号,我们需要的是这个信号的传出值。使用flattenMap方法就可行的原因在于,flattenMap方法生成了一个新的信号,也就是我们调用[self signInSignal]的执行结果。这个信号的传出的值,在信号的创建过程中已经被定义。所以可以正常工作。
吐槽一句
非常感谢最初翻译出ReactiveCocoa教程的大牛,给了我们快速入门的机会。但是能力越大,责任也越大,简单一句flattenMap可以处理信号中的信号,是非常不负责任的,可能会影响无数的学习者。甚至原作者当时也没能完全理解flattenMap的工作原理以及和map方法之间的关系。我想,严谨、求真知,是对任何一门科学的基本尊重。包括软件工程。
相关文章推荐
- ReactiveCocoa框架菜鸟入门(五)——信号的FlattenMap与Map
- ReactiveCocoa框架菜鸟入门(五)——信号的FlattenMap与Map
- ReactiveCocoa框架菜鸟入门(四)——信号(Signal)详解
- ReactiveCocoa框架菜鸟入门——信号(Signal)详解 第五课:适合给新手看的RAC用法总结
- ReactiveCocoa框架菜鸟入门——信号(Signal)详解 第二课:信号(Signal)的各种操作
- ReactiveCocoa框架菜鸟入门——信号(Signal)详解 第一课:什么是 ReactiveCocoa
- ReactiveCocoa框架菜鸟入门——信号(Signal)详解 第三课:
- ReactiveCocoa框架菜鸟入门(四)——信号(Signal)详解
- ReactiveCocoa框架菜鸟入门(四)——信号(Signal)详解
- ReactiveCocoa框架菜鸟入门(五)——信号的FlattenMap与Map
- ReactiveCocoa框架菜鸟入门(三)——信号(Signal)与订阅者(Subscriber)
- ReactiveCocoa框架菜鸟入门 系列
- ReactiveCocoa框架菜鸟入门(二)——MVVM架构与ReactiveCocoa框架
- ReactiveCocoa框架菜鸟入门——信号(Signal)详解 第四课
- ReactiveCocoa入门教程之信号的使用
- ReactiveCocoa框架菜鸟入门(三)——信号(Signal)与订阅者(Subscriber)
- ReactiveCocoa入门教程:第二部分
- ReactiveCocoa入门教程:第一部分
- ReactiveCocoa入门教程:第一部分