理解 RxSwift：为什么要使用 RxSwift（一）

理解 RxSwift：实现原理（二）

理解 RxSwift：MVVM（三）

理解 RxSwift：单元测试（四）

当我们的APP交互复杂、逻辑复杂时，ViewController 就会变得十分臃肿，大量的代码填充其中，使得 ViewController 承担的职责过多。臃肿的 ViewController 难以理解，难以维护，难以扩展，增加了后续开发的复杂度，降低了整体开发的效率。

现在流行的解决方案是 MVVM 架构，它在 MVC 的基础上引入了 ViewModel，数据展示、样式定制等数据转换操作就移到其中。这样 ViewController 只需要负责数据调配，承担的职责减轻了，臃肿的情况自动就消失了。

RxSwift 提供了绑定机制，让数据与视图自动同步，一方有变化，自动通知另一方更新，避免了编写大量繁琐的命令式绑定代码。

下面我们写一个 demo，看看 RxSwift 结合 MVVM 是如何为 ViewController 瘦身的。

源码地址：https://github.com/superzcj/RxSwiftMVVMDemo

Demo

这是一个添加中草药的页面，每种药品都有数量和价格，底部汇总所选药品的种类、数量和总价。用户可以增加、减少或删除药品。每个操作都会让底部汇总价格信息刷新。

当首次进入时，从后端加载默认的药品列表，改动任一药品，自动同步底部汇总价格信息。

准备

首先，把 RxSwift 添加到项目中。我们通常使用 Cocoapods 管理第三方依赖库。在 pod 文件中，添加以下代码：

  pod 'RxSwift'
  pod 'RxCocoa'
  pod 'RxDataSources'

RxCocoa 是 RxSwift 的一部分，主要是 UI 相关控件的 Rx 封装，如控件的绑定功能。RxDataSources包括与UITableView和UICollectionView相关的绑定功能。

ViewModel

ViewModel 将输入的数据转换加工成另一种数据。在这个 demo 中，页面打开时从后端加载默认的列表接口，我们可以当成一个事件 reload，在 viewDidLoad执行时触发；当点击 cell 上的增加或减少按钮时，改变选择药品的数量，我们也可以当成一个事件 editTrigger；当点击 cell 上的删除按钮，移除这条药品，deleteTrigger 表示这样的操作。最终，输入的数据包括三个事件：reload、editTrigger和deleteTrigger。

这三个事件都是 PublishSubject 类型，作为一个可监听序列，当监听到事件触发时，做出响应。

输出的数据有两个，items 代表药品列表，totalCount 代表要展示的汇总信息。

BehaviorRelay 是一个序列，它有一个value 属性，通过这属性能拿到最新的值。而通过它的 accept() 方法可以对值进行修改，并能够将修改的值发送出去。Driver 是一个特别的序列，它是为了简体 UI 层的代码，它不会产生 error 事件，且一定在 MainScheduler 监听。

    struct Input {
        let reload: PublishSubject<[DrugCellViewModel]>
        let editTrigger: PublishSubject<DrugCellViewModel>
        let deleteTrigger: PublishSubject<DrugCellViewModel>
    }
    
    struct Output {
        let items: BehaviorRelay<[DrugCellViewModel]>
        let totalCount: Driver<String>
    }

transform 方法将输入转换成输出，首先定义一个BehaviorRelay类型的序列，用于存储药品列表数据。当 input.reload 事件触发时，向后端请求接口，拿到数据后传给 elements。当 input.editTrigger 操作被触发时，重新生成药品列表数据，根据带入的cell model替换匹配到的model，得到新的药品列表数据。当 input.deleteTrigger 操作被触发时，移除带入的 cell model，生成新的药品列表数据。

totalCount 又是基于 elements 计算而得，遍历 elements 数组内的元素，找出药品种类、数量和单价，从而计算出最终的汇总价格数据。

