Swift, ReactiveCocoa第一个app

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看237 回复回复1 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 237|回复: 1
收起左侧

Swift, ReactiveCocoa第一个app

[复制链接]
3rdev 发表于 2016-6-23 17:45:38 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码




0、引言

这篇文章将纪录用Swift语言配合ReactiveCocoa写一个伪搜索引擎app的历程。

大量参考了RayWenderlich.com上的文章(原文链接1原文链接2)。原文是针对Objective C的,但是现在Swift都已经更新到了3.0(虽然因为作者没有developer id,用的还是2.2),ReactiveCocoa也更新到了4.2,原来的大多数技术都已经不能直接使用了(ReactiveCocoa的开发者甚至说在未来的5.0版本中要移除Objective C的支持)。作者为此也走过不少弯路,参考了多方资料,最终完成了这个sample app,希望可以让别人少走一点弯路。

作者推荐新接触iOS的开发者在学完基础的swift之后直接使用ReactiveCocoa+Swift来写代码,这将节省大量的精力。




1、ReactiveCocoa简介

(翻译自RayWenderlich.com,有改动)

作为iOS开发者,我们写的每一行代码几乎都是在和“事件”打交道,例如用户点击了一个按钮,网络上发来一条信息,一个属性值的变化(Key Value Observation),或者是用户的位置改变了。但是,CocoaTouch把这些事件以不同的格式封装在了一起,例如target-action, delegate, KVO, 回调之类的。这就给开发带来了很大的麻烦,降低了代码的可读性,随之而来的就是更多的维护成本和更多的bug。ReactiveCocoa把这一切封装到了一个标准的接口中,这样它们就可以很容易地被组合、过滤。

ReactiveCocoa把函数式编程和响应式编程组合在了一起。(更多可以查看敏捷大拇指的《Swift的响应式编程革命 Reactive Revolution of Swift》)

  • 函数式编程:这种编程方式使用了高阶函数,也就是把其他函数作为参数的函数(作者认为RayWenderlich.com的解释不太好。作者认为函数式编程就是一个不同的计算机架构方式。它注重数学在计算机科学中发挥的作用,把函数理解成真正的数学上的函数。其核心就是没有Side Effect,也没有变量。这非常好的避免了并发编程中的很多问题,因而在这两年逐渐流行。Swift中有良好的函数式编程支持,其语法对著名而经常使用的Monad结构的支持甚至比经典的Haskell语言还好)
  • 响应式编程:这种编程方式注重数据流的传播和管道式的程序结构。这种结构也是为了复杂的并发程序而生的,先天具有简洁、安全的特点。


因为这个原因,ReactiveCocoa也被称为是一个函数响应式编程框架。

这里就不再在学术上深究了,打开Xcode吧!




2、程序结构设计

程序最终运行的效果如下:

Swift, ReactiveCocoa第一个app 1

Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 1


当用户在文本框中输入长度大于4的文本时,下方的列表就会显示和用户输入字符长度相同的“搜索结果”(为了保持简单,这里就直接生成了一些字符串,而不是去调用搜索引擎的API)。并且只有当用户的输入在0.5秒中没有变化时,动作才会被触发。由于非常简单,不考虑错误处理。由于真正的Web API需要访问网络,引发异步事件,这个程序如果使用普通的方法将具有相当的复杂性。

程序内部将采用管道式,数据流经过管道之后最终将被一个UITableView显示。由于Swift中变量绑定的问题,程序并未采用MVVM设计模式,代码中的ViewModel只是一个保存数据的容器。(未来将会改进为MVVM模式,更多MVVM模式的知识也可以在敏捷大拇指上查到。)




那么就 开始吧!



第一步

建立一个iOS工程,类型是Single View Application,设备选择iPhone(方便UI设计),语言选择swift。




3、安装ReactiveCocoa

