MVC

mvc.png

MVC即模型(Model)、視圖(View)、控制器(Controller)

MVC允許在不改變視圖的情況下改變視圖對用戶輸入的響應(yīng)方式，用戶對View的操作交給了Controller處理，在Controller中響應(yīng)View的事件調(diào)用Model的接口對數(shù)據(jù)進行操作，一旦Model發(fā)生變化便通知相關(guān)視圖進行更新。Controller可以直接操作View，可以直接向Model請求數(shù)據(jù)，而Model與View相互之間不能通信。
其中：
1.Modal和View永遠不能相互通信，只能通過Controller傳遞。
2.Controller可以直接與Modal對話(讀寫調(diào)用Modal)，Modal通過Notification和KVO機制與Controller間接通信。
3.Controller可以直接與View對話，通過outlet直接操作View，outlet直接對應(yīng)到View中的控件，View通過action向Controller報告事件的發(fā)生(如用戶Touch)。Controller是View的代理，以同步View和Controller。

如果前端沒有框架，只使用原生的html+js，MVC模式可以這樣理解。將html看成view;js看成controller，負責(zé)處理用戶與應(yīng)用的交互，響應(yīng)對view的操作（對事件的監(jiān)聽），調(diào)用Model對數(shù)據(jù)進行操作，完成model與view的同步（根據(jù)model的改變，通過選擇器對view進行操作）;將js的ajax當(dāng)做Model，也就是數(shù)據(jù)層，通過ajax從服務(wù)器獲取數(shù)據(jù)

mvvm.png

MVVM：模型(Model) 、視圖(View)、視圖模型(ViewModel)

MVVM是一個MVC的增強版，正式連接了視圖和控制器，并將表示邏輯從Controller移出放到一個新的對象里，即ViewModel,它實現(xiàn)了View和Model的自動同步，即當(dāng)Model的屬性改變時，我們不用再自己手動操作Dom元素來改變View的顯示，而是改變屬性后該屬性對應(yīng)的View層顯示會自動改變。
在Vue中，其HTML部分相當(dāng)于View層，data相當(dāng)于Model層，而ViewModel層的核心是Vue中的雙向數(shù)據(jù)綁定，即Model變化時View可以實時更新，View變化也能讓Model發(fā)生變化。
整體看來，MVVM比MVC精簡的多，不僅簡化了業(yè)務(wù)與界面的依賴，還解決了數(shù)據(jù)頻繁更新的問題，不用再用選擇器操作DOM元素。因為在MVVM中，View不知道Model的存在，Model和View Model也觀察不到View，這種低耦合模式提高代碼的可復(fù)用性。