二、前後端分離的演變史

1。什麼是MVVM

MVVM（Model-View-ViewModel）是一種軟體架構設計模式，由微軟WPF（用於替代WinForm，以前就是用這個技術開發桌面應用程式的）和Silverlight（類似於JavaApplet，簡單點說就是在瀏覽器上執行的WPF）的架構師Ken Cooper和Ted Peters開發，是一種簡化使用者介面的事件驅動程式設計方式。由John Gossman（同樣也是WPF和Silverlight的架構師）於2005年在他的部落格上發表

MVVM源自於經典的MVC（Model-View-Controller）。MVVM的核心是ViewModel層，負責轉換Model中的資料物件來讓資料變得更容易管理和使用，其作用如下：

該層向上與檢視層進行雙向繫結

向下與Model層透過介面請求進行資料互動

MVVM已經相當成熟了，主要運用但不僅僅在網路應用程式開發中。當下流行的MVVM框架有Vue。js、AngularJS等

舉例對比

用傳統的jQuery實現

HTML

//這是一個輸入框，輸入內容

$（“#app”）。on（“change”，funcation{

$（“#content”）。html（this。val（））；

}）

用MVVM模式實現

VIEW層

HTML

//這是一個輸入框，輸入內容

$（“#app”）。on（“change”，funcation{

$（“#content”）。html（this。val（））；

}）

ViewModel層 觀察者 //觀察到輸入框內容變化傳送請求到Model層

Model層 資料層 //後端收到請求進行相應的處理返回給ViewModel層，然後ViewModel又會根據返回的資料修改View層

2。為什麼要使用MVVM

MVVM 模式和 MVC 模式一樣，主要目的是分離檢視（View）和模型（Model），有幾大好處：

低耦合：檢視（View）可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變

可複用：你可以把一些視覺邏輯放在一個ViewModel裡面，讓很多View重用這段檢視邏輯

獨立開發：開發人員可以專注於業務邏輯和資料的開發（ViewModel），設計人員可以專注於頁面設計

可測試：介面素來是比較難於測試的，而現在測試可以針對ViewModel來寫

3。MVVM的組成部分

View

View是檢視層，也就是使用者介面。前端主要由HTML和CSS來構建，為了更方便地展現ViewModel或者Model層的資料，已經產生了各種各樣的前後端模板語言，比如FreeMarker、Thymeleaf等等，各大MVVM框架如Vue。js、AngularJS、EJS等也都有自己用來構建使用者介面的內建模板語言

Model

Model是指資料模型，泛指後端進行的各種業務邏輯處理和資料操控，主要圍繞資料庫系統展開。這裡的難點主要在於需要和前端約定統一的介面規則

ViewModel

ViewModel是由前端開發人員組織生成和維護的檢視資料層。在這一層，前端開發者對從後端獲取的Model資料進行轉換處理，做二次封裝，以生成符合View層使用預期的檢視資料模型

需要注意的是ViewModel所封裝出來的資料模型包括檢視的狀態和行為兩部分，二Model層的資料模型是隻包含狀態的

比如頁面的這一塊展示什麼，那一塊站是什麼，這些都屬於檢視狀態（展示）

頁面載入進來時發生什麼，點選這一塊發生什麼，這一塊滾動時發生什麼，這些都屬於檢視行為（互動）

檢視狀態和行為都封裝在了ViewModel裡。這樣的封裝使得ViewModel可以完整地去描述View層。由於實現了雙向繫結，ViewModel的內容會實時展現在View層，這是激動人心的，因為前端開發者再也不必低效又麻煩地透過操作DOM去更新檢視

MVVM框架已經把最髒最累的一塊做好了，我們開發者只需要處理和維護ViewModel，更新資料檢視就會自動得到相應更新，真正實現事件驅動程式設計

View層展現的不是Model層的資料，而是ViewModel的資料，由ViewModel負責與Model層互動，這就完全解耦了View層和Model層，這個解耦是至關重要的，它是前後端分離方案實施的重要一環