ReactiveCocoa官方推荐使用Carthage安装。(当然CocoaPod用不了,原因你懂的)Carthage安装外部库的操作非常简单:

  • 打开终端,定位到工程的根目录下(即*.xcodeproj所在的地方),使用文本编辑器建立一个Cartfile

    在终端输入nano Cartfile 在新建立的文件中加入一行github "ReactiveCocoa/ReactiveCocoa" Control-O保存,Control-X离开 回到终端,输入命令carthage update 等待Carthage下载并编译框架 (如果尚未安装Carthage,可以到官网下载二进制文件,或者用Homebrew:brew install carthage)
  • 打开工程文件,在General选项卡下加入刚刚编译出的framework文件(注意到还有一个Result.framework):

    Swift, ReactiveCocoa第一个app 2

    Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 2

  • 在Build Phases选项卡下加入一个新的Run Script,并添加文件,最终看起来应该是这样(命令需要手工输入 如果不说Homebrew安装的Carthage,路径可能不一样):

    Swift, ReactiveCocoa第一个app 3

    Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 3

  • 现在框架已经引入完了,可以试验一下,到ViewController.swift中输入import R,Xcode的自动补全应当在这时给出ReactiveCocoa的提示,那就说明安装完成了





4、设计UI,编写Table View的代码

UITableView是UIKit中操作较为复杂的一个,但这个特性也让它可以不需要绑定就直接使用ReactiveCocoa的特性,因此在这里选用它来做介绍。

不了解UITableView的操作并不影响接下去的阅读,因为所有操作都被说明了

首先打开Main.storyboard,向场景中拖入一个Text Field。设置AutoLayout:左20,右20,上0。再拖入一个Table View,放在Text Field下方,设置AutoLayout:左20,右20,下20,上8。再拖入一个Table View Cell放在Table View里面,拖入一个Label放在Cell里面,设置AutoLayout:竖直居中,左50。整个场景看上去应该像这样:

Swift, ReactiveCocoa第一个app 4

Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 4


之后,在StoryBoard中设置Cell的identifier为ResultCell。我们将在之后编写完Cell的代码之后改变这个Cell的其他属性。如图:

Swift, ReactiveCocoa第一个app 5

Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 5


接下来我们就来编写Table View的代码。

首先是Cell:

  • 新建一个swift文件,命名为TableViewCell.swift
  • 定义一个类:TableViewCell,声明为UITableViewCell的子类,并且用Interface Builder连接之前在storyboard里面创建的Cell中的Label。加入一个字符串常量,和之前输入的identifier一样。最终看起来应该是这样(作者使用了自己的类前缀LF):

    Swift, ReactiveCocoa第一个app 6

    Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 6

  • 在storyboard中更改Cell的类型:

    Swift, ReactiveCocoa第一个app 7

    Swift, ReactiveCocoa第一个app - 敏捷大拇指 - Swift, ReactiveCocoa第一个app 7



这样,Cell的就定义好了。这可以被很容易地改为更复杂的情形。

之后是Table View本身的代码。UITableView采用了Data Source - Update的模式。这种模式的实现需要一个Data Source。

在作者的实现中,需要先有一个ViewModel来封装数据。为此,建立一个swift文件,名为MainViewModel.swift,并加入以下代码:

[Swift] 纯文本查看 复制代码
struct MainViewModel {
    var resultCount: Int!
    var results: [String]!
    
    static func isValidSearchString(text text: String) -> Bool {
        return text.characters.count > 4
    }
    
    static func produceSearchResult(text text: String) -> [String] {
        return (1...text.characters.count).map {
            i in
            return "somebody \(i)"
        }
    }
}


这里定义了封装数据的格式,并提供了两个辅助函数。

在这个例子中这两个函数相当简单,但是随着代码变得复杂,把操作聚合起来是很有利的。

之后新建一个swift文件,命名为ResultViewController.swift,加入以下代码:

[Swift] 纯文本查看 复制代码
import UIKit

class LFResultViewController: NSObject, UITableViewDataSource {
    var viewModel = MainViewModel()
    
