首先說一說MVVM的由來,相信大家對MVC都不陌生,MVC 是開發(fā)客戶端最經(jīng)典的設計模式,但是 MVC 有讓人無法忽視的嚴重問題。在通常的開發(fā)中,除了簡單的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 負責顯示界面、響應用戶的操作、網(wǎng)絡請求以及與 Model 交互。隨著業(yè)務邏輯的增加,controller的處理邏輯會變得越來越復雜,controller也就慢慢的變得越來越胖,這就造成了Controller邏輯復雜,難以維護。為了更好地管理代碼,更方便地擴展業(yè)務,為必要為controller瘦身,于是MVVM便呼之欲出.
MVVM:是 Model-View-ViewModel簡寫
M:對應于MVC的M
V:對應于MVC的V
VM:viewModel,是把MVC里的controller的數(shù)據(jù)的加載、加工功能分離出來
MVVM 是 Web 前端一種非常流行的開發(fā)模式,利用 MVVM 可以使我們的代碼更專注于處理業(yè)務邏輯而不是去關心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等,這些框架各有千秋,但是實現(xiàn)的思想大致上是相同的:數(shù)據(jù)綁定 和 視圖刷新。跟MVC一樣,主要目的是分離視圖(View)和模型(Model)。View可以獨立于Model變化和修改,一個ViewModel可以綁定到不同的'View'上,當View變化的時候Model可以不變,當Model變化的時候View也可以不變。在MVVM中,數(shù)據(jù)是核心,由于VIewModel與View之間的雙向綁定,操作了ViewModel中的數(shù)據(jù),就會同步到DOM,我們透過DOM事件監(jiān)控用戶對DOM的改動,也會同步到ViewModel。
MVVM設計模式的優(yōu)點
1.雙向綁定技術,當Model變化時,View-Model會自動更新,View也會自動變化。很好做到數(shù)據(jù)的一致性,不用擔心,在模塊的這一塊數(shù)據(jù)是這個值,在另一塊就是另一個值了。所以 MVVM模式有些時候又被稱作:model-view-binder模式。
2.View的功能進一步的強化,具有控制的部分功能,若想無限增強它的功能,甚至控制器的全部功幾乎都可以遷移到各個View上(不過這樣不可取,那樣View干了不屬于它職責范圍的事情)。View可以像控制器一樣具有自己的View-Model.
3.由于控制器的功能大都移動到View上處理,大大的對控制器進行了瘦身。不用再為看到龐大的控制器邏輯而發(fā)愁了。
4.可以對View或ViewController的數(shù)據(jù)處理部分抽象出來一個函數(shù)處理model。這樣它們專職頁面布局和頁面跳轉,它們必然更一步的簡化。
MVVM設計模式的缺點
1.數(shù)據(jù)綁定使得 Bug 很難被調試。你看到界面異常了,有可能是你 View 的代碼有 Bug,也可能是 Model 的代碼有問題。數(shù)據(jù)綁定使得一個位置的 Bug 被快速傳遞到別的位置,要定位原始出問題的地方就變得不那么容易了。
2.一個大的模塊中model也會很大,雖然使用方便了也很容易保證了數(shù)據(jù)的一致性,當時長期持有,不釋放內存就造成了花費更多的內存。
3.數(shù)據(jù)雙向綁定不利于代碼重用??蛻舳碎_發(fā)最常用的重用是View,但是數(shù)據(jù)雙向綁定技術,讓你在一個View都綁定了一個model,不同模塊的model都不同。那就不能簡單重用View了。