應(yīng)用MVVM.gif

簡(jiǎn)介

MVVM是Model-View-ViewModel的簡(jiǎn)寫(xiě)，是由MVP（Model-View-Presenter）模式與WPF結(jié)合的應(yīng)用方式時(shí)發(fā)展演變過(guò)來(lái)的一種新型架構(gòu)框架。
Model 用來(lái)獲取數(shù)據(jù)并建立實(shí)體模型和基本的業(yè)務(wù)邏輯。提供數(shù)據(jù)獲取接口供ViewModel調(diào)用，經(jīng)數(shù)據(jù)轉(zhuǎn)換和操作并最終映射綁定到View層某個(gè)UI元素的屬性上
View 用來(lái)創(chuàng)建顯示的界面，不做任何業(yè)務(wù)邏輯，不處理操作數(shù)據(jù)。
ViewModel 將View和Model聯(lián)系起來(lái)，處理視圖邏輯，操作數(shù)據(jù)，不做任何UI相關(guān)的事情。綁定數(shù)據(jù)到到相應(yīng)的控件上，數(shù)據(jù)變化時(shí)自動(dòng)更新UI。

MVVM功能圖.png

數(shù)據(jù)綁定

MVVM模式使用的是數(shù)據(jù)綁定基礎(chǔ)架構(gòu)，這是MVVM設(shè)計(jì)模式的核心，在使用中，利用雙向綁定技術(shù)，使得 Model 變化時(shí)，ViewModel 會(huì)自動(dòng)更新，而 ViewModel 變化時(shí)，View 也會(huì)自動(dòng)變化。ViewModel包含所有由UI特定的接口和屬性，并有一個(gè) ViewModel 的視圖的綁定屬性，當(dāng)綁定的屬性變化時(shí)，View會(huì)自動(dòng)更新視圖，所以可以把更新視圖的邏輯放到ViewModel中，減少了Controller的代碼，iOS實(shí)現(xiàn)這種綁定可以使用 通知 和 KVO。

應(yīng)用MVVM

GIF圖中所展示的demo應(yīng)用了MVVM設(shè)計(jì)模式，通過(guò)點(diǎn)擊按鈕來(lái)更換當(dāng)前view 的背景顏色，接下來(lái)來(lái)看一下具體代碼是怎么使用的MVVM設(shè)計(jì)模式。

Controller 中只做了初始化TextViewModel和TextView，并把textView添加到當(dāng)前Controller的view上。Controller的代碼 so 簡(jiǎn)單、清晰、明了。

    private lazy var textView: TextView = {
        let view = TextView(viewModel: self.textViewModel)
        view.frame = UIScreen.main.bounds
        return view
    }()

    private lazy var textViewModel: TextViewModel = {
       let model = TextViewModel()
        return model
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(textView)
    }

View 在定義的構(gòu)造方法中，添加子視圖、綁定ViewModel，調(diào)用ViewModel提供的requestData方法和ViewModel通信進(jìn)而和Model通信去請(qǐng)求數(shù)據(jù)。也可以直接把requestData方法調(diào)用放到Controller中添加完視圖之后。

 init(viewModel: TextViewModel) {
        super.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        textViewModel = viewModel
        //添加子視圖
        setupSubViews()
        //綁定ViewModel， 使用 通知 or KVO
        bindingViewModel()
        //請(qǐng)求數(shù)據(jù)
        textViewModel.requestData()
    }

使用通知或者KVO綁定ViewModel中的color屬性，當(dāng)color變化時(shí)去自動(dòng)更新UI

    func bindingViewModel() {
        //使用通知
//        NotificationCenter.default.addObserver(forName: NSNotification.Name.init(rawValue: kTextViewUpdateUI), object: nil, queue: OperationQueue.main) { [weak self] notify in
//            guard let strongSelf = self else {
//                return
//            }
//            strongSelf.backgroundColor = strongSelf.textViewModel.color
//        }
        //使用KVO，監(jiān)聽(tīng)color屬性的變化
        textViewModel.addObserver(self, forKeyPath: "color", options: [.new, .old], context: &myContext)
    }

    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "color" {
            backgroundColor = textViewModel.color
        }
    }

ViewModel 在初始化方法中初始化Model 綁定Model中的color屬性

    override init() {
        super.init()
        textModel = TextModel()
        textModel.addObserver(self, forKeyPath: "color", options: [.old, .new], context: nil)
    }

調(diào)用Model的requestData()方法去請(qǐng)求數(shù)據(jù)，ViewModel與Model的通信完全可以放到ViewModel的初始化中，但是為了更加靈活，建議提供一個(gè)接口供外部調(diào)用。

    //模擬請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)，在數(shù)據(jù)變化的時(shí)候?qū)崿F(xiàn)自動(dòng)更新視圖
    public func requestData() {
        
        textModel.requestData()
    }

當(dāng)Model的color屬性變化時(shí)，賦值給ViewModel的Color屬性，實(shí)現(xiàn)了Model更新時(shí)ViewModel自動(dòng)更新，View也自動(dòng)更新。

    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "color" {
            //這里只是介紹Model的作用（無(wú)意義），把邏輯判斷放在VM中 減少了Controller中的代碼
            if textModel.colorName == "yellow" {
                color = UIColor.yellow
            } else {
                color = textModel.color
            }
            //實(shí)現(xiàn)VM 與 V 綁定的方式 使用 通知 or KVO
            //NotificationCenter.default.post(name: NSNotification.Name.init(rawValue: kTextViewUpdateUI), object: nil)
        }
    }

Model 請(qǐng)求數(shù)據(jù) 并存儲(chǔ)，不多解釋。

class TextModel: NSObject {
    
    var colorName: String?
    dynamic var color: UIColor?
    
    //提供一個(gè)獲取數(shù)據(jù)的接口供ViewModel調(diào)用
    func requestData() {
        //生成隨機(jī)色
        let red = CGFloat(arc4random_uniform(255))/CGFloat(255.0)
        let green = CGFloat( arc4random_uniform(255))/CGFloat(255.0)
        let blue = CGFloat(arc4random_uniform(255))/CGFloat(255.0)
        let colorRun = UIColor.init(red:red, green:green, blue:blue , alpha: 1)
        colorName = String(describing: red)
        color = colorRun
    }
}

在這里只是按照我的理解解釋了MVVM設(shè)計(jì)模式的使用，MVVM設(shè)計(jì)模式是一種新穎的編程框架，現(xiàn)在還沒(méi)有成為主流的編程框架，并不是呼吁大家都立即上手MVVM設(shè)計(jì)模式，如有不同意見(jiàn)或者更好的想法歡迎大家在下面留言評(píng)論！

End

最近很欣賞薛之謙說(shuō)的一句話：在這個(gè)時(shí)代根本就沒(méi)有懷才不遇， 關(guān)鍵是你真的必須具備才華 所以請(qǐng)你一定要強(qiáng)大自己！對(duì)于我們iOS開(kāi)發(fā)來(lái)說(shuō)，市場(chǎng)已經(jīng)進(jìn)入飽和期了(甚至有人調(diào)侃為iOS爛大街)，很多人抱怨工作不好找，現(xiàn)在的市場(chǎng)需要的不再是只會(huì)寫(xiě)寫(xiě)界面，只會(huì)上網(wǎng)復(fù)制粘貼代碼的開(kāi)發(fā)者，所以你一定要強(qiáng)大自己，等你足夠強(qiáng)大了，好的工作自然就來(lái)了！

代碼在這里