    @objc func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return viewModel.resultCount
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        var cellRetired = tableView.dequeueReusableCellWithIdentifier(LFTableViewCell.identifier) as? LFTableViewCell
        if cellRetired == nil {
            cellRetired = LFTableViewCell(style: .Default, reuseIdentifier: LFTableViewCell.identifier)
            cellRetired?.outputLabel = UILabel()
        }
        cellRetired?.outputLabel.text = self.viewModel.results[indexPath.row]
        return cellRetired!
    }
}


这里实现了Table View更新时需要的数据的方法。具体的关于UITableViewDataSource协议的内容可以查看Apple的官方文档。

这个模式看起来比较复杂,不像其他控件那样直截了当的就是赋值。但这种模式对响应式编程和MVVM模式特别有利,作者在未来可能会为整个UIKit开发这样的接口来避免使用keypath。




5、构建管道

这里先贴出ViewController.swift中其他部分代码:

[Swift] 纯文本查看 复制代码
import UIKit
import ReactiveCocoa

class ViewController: UIViewController {
    @IBOutlet weak var outputTableView: UITableView!

    @IBOutlet weak var searchTextInput: UITextField!
    
    var resultViewController = LFResultViewController()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        self.resultViewController.viewModel.resultCount = 0
        self.resultViewController.viewModel.results = []
        self.outputTableView.dataSource = self.resultViewController
        self.outputTableView.reloadData()
    }

}


最关键的部分开始了!

RayWenderlich.com上的教程中使用了Signal,但是在swift中,ReactiveCocoa的开发者并没有提供泛型的Signal,而使用AnyObject来和Objective C兼容。但这个严重损伤了代码的可读性,也让bug有了遁身之处。因此在这里,我们将使用SignalProducer,这样可以使用swift的类型检查来杜绝bug。

在viewDidLoad中加入以下代码:

[Swift] 纯文本查看 复制代码
let searchText = searchTextInput.rac_textSignal()
            .toSignalProducer()
            .map {text in text as! String}


map函数把一个集合类型(Array例如)中的元素逐一操作,并返回新的元素构成的集合类型。用Array举例可以清楚地解释这一切。(不恰当地说,你可以把SignalProducer当成一个Array,startWithNext就相当于for-in)

[Swift] 纯文本查看 复制代码
[1, 2, 3, 4].map {$0 * 2} //[2, 4, 6, 8]


这里把一个RACSignal转化成了一个SignalProducer,并且这个是有类型检查的。为了更好地使用类型检查,我们把原本的SignalProducer<AnyObject, NSError>转化成了一个SignalProducer<String, NSError>。在这里,作者想说,Xcode编辑器的类型检查可以很好的帮助我们避免一些问题。尤其是在接下来构造Monad结构时,常常可以三指点按(即LookUp手势)来查看构造出来的对象的类型。这可以帮助理清楚Monad每一步的流程。

接下来,我们有了用来搜索的文本,我们要先执行一些过滤。在viewDidLoad中加入以下代码:

[Swift] 纯文本查看 复制代码
searchText.filter(MainViewModel.isValidSearchString)


还是用Array举例说明:

[Swift] 纯文本查看 复制代码
[1, 2, 3, 4].filter {$0 % 2 == 0} //[2, 4]


这样,我们就用之前定义的过滤函数来检查字符串是否是合法的搜索字符串。这个方法输出的还是一个SignalProducer<String, NSError>。

我们还需要做一点过滤,也就是说,只有当用户输入在500毫秒内没有变化时,更新才会被触发。为此我们需要throttle函数。在之前那句话下面加上

[Swift] 纯文本查看 复制代码
.throttle(0.5, onScheduler: QueueScheduler.mainQueueScheduler)


注意前面的点。我们事实上是在调用上一步结果的一个方法。这就是Monad的特点:流畅接口。每一步都会构造一个对象,下一步调用它的方法。Xcode似乎并不喜欢Monad结构,缩进做得很差。Xcode 8和Xcode Extension或许可以解决这个问题,但是现在还得手工格式化。还有swift编译器在处理链式调用时会出现一些问题,最常见的是报错:Expression too complex to be resolved in reasonable time. 这种时候只需要在链式调用的每个点之前换一行就可以了。这也是推荐的用法。

