专栏名称: Bo_Bo
今天看啥  ›  专栏  ›  Bo_Bo

RxSwift之双向绑定实战

Bo_Bo  · 掘金  ·  · 2019-08-14 05:30

文章预览

阅读 47

RxSwift之双向绑定实战

什么是双向绑定?双向绑定是View与Model之间的一种相互响应的关系。

下面👇以一个Demo实战来体验一下双向绑定带来的快感!!!

Demo要实现的功能比较简单:在搜索框中输入搜索内容 -> 发起网络请求获取搜索结果 -> 在tableView中展示搜索结果。 PS:UI代码请小伙伴随意脑补,就不赘述啦

1、创建ViewModel

在UI搭建好之后,需要创建一个ViewModel类,来响应UI的变化。

class BOViewModel: NSObject {

    // 响应SearchBar的输入
    let searchTextOB = BehaviorSubject(value: "")
}
复制代码

添加属性 searchTextOB 来响应输入框的输入变化,同时为了能在收到响应后,发起网络请求,所以使用了 BehaviorSubject类型。毕竟,Subject 类型可以是序列,也可以是观察者。

2、绑定UI到Model

class TBViewController: UIViewController {

    @IBOutlet weak var searchBar: UISearchBar!
    
    @IBOutlet weak var tableView: UITableView!
    
    let viewModel = BOViewModel()
    
    let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 实现 view -绑定-> model
        self.searchBar.rx.text.orEmpty
            .bind(to: self.viewModel.searchTextOB)
            .disposed(by: self.disposeBag)
    }
}
复制代码

使用 bind 函数,完成输入框绑定到Model。

3、创建懒加载搜索结果序列

lazy var searchData: Driver<[BOReposityModel]> = {
    
}()
复制代码

为了只产生一个可观察序列,所以使用懒加载。不需要错误处理,所以使用 Driver 对象。

在懒加载内部,将 searchTextOB 作为可观察序列订阅。即在 searchTextOB 收到外界输入框的输入变化时,同步发送信号,发起网络请求。

lazy var searchData: Driver<[BOReposityModel]> = {
    
    return self.searchTextOB.asObservable()
        // 每隔300毫秒请求一直,并且在主线程发起请求 
        .throttle(0.3, scheduler: MainScheduler.instance)
        // 阻止发送相同的信号
        .distinctUntilChanged()
        .flatMapFirst(BOViewModel.requestData)
        // 如果出错,则返回空数组
        .asDriver(onErrorJustReturn: [])
}()
复制代码
  • 为了防止请求过快,所以间隔300毫秒才在主线程发起一起请求。
  • 除非接收到不一样的信号,才会发起响应。
  • 而且还做了错误处理,如果出错了,则返回空数组。
  • flatMapFirst 函数接收一个闭包作为参数,但其实闭包也是一个函数,所以这里传入一个函数作为参数也是可以的。

4、发起网络请求

本例中使用的请求地址为:api.github.com/users/(gith…

在发起网络请求之前需要先判断传入的参数是否为空,已经网络地址是否正确。如果有错误,则返回空数组。

static func requestData(_ githubId: String) -> Observable<[BOReposityModel]> {
    
    guard !githubId.isEmpty, let url = URL(string: "https://api.github.com/users/\(githubId)/repos") else {
        
        return Observable.just([])
    }
    
    return URLSession.shared.rx.json(url: url)
        .retry()
        .observeOn(ConcurrentDispatchQueueScheduler(qos: .background))
        .map(BOViewModel.parseData)
}
复制代码

使用 URLSession 发起异步网络请求,并且对请求的结果进行数据解析。

5、数据解析

class BOReposityModel: HandyJSON {

    var name: String = ""
    var url: String  = ""
    
    required init() {}
}
复制代码
static func parseData(_ json: Any) -> [BOReposityModel] {
    
    guard let datas = json as? [[String: Any]] else { return [] }
    
    guard let result = [BOReposityModel].deserialize(from: datas) else { return [] }
    
    return result as! [BOReposityModel]
}
复制代码

这里使用了一个三方库 HandyJSON 进行数据解析,小伙伴也可以根据自己的喜好和习惯,选择自己熟悉的数据解析方式。

6、绑定Model到UI

请求到数据以后,就需要将数据展示到页面上。

1、展示搜索结果数量到导航栏上

// 实现 model -绑定-> view
self.viewModel.searchData.map { (array) -> String in
    return "共\(array.count)个结果"
    }
    .drive(self.navigationItem.rx.title)
    .disposed(by: self.disposeBag)
复制代码

2、展示结果到tableView列表上

// 实现 model -绑定-> view
self.viewModel.searchData.drive(self.tableView.rx.items){
    (tableView, row, model) in
    
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell") as! BOTableViewCell
    
    cell.nameLabel.text = model.name
    cell.urlLabel.text = model.url
    
    return cell
    }
    .disposed(by: self.disposeBag)
复制代码

searchData 作为请求结果序列,直接驱动 tableView 的显示刷新。

附个demo图:UI太丑,勿喷

使用这样的方式,无需再实现 UITableViewdelegatedataSource 协议方法。是不是简单很多?

RxSwift已经帮我们封装好了UITableView的代理协议,所以我们可以更专注于业务层以及UI层面,而不再需要各种冗余的代码。

使用 RxSwift 双向绑定来实现简单的搜 Demo,ViewController 中的代码不过区区60行左右,如果使用非RxSwift的方式,代码至少百行。这仅仅是计算Controller中的代码,还不包括ViewModel。这么好用的框架此时不用,更待何时?

好的框架需要学习,好的技术需要实战。

………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览