在上一篇文章中，我们介绍了 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<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)
}
}
网友评论