閱讀目錄

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

簡而言之

之前對 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，更新數據視圖就會自動得到相應更新，真正實現數據驅動開發?？吹搅税?#xff0c;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 模式的全部內容，希望文章能夠幫你解決所遇到的問題。

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