使用RXSwift撸一个MVVM架构的Tableview

持续创作，加快成长！这是我参加「日新方案 6 月更文应战」的第3天，点击检查活动概况

前语

又来撸RXSwift了

RXSwift能做的事很多，今日就来完成一个根本的Tableview。看一看RXSwift在实际开发中，有没有给我们供给便当。

仍是先声明 我们运用的版别是

pod 'RxSwift', '~> 5.0'
pod 'RxCocoa', '~> 5.0'

版别比较新，对应曾经的版别，RXSwift有语法上的改变，注意

正文

我们运用的是MVVM方法构建代码 先看目录

第一步： 模型（Model）

我们在Model文件夹下创建一个Product模型

import Foundation
struct Product {
    let imgName: String // 图
    let name: String// 称号
    let price: String// 价格
}

第二步： 视图模型（ViewModel）

我们在 ViewModel 文件夹下创建一个 ProductViewModel 它的效果便是是 View 和 Model 之间的连接器，它能够将获取到的数据传输到 ViewController。

class ProductViewModel {
    let items = PublishSubject<[Product]>()
    func fetchProductList() {
            // 在这里能够做网络恳求
            // 我们就直接用假数据
            let productArray = [
                Product(imgName: "mac", name: "MacBook", price: "100"),
                Product(imgName: "iphone", name: "iPhone Xs", price: "100"),
                Product(imgName: "watch", name: "iWatch", price: "100"),
                Product(imgName: "ipad", name: "iPad", price: "100"),
                Product(imgName: "iphone", name: "iPhone X", price: "100")
            ]
        items.onNext(productArray)
        items.onCompleted()
    }
}

这里解释一下 PublishSubject： 只会发送新的事件给订阅者，订阅之前的事件不会发送。

第三步 视图（view）

我们在view文件夹下创建ProductViewController 继承自 UIViewController （至于为什么ViewController是属于view层的，能够参考MVVM的架构模式）。

在ProductViewController中 我们来编写RXSwift的中心代码。

首先呢，要界说两个特点

private let bag = DisposeBag()
private let viewModel = ProductViewModel()

bag： 是和生命周期相关

viewModel： 便是视图模型拉

然后在viewDidLoad中设置tableview的 Delegate

override func viewDidLoad() {
        super.viewDidLoad()
        // 设置代理
        tableView.rx.setDelegate(self).disposed(by: bag)
        bindTableView()
    }

为什么不设置datasource呢？

往下看 ⬇️⬇️

bindTableView()：便是将数据和tableview进行绑定

再来看bindTableView()里的代码

private func bindTableView() {
        tableView.register(UINib(nibName: "ProductTableViewCell", bundle: nil), forCellReuseIdentifier: "cellId")
        viewModel.items.bind(to: tableView.rx.items(cellIdentifier: "cellId", cellType: ProductTableViewCell.self)) { (row,item,cell) in
            cell.item = item
        }.disposed(by: bag)
        tableView.rx.modelSelected(Product.self).subscribe(onNext: { item in
            print("SelectedItem: \(item.name)")
        }).disposed(by: bag)
        viewModel.fetchProductList()
    }

第一步：先注册cell 。

第二步：将 viewModel.items 绑定到 tableView的cell上，，在RXSwift给的闭包中，进行 cell 的赋值操作，这样就省去了设置Datasource。

第三步：设置点击方法，相同运用RXSwift的方法modelSelected，将点击方法设置到tableview上。

第四步：恳求接口（这里是直接拿假数据）。

到这里，就完成了设置tableview的 Datasource 和 绑定数据的工作，这样一看，确实比曾经的代码量少了许多，还不错。

最后呢 在来看Delegate。

Delegate比较简略，就只设置个高度就行，由于仅仅个简略Demo，就不搞别的了

extension ProductViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 150
    }
}

到这里，一个运用MVVM架构的Tableview就完成了（cell按需能够自己界说，这里就不写了）。

结语

总体来说，运用RXSwift来做Tableview仍是比较迅速的，但是仍是有一点，便是api不熟，查资料比较多。处理方法便是代码块，让你感觉飞起来。不过这个要平时的积累。