func transform(input: Input) -> Output {
        let elements = BehaviorRelay<[DrugCellViewModel]>(value: [])

        input.reload.flatMapLatest({ (item) -> Observable<[DrugCellViewModel]> in
            return self.request()
        }).subscribe(onNext: { (items) in
            elements.accept(items)
        }).disposed(by: self.disposeBag)

        input.editTrigger.subscribe(onNext: { (item) in
            var arr = [DrugCellViewModel]()
            for model in elements.value {
                if model.drugId == item.drugId {
                    arr.append(item)
                } else {
                    arr.append(model)
                }
            }
            elements.accept(arr)
        }).disposed(by: self.disposeBag)
        
        input.deleteTrigger.subscribe(onNext: { (item) in
            if let index = elements.value.firstIndex(of:item) {
                var arr = elements.value
                arr.remove(at:index)
                elements.accept(arr)
            }
        }).disposed(by: self.disposeBag)
        
        let totalCount = elements.map({ (items) -> String in
            
            var sum = 0;
            var priceSum = 0.00;

            for cellViewModel in items {
                sum += cellViewModel.drugCount
                let price : Double =  (cellViewModel.maxPrice) * Double(cellViewModel.drugCount)
                priceSum += price
            }
            return "共\(items.count)味药，\(sum)g，药品参考总价:\(priceSum)元"
        }).asDriver(onErrorJustReturn: "")

        return Output(items: elements, totalCount: totalCount)
    }

ViewController

在 ViewController 中，我们使用 RxSwift 绑定 tableView 数据源。

首先定义一个变量 DrugViewModel，并在 viewDidLoad 方法中，初始化视图和数据绑定

    var viewModel: DrugViewModel = DrugViewModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        configView()
        setupViewModel()
        
        reloadSubject.onNext([])

    }

根据用户的三个操作事件：reloadSubject、editTrigger 和 deleteTrigger，得到输出数据 output。然后将 output.items 绑定到 tableView 上，output.totalCount 绑定到底部 label 上。

配置药品 cell 时，cell 有两个回调，增加或减少数量回调和删除回调，这两个回调触发时，分别向 viewModle 发送 editSubject 和 deleteTrigger 操作信号。

    func setupViewModel() {        
        let input = DrugViewModel.Input(reload: reloadSubject, editTrigger: editSubject, deleteTrigger: deleteTrigger )

        let output = viewModel.transform(input: input)
        
        output.totalCount.drive(onNext: { (content) in
            self.titleLabel.text = content
        }).disposed(by: disposeBag)
        
        output.items.map({ (items) -> [DrugCellViewModel] in
            self.cellViewModels = items
            return items
        }).asDriver(onErrorJustReturn: []).drive(tableView.rx.items(cellIdentifier: CellIdentifiers.DrugTableViewCell, cellType: DrugTableViewCell.self)) { index, viewModel, cell in
                let rowViewModel = self.cellViewModels[index]

                cell.setup(viewModel: rowViewModel)
                
                rowViewModel.numberButtonTapped.asObserver().subscribe(onNext: { (drugCellViewModel) in
                    self.editSubject.onNext(drugCellViewModel)
                }).disposed(by: self.disposeBag)
                
                rowViewModel.deleteButtonTapped.asObserver().subscribe(onNext: { (drugCellViewModel) in
                    self.deleteTrigger.onNext(drugCellViewModel)
                }).disposed(by: self.disposeBag)

        }.disposed(by: self.disposeBag)
    }

CellViewModel 和 Cell

对于这个药品列表中的 Cell，它持有一个属性 DrugCellViewModel，在初始化时，把 cellViewModel 与 View 进行绑定

    private var viewModel: DrugCellViewModel?
    public func setup(viewModel:DrugCellViewModel?) {
        self.viewModel = viewModel
        configureView()
    }
    
    private func configureView() {
        guard let viewModel = viewModel else { return }
        drugNameLabel.text = viewModel.drugName
        textField.text = "\(viewModel.drugCount)"
        drugPriceLabel.text = "\(viewModel.maxPrice)元"
    }

DrugCellViewModel 拥有一个该 Cell 对应的 DrugModel，在接收到用户点击事件时，修改 DrugModel 并传递回调事件。

numberButtonTapped 和 deleteButtonTapped 是两个回调事件，在 Cell 上的按钮被点击时触发，参数为自身。


class DrugCellViewModel: NSObject {
    
    var drugModel: DrugModel
    var drugCount:Int

    var numberButtonTapped = PublishSubject<DrugCellViewModel>()
    var deleteButtonTapped = PublishSubject<DrugCellViewModel>()
    
    init(drugModel:DrugModel) {
        self.drugModel =  drugModel
        drugCount = drugModel.drugCount
    }
    
    func addDrug() {
        self.drugModel.drugCount += 1
        drugCount+=1
        numberButtonTapped.onNext(self)
    }

    func minusDrug() {
        if drugCount > 0 {
            drugCount-=1
            self.drugModel.drugCount -= 1
        }
        numberButtonTapped.onNext(self)
    }

    func deleteDrug(){
        deleteButtonTapped.onNext(self)
    }
}