Combine 与 MVVM

在上一篇文章中，我们介绍了 RxSwift 结合 MVVM 进行 APP 开发，通过 RxSwift 实现了数据与视图的绑定，使 View 与 ViewModel 能够自动同步。

在 WWDC 2019 上，苹果新推出了一套函数响应式编程框架 Combine，它的设计思想借鉴于 Rx 系列，跟 RxSwift 一脉相承。今天来尝试用 Combine 结合 MVVM，用两种框架写同一个 demo，对比看看 Combine 这个框架有什么不同之处。

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

Demo

image.png

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

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

准备

Combine 是苹果的响应式编程框架

Combine框架提供了一个声明性的Swift API，用于随时间处理值。这些值可以表示用户界面事件，网络响应，计划事件和许多其他类型的异步数据。

如果你熟悉 RxSwift，那么 Combine 理解起来会更容易，两者有比较相似的概念，详细对比可以看看以下文章
https://github.com/freak4pc/rxswift-to-combine-cheatsheet

Combine 已经集成到开发框架中，无需单独引用，直接使用

import Combine

ViewModel

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

最终，输入的数据包括三个事件：reloadDataSource、editDrugCount和deleteDrug。

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

    @Published var items: [DrugCellViewModel] = []
    @Published var totalCount: String = ""

    func reloadDataSource() 
    func editDrugCount(item: DrugCellViewModel)
    func deleteDrug(item: DrugCellViewModel)

当 reloadDataSource 事件触发时，向后端请求接口，拿到数据后传给 elements。这里并没有直接地发起接口请求，而是从本地记录读取数据。

当 editDrugCount 操作被触发时，重新生成药品列表数据，根据带入的cell model 替换匹配到的 model，得到新的药品列表数据。

当 deleteDrug 操作被触发时，移除带入的 cell model，生成新的药品列表数据。

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

    func reloadDataSource() {
        self.request().sink { (items) in
            self.items = items
            self.totalCount = self.getTotalCount(items: items)
        }
    }
    
    func editDrugCount(item: DrugCellViewModel) {
        var arr = [DrugCellViewModel]()
        for model in self.items {
            if model.drugModel.drugId == item.drugModel.drugId {
                arr.append(item)
            } else {
                arr.append(model)
            }
        }
        self.items = arr
        self.totalCount = self.getTotalCount(items: self.items)
    }
    
    func deleteDrug(item: DrugCellViewModel) {
        if let index = self.items.firstIndex(of:item) {
            self.items.remove(at:index)
            self.totalCount = self.getTotalCount(items: self.items)
        }
    }

    func getTotalCount(items: [DrugCellViewModel]) -> String {
        var sum = 0;
        var priceSum = 0.00;

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

ViewController

在 ViewController 中，我们用一个 tableView 展示药品列表。

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

    var viewModel: DrugViewModel = DrugViewModel()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        configView()
        setupViewModel()
        
    }

根据用户的三个操作事件：reloadDataSource、editDrugCount 和 deleteDrug，绑定 tableView 和 viewModel。 items 绑定到 tableView 上，totalCount 绑定到底部 label 上。

func setupViewModel() {
        
        viewModel.$items.receive(on: RunLoop.main).sink { items in
            self.cellViewModels = items
            self.tableView.reloadData()
        }
        viewModel.$totalCount.receive(on: RunLoop.main).sink { value in
            self.titleLabel.text = value
        }
        
        viewModel.reloadDataSource()
    }

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

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return cellViewModels.count;
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: CellIdentifiers.DrugTableViewCell, for: indexPath)
       
        if let cell = cell as? DrugTableViewCell {
            let rowViewModel = cellViewModels[indexPath.row]
            print(rowViewModel)
            cell.setup(viewModel: rowViewModel)
            rowViewModel.editPublisher.receive(on: RunLoop.main).sink { vm in
                self.viewModel.editDrugCount(item: vm)
            }
            
            rowViewModel.deletePublisher.receive(on: RunLoop.main).sink { vm in
                self.viewModel.deleteDrug(item: vm)
            }
            
        }
        return cell
    }

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.drugModel.drugName
        textField.text = "\(viewModel.drugModel.drugCount)"
        drugPriceLabel.text = "\(viewModel.drugModel.maxPrice)元"
    }

DrugCellViewModel 拥有一个该Cell 对应的 DrugModel，在接收到从 ViewController 传来的事件时，修改 DrugModel 并传递回调事件。

为了简化异步事件回调，这里使用 AnyPublisher 包装对象并使用PassthroughSubject 产生异步事件。以 editPublisher 为例，当用户点击增加或减少药品数量按钮时，editHeadingPublisher 发送一个事件，参数为自身。

class DrugCellViewModel: NSObject {
    
    var drugModel: DrugModel
    
    private let editHeadingPublisher: PassthroughSubject
    var editPublisher: AnyPublisher

    private let deleteHeadingPublisher: PassthroughSubject
    var deletePublisher: AnyPublisher

    
    init(drugModel:DrugModel) {
        self.drugModel = drugModel
        
        editHeadingPublisher = PassthroughSubject()
        editPublisher = editHeadingPublisher.eraseToAnyPublisher()
        
        deleteHeadingPublisher = PassthroughSubject()
        deletePublisher = deleteHeadingPublisher.eraseToAnyPublisher()
    }
    
    func addDrug() {
        self.drugModel.drugCount += 1
        
        editHeadingPublisher.send(self)
    }

    func minusDrug() {
        if drugModel.drugCount > 0 {
            self.drugModel.drugCount += 1
            editHeadingPublisher.send(self)
        }
    }

    func deleteDrug(){
        deleteHeadingPublisher.send(self)
    }
}