Swift纯Code之旅 Day19. 「ViewController好乱(1) - MVC介绍)」

前言

做到现在会发现每个ViewController内的程序码都一大堆，有画面元件，有逻辑，有Model，
在阅读上面真的很不友善。
因此今天就要来将他们分类分类，首先会将画面元件给分离出去。

苦口婆心

MVC网路上有很多教学了，我也来用我的方式来用我的理解跟各位分享一下MVC的概念，
MVC呢，就是将一个画面分成「 Model(管理Model)」、「 View(管理画面) 」、「 Controller(管理逻辑)」，

这样的好处是：

当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)
        }
    }
}

实作出来的效果如下：