什么是MVC
MVC是一个常用、基本的设计模式,能将数据、UI、控制器的逻辑分开,有利于后续对APP的修改与维护,针对改变的部分作出修改即可,不需要进行太多的改动,采用MVC设计模式可以保障我们的代码可组织性和可管理性
- M:数据模型Model,负责处理数据
- V:视图View,负责显示数据,监听事件
- C:控制器Controller,负责业务逻辑,事件响应,数据更新
Model与View是不能相互通信的,只能在Controller获取到数据之后传递给View,Controller在它们两者之间就是一个信息传递的桥梁
以本人日常记录的Demo为例
这是一个可以展开并勾选的UITableView
//Model
import Foundation
final class CheckBoxRow {
let text: String
var isChecked: Bool
init(text: String, isChecked: Bool) {
self.text = text
self.isChecked = isChecked
}
}
final class CheckBoxSection {
var expand: Bool
let section: String
let rows: [CheckBoxRow]
init(expand: Bool, section: String, rows: [CheckBoxRow]) {
self.expand = expand
self.section = section
self.rows = rows
}
}
这个Model有记录section是否展开,row是否勾选的属性,还有section与row的显示内容,Model可以是一个类也可以是一个结构体,根据实际情况而定
View层就是UI,UI需要显示什么就使用什么样的控件并进行布局,再将内容进行显示,它只负责显示与UI布局
class TableViewCell_checkbox: UITableViewCell {
private func setup() {
[topicLabel, checkBoxButton].forEach {
contentView.addSubview($0)
}
checkBoxButton.snp.makeConstraints { (make) in
make.width.height.equalTo(checkBoxWidth)
make.leading.equalToSuperview().inset(24)
make.centerY.equalToSuperview()
}
topicLabel.snp.makeConstraints { (make) in
make.leading.equalTo(checkBoxButton.snp.trailing).offset(8)
make.trailing.greaterThanOrEqualToSuperview().inset(24)
make.centerY.equalTo(checkBoxButton)
}
}
func setupCell(model: CheckBoxRow) {
topicLabel.text = model.text
checkBoxButton.isSelected = model.isChecked
updateTextColor()
}
}
setupCell方法中的mode由Controller调用的时候将数据传入UI层展示
Controller用于获取/设置/更新Model的数据、属性,传入View显示,然后负责点击事件等逻辑
extension ExpandViewController: UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return models[section].expand ? models[section].rows.count : 0
}
func numberOfSections(in tableView: UITableView) -> Int {
return models.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: TableViewCell_checkbox = tableView.dequeueReusableCell(for: indexPath)
let section = models[indexPath.section]
let row = section.rows[indexPath.row]
cell.setupCell(model: row)
return cell
}
}
extension ExpandViewController: ExpandHeaderDelegate {
func didTapSection(header: ExpandHeader, section: Int) {
models[section].expand = !models[section].expand
tableView.reloadSections([section], with: .automatic)
}
}
这里控制cell与section在不同情况下的数量,还有section展开收起的点击事件,更新UI
虽然View和Controller是不同的组件,但是它们基本上是成对打包出现的,所以下面这个图虽然不规范,但是能更好的表现出它们的关系
在MVC结构中,基本所有逻辑都在Controller中进行处理,有一些确实属于Controller,但更多的是所谓的表示逻辑(presentation logic),例如是将Model转换成View可以展示的东西
随着项目的完善,表示逻辑也会越来越多,以至于Controller会变得庞大甚至臃肿,我们可以试着将表示逻辑的部分抽出来,这样就有了介于View/Controller与Model之间的View Model,MVVM结构就此诞生了
什么是MVVM
MVVM是MVC的改良版,为了解决Controller过于臃肿的问题,MVVM的思想试将Controller中UI的表示逻辑与业务逻辑进行分离,抽出一个View Model来处理表示逻辑,Controller只需要处理业务逻辑即可
MVVM与MVC的区别在于ViewModel可以调用Model定义的方法,从Model中获取数据用于View,并对数据进行出来了提供给View直接使用,View又可以向ViewModel发出用户的操作命名来改变Model,实现了双向绑定
在这个Demo中,我们可以把model的赋值、checkbox改变状态的逻辑都放到view model中,如果数据需要进行网络请求,也应该在这里完成网络请求获取数据
class ExpandViewModel {
let models: [CheckBoxSection] = [CheckBoxSection(expand: true, section: "iPhone",
rows: [CheckBoxRow(text: "iPhone 11", isChecked: false),
CheckBoxRow(text: "iPhone 11 Max", isChecked: false),
CheckBoxRow(text: "iPhone 11 Max Pro", isChecked: false),
CheckBoxRow(text: "iPhone X Max Pro", isChecked: false)]),
CheckBoxSection(expand: true, section: "Mac",
rows: [CheckBoxRow(text: "MacBook Air", isChecked: false),
CheckBoxRow(text: "MacBook", isChecked: false),
CheckBoxRow(text: "MacBook Pro", isChecked: false)])]
func changeState(indexPath: IndexPath) -> Bool {
let model = models[indexPath.section]
let row = model.rows[indexPath.row]
row.isChecked = !row.isChecked
return row.isChecked
}
}
如此一来,将显示逻辑与业务逻辑分开Controller就进行了瘦身,看起来简洁了不少
总结
MVC中所有通信都是单向的
-
优点
对Controller进行瘦身,将View内部的细节封装起来了,外界不知道View内部的具体实现 -
缺点
View和Controller依赖于Model
相对于MVVM,Controller会比较臃肿,因为Controller承担的职责比较多
难于写Test,因为业务逻辑都在controller,如果业务逻辑复杂,Test里面就会涉及很多VC之间的跳转
MVVM实现了一种双向绑定机制
-
优点
降低了View和Model之间的耦合;分离了业务逻辑和视图逻辑
更好的写Test,因为我们讲业务逻辑迁移到了view model,我们只需要对view model进行测试即可 -
缺点
View和Model双向绑定导致bug难以定位,两者中的任何一方出现问题,另一方也会出现问题;增加了胶水代码
参考文章
MVVM 介绍
本文demo
mvvm代码将分支切换到
feature/kh/mvvm
即可