阅读 103

Combine 与 MVVM

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

理解 RxSwift:实现原理(二)

理解 RxSwift:MVVM(三)

理解 RxSwift:单元测试(四)

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

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

Demo 源码地址:github.com/superzcj/Co…

Demo

image.png

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

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

准备

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

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

如果你熟悉 RxSwift,那么 Combine 理解起来会更容易,两者有比较相似的概念,详细对比可以看看以下文章 github.com/freak4pc/rx…

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<DrugCellViewModel, Never>
    var editPublisher: AnyPublisher<DrugCellViewModel, Never>

    private let deleteHeadingPublisher: PassthroughSubject<DrugCellViewModel, Never>
    var deletePublisher: AnyPublisher<DrugCellViewModel, Never>

    
    init(drugModel:DrugModel) {
        self.drugModel = drugModel
        
        editHeadingPublisher = PassthroughSubject<DrugCellViewModel, Never>()
        editPublisher = editHeadingPublisher.eraseToAnyPublisher()
        
        deleteHeadingPublisher = PassthroughSubject<DrugCellViewModel, Never>()
        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)
    }
}
复制代码