做到現在會發現每個ViewController內的程式碼都一大堆,有畫面元件,有邏輯,有Model,
在閱讀上面真的很不友善。
因此今天就要來將他們分類分類,首先會將畫面元件給分離出去。
MVC網路上有很多教學了,我也來用我的方式來用我的理解跟各位分享一下MVC的概念,
MVC呢,就是將一個畫面分成「 Model(管理Model)」、「 View(管理畫面) 」、「 Controller(管理邏輯)」,
這樣的好處是:
若沒分類的話,就會在同一個ViewController找問題,那就如同海底撈針一樣,費時又費神又費玉清,
講這麼多,那該如何分類呢?
我們就先不用原先的專案來實作分類了,怕太複雜。
因此先創建一個小專案「MVCTest」來實作分類(創專案可以參考前面文章)
首先建立一個「MVCTestViewController」
import UIKit
import SnapKit
class MVCTestViewController: UIViewController {
// MARK: - Properties
let textField: UITextField = {
let textField = UITextField()
textField.placeholder = "請輸入文字"
textField.layer.borderWidth = 1
textField.layer.cornerRadius = 10
textField.borderStyle = .roundedRect
return textField
}()
let button: UIButton = {
let button = UIButton()
button.largeContentTitle = "123"
button.setTitle("按我", for: .normal)
button.setTitleColor(.brown, for: .normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
return button
}()
let label: UILabel = {
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 40)
label.textAlignment = .center
label.textColor = .systemBlue
label.layer.borderWidth = 1
label.layer.borderColor = UIColor.systemBlue.cgColor
label.layer.cornerRadius = 30
return label
}()
// MARK: - Life Cycle
override func viewDidLoad() {
self.view.backgroundColor = .white
super.viewDidLoad()
setViews()
setLayouts()
}
// MARK: - Function
@objc func buttonAction() {
self.label.text = self.textField.text
}
func setViews() {
self.view.addSubview(textField)
self.view.addSubview(button)
self.view.addSubview(label)
}
func setLayouts() {
textField.snp.makeConstraints { make in
make.top.equalTo(self.view.safeAreaLayoutGuide).offset(50)
make.centerX.equalTo(self.view)
make.width.equalTo(300)
make.height.equalTo(40)
}
button.snp.makeConstraints { make in
make.top.equalTo(textField.snp.bottom).offset(30)
make.centerX.equalTo(self.view)
make.height.equalTo(40)
make.width.equalTo(100)
}
label.snp.makeConstraints { make in
make.height.equalTo(100)
make.width.equalTo(300)
make.top.equalTo(button.snp.bottom).offset(100)
make.centerX.equalTo(self.view)
}
}
}
實作出來的效果如下:
光這樣一個小小的功能,ViewController內的程式碼就快100行了
那你說如果是大專案,要修Bug不是海底撈針嗎?
那明天呢,我們就會開始進行MVC整理術,看看整理完後的Code會變得如何吧