理解 RxSwift:MVVM(三)

3,560 阅读5分钟

理解 RxSwift:为什么要使用 RxSwift(一)

理解 RxSwift:实现原理(二)

理解 RxSwift:MVVM(三)

理解 RxSwift:单元测试(四)

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

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

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

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

源码地址:github.com/superzcj/Rx…

Demo

image.png

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

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

准备

首先,把 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)
    }
}