getMVVM_logo
近年來前端一個明顯的開發(fā)趨勢就是架構從傳統(tǒng)的 MVC 模式向 MVVM 模式遷移。在傳統(tǒng)的 MVC 下，當前前端和后端發(fā)生數據交互后會刷新整個頁面，從而導致比較差的用戶體驗。因此我們通過 Ajax 的方式和網關 REST API 作通訊，異步的刷新頁面的某個區(qū)塊，來優(yōu)化和提升體驗。
一、MVP模式
我們以前使用JQuery操作Dom的模式就是遵循了MVP模式,我們來看一下MVP模式的圖示：
getMVVM_1
- 視圖（View）：用戶界面。
- 控制器（Presenter）：業(yè)務邏輯
- 模型（Model）：數據保存
MVP有以下特點：
- 各部分之間的通信，都是雙向的。
- View 與 Model 不發(fā)生聯系，都通過 Presenter 傳遞。
- View 非常薄，不部署任何業(yè)務邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那里。
在我們常規(guī)的DOM操作中，Model層的數據一般通過AJAX獲取，Presenter層通常就是我們的js邏輯而相應的View就是我們用戶看到的界面。
二、MVVM模式
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVP的改進版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務邏輯分開。
我們先來看一下圖示：
getMVVM_2
它與MVP的區(qū)別在于它采用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。Vue.js 正是采用了這種模式：
getMVVM_3
Vue.js 可以說是MVVM 架構的最佳實踐，專注于 MVVM 中的 ViewModel，不僅做到了數據雙向綁定，而且也是一款相對比較輕量級的JS 庫，API 簡潔，很容易上手。
小伙伴們，快來試試Vue.js吧！
參考文章
本文作者： catalinaLi
本文鏈接： http://catalinali.top/2018/getMVVM/
版權聲明： 原創(chuàng)文章，有問題請評論中留言。非商業(yè)轉載請注明作者及出處。