接下来是传统方法最费力一部分了:异步请求。(Accept the fact that we are living in a asynchronous world)所幸ReactiveCocoa提供了一个良好的方法来解决这个问题:把它们包装成SignalProducer。但是我们在这里遇到一个问题:如果用map并且返回一个SignalProducer,我们将会在下一步得到一个SignalProducer<SignalProducer<([String], Int), NoError>, NoError>。这显然不是我们想要的。这里就要介绍flatMap函数了。先看Array的举例:

[Swift] 纯文本查看 复制代码
[1, 2, 3, 4].map {[$0]} //[[1], [2], [3], [4]]
[1, 2, 3, 4].flatMap {[$0]} //[1, 2, 3, 4]


也就是说,flatMap方法会自动“剥掉一层”。加上代码:

[Swift] 纯文本查看 复制代码
            .flatMap(.Latest) {
                (text: String) in
                return SignalProducer {
                    (o: Observer<([String], Int), NoError>, c: CompositeDisposable) in
                    let rst = MainViewModel.produceSearchResult(text: text)
                    let cnt = rst.count
                    o.sendNext((rst, cnt))
                    o.sendCompleted()
                }
            }


通过这个flatMap,我们把原来的SignalProducer<String, NSError>转化成了SignalProducer<([String], Int), NoError>。(注意使用NoError类型需要包含Result框架)

现在,我们有了“搜索结果”,可以去显示了。

加上代码:

[Swift] 纯文本查看 复制代码
            .observeOn(UIScheduler())
            .startWithNext {
                [weak self] (x: ([String], Int)) in
                if let strong = self {
                    strong.resultViewController.viewModel.resultCount = x.1
                    strong.resultViewController.viewModel.results = x.0
                    strong.outputTableView.reloadData()
                }
            }


这里有两个要说明的地方:一是在iOS上只有主线程可以更新UI,因此我们需要借助UIScheduler来把工作转移到主线程。还有为了避免循环引用,我们需要声明一个[weak self] 来告诉编译器我们不希望闭包持有对self的引用。详细说明

最终,viewDidLoad函数应该看起来像这样:

[Swift] 纯文本查看 复制代码
override func viewDidLoad() {
        super.viewDidLoad()
        self.resultViewController.viewModel.resultCount = 0
        self.resultViewController.viewModel.results = []
        self.outputTableView.dataSource = self.resultViewController
        self.outputTableView.reloadData()
        
        let searchText = searchTextInput.rac_textSignal()
            .toSignalProducer()
            .map {text in text as! String}
        searchText.filter(MainViewModel.isValidSearchString)
            .throttle(0.5, onScheduler: QueueScheduler.mainQueueScheduler)
            .flatMap(.Latest) {
                (text: String) in
                return SignalProducer {
                    (o: Observer<([String], Int), NoError>, c: CompositeDisposable) in
                    let rst = MainViewModel.produceSearchResult(text: text)
                    let cnt = rst.count
                    o.sendNext((rst, cnt))
                    o.sendCompleted()
                }
            }
            .observeOn(UIScheduler())
            .startWithNext {
                [weak self] (x: ([String], Int)) in
                if let strong = self {
                    strong.resultViewController.viewModel.resultCount = x.1
                    strong.resultViewController.viewModel.results = x.0
                    strong.outputTableView.reloadData()
                }
            }
    }


编译运行,程序如预期执行。




6、写在后面

ReactiveCocoa代表了一种全新的方式。它的核心就在于:“高聚合 低耦合” 同时具有强大的异步处理能力。

Forget dispatch_async, let's startWithNext.

关于“高聚合 低耦合”可以查看敏捷大拇指上的《到底什么是设计模式?其实全tm是套路,设计模式之六大原则






作者:schurin

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

1起来 发表于 2016-6-23 18:26:40 | 显示全部楼层
赞!实战!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表