閱讀目錄

• 簡而言之
• 組成部分
• 沒有什么是一個栗子不能解決的

簡而言之

之前對 MVVM 模式一直只是模模糊糊的認識，正所謂沒有實踐就沒有發言權，通過這兩年對 Vue 框架的深入學習和項目實踐，終于可以裝B了有了撥開云霧見月明的感覺。

Model–View–ViewModel(MVVM) 是一個軟件架構設計模式，由微軟 WPF 和 Silverlight 的架構師 Ken Cooper 和 Ted Peters 開發，是一種簡化用戶界面的事件驅動編程方式。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構師）于2005年在他的博客上發表。

MVVM 源自于經典的 Model–View–Controller（MVC）模式（期間還演化出了 Model-View-Presenter（MVP）模式，可忽略不計）。MVVM 的出現促進了 GUI 前端開發與后端業務邏輯的分離，極大地提高了前端開發效率。MVVM 的核心是 ViewModel 層，它就像是一個中轉站（value converter），負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，該層向上與視圖層進行雙向數據綁定，向下與 Model 層通過接口請求進行數據交互，起呈上啟下作用。如下圖所示：

MVVM模式

MVVM 已經相當成熟了，主要運用但不僅僅在網絡應用程序開發中。KnockoutJS 是最早實現 MVVM 模式的前端框架之一，當下流行的 MVVM 框架有 Vue，Angular 等。

組成部分

簡單畫了一張圖來說明 MVVM 的各個組成部分：

MVVM分層示意圖

分層設計一直是軟件架構的主流設計思想之一，MVVM 也不例外。

# View 層

View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構建，為了更方便地展現 ViewModel 或者 Model 層的數據，已經產生了各種各樣的前后端模板語言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用來構建用戶界面的內置模板語言。

# Model 層

Model 是指數據模型，泛指后端進行的各種業務邏輯處理和數據操控，主要圍繞數據庫系統展開。后端的處理通常會非常復雜：

前后端對比

后端：我們這里的業務邏輯和數據處理會非常復雜！
前端：關我屁事！

后端業務處理再復雜跟我們前端也沒有半毛錢關系，只要后端保證對外接口足夠簡單就行了，我請求api，你把數據返出來，咱倆就這點關系，其他都扯淡。

# ViewModel 層

ViewModel 是由前端開發人員組織生成和維護的視圖數據層。在這一層，前端開發者對從后端獲取的 Model 數據進行轉換處理，做二次封裝，以生成符合 View 層使用預期的視圖數據模型。需要注意的是 ViewModel 所封裝出來的數據模型包括視圖的狀態和行為兩部分，而 Model 層的數據模型是只包含狀態的，比如頁面的這一塊展示什么，那一塊展示什么這些都屬于視圖狀態（展示），而頁面加載進來時發生什么，點擊這一塊發生什么，這一塊滾動時發生什么這些都屬于視圖行為（交互），視圖狀態和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。由于實現了雙向綁定，ViewModel 的內容會實時展現在 View 層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經把最臟最累的一塊做好了，我們開發者只需要處理和維護 ViewModel，更新數據視圖就會自動得到相應更新，真正實現數據驅動開發。看到了吧，View 層展現的不是 Model 層的數據，而是 ViewModel 的數據，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前后端分離方案實施的重要一環。

沒有什么是一個栗子不能解決的

扯了這么多，并沒有什么卵用。千言萬語不如一個栗子來的干脆，下面用一個 Vue 實例來說明 MVVM 的具體表現。

Vue 的 View 模板：

<div id="app"><p>{{message}}</p><button v-on:click="showMessage()">Click me</button> </div>

Vue 的 ViewModel 層（下面是偽代碼）：

var app = new Vue({el: '#app',data: { // 用于描述視圖狀態（有基于 Model 層數據定義的，也有純前端定義）message: 'Hello Vue!', // 純前端定義server: {}, // 存放基于 Model 層數據的二次封裝數據},methods: { // 用于描述視圖行為（完全前端定義）showMessage(){let vm = this;alert(vm.message);}},created(){let vm = this;// Ajax 獲取 Model 層的數據ajax({url: '/your/server/data/api',success(res){// TODO 對獲取到的 Model 數據進行轉換處理，做二次封裝vm.server = res;}});} })

服務端的 Model 層（省略業務邏輯處理，只描述對外接口）：

{"url": "/your/server/data/api","res": {"success": true,"name": "IoveC","domain": "www.cnblogs.com"} }

這就是完整的 MVVM 編程模式。

代碼執行之后雙向綁定的效果如下:

Vue實現的響應的數據綁定

嘿嘿，前后端可以成功分手了，以后再也不用關心后端個錘子開發進度\暴怒臉，復雜實現，blabla...，盡情享用前端如絲般順滑的開發快感吧:)

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的前后端分手大师——MVVM 模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。