點擊上方“自學幫”，選擇“添加關注”
各種福利第一時間送達！
大家好，我是黑馬騰雲，碼農、連續創業者。
先給大家發個福利，聯合InfoQ舉辦送現金紅包活動，有興趣的點擊查看。
上一篇文章體驗了HBuilderX編碼飛一般的感覺，此文來聊聊MVVM模式。
uni-app是一個使用vue.js開發前端應用的框架，使用vue的語法+小程序的標籤和API。由於vue採用MVVM軟件架構設計模式，因此uni-app框架也自然是基於MVVM模式。
MVVM實際是由MVC演化而來，因此先了解下MVC模式。
MVC模式
MVC是三個單詞的首字母：Model、View、Controller。
Model：模型層，數據的增刪改查
View：視圖層，前端頁面
Controller：控制層，處理業務邏輯
早期的軟件，前後端都放在一個頁面中，典型的有asp、原生php等腳本語言（當然php也有一些基於MVC的框架，如ThinkPhp、YII等），這種模式前端頁面還夾雜着後端邏輯代碼，前端人員還需要能看懂一定的後端腳本，使得項目維護起來相當麻煩。
MVC模式很大程度促進了軟件行業的發展，使得項目中頁面的前後端分離成爲現實，增加了軟件的可維護性。
我們以用戶在頁面上的一次操作爲例，演示MVC的過程如下圖：
以登錄功能爲例：
很多系統都有登錄功能，我們在登錄界面點擊登錄按鈕，會執行哪些操作？
1、我們看到的登錄頁面即爲視圖，當點擊登錄按鈕就會請求Controller層的登錄接口地址。
2、Controller層根據請求匹配到對應的登錄路由後，進入控制器進行登錄相關的業務邏輯操作。根據頁面上用戶填寫的賬號密碼，Controller層請求Model層進行查詢用戶信息。
3、Model層根據控制器層的需求查詢數據庫獲取對應的用戶信息，並將結果返回Controller層。Model層一般對應數據庫實體。
4、Controller根據Model返回的用戶信息，結合用戶輸入的密碼判斷用戶信息是否正確，最後在將判斷結果返回View層。
5、View界面獲取Controller返回的登錄結果，如果登錄失敗則提示，如果成功則進入系統。
可以看到此模式將View層和後端邏輯分開，前端和後端不再夾雜在一起，使得前端人員專注於前端開發，只需要根據後端的接口文檔規範調用接口即可；而後端人員也不必關心前端的HTML、CSS、JS等實現細節。
基於這種思想，產生了很多MVC模式的框架。asp.net mvc、spring mvc、thinkPhp等等都是基於MVC模式的。
在很長一段時間MVC模式非常流行，並且現在也還有很多公司繼續在使用。
但是這種模式也不是完美的，雖然在頁面的維度將前後端分離開了，但是分離還不夠徹底；有的人就在想，有沒有可能在項目的維度，把前端和後端分離成單獨的項目呢，這樣一來，前後端人員就可以完全分開了。
2005年，微軟的3位 WPF 和 Silverlight 架構師 Ken Cooper、Ted Peters和 John Gossman 發佈了MVVM軟件架構設計模式。（如果你曾用過微軟系技術棧，一定熟知那段時間的技術WPF、WCF、WF等等，感興趣的自己去研究）
再到後來，隨着前端技術的蓬勃發展，各種框架層出不窮（React、Angular、Vue等等）；同時基於restfull風格的後端接口技術也在不斷演進，MVVM模式更是得到了極大的應用。
接下來討論下MVVM這種軟件設計思想，以便更好的理解uni-app框架。
MVVM模式
有人戲稱MVVM模式是：前後端分手大師！
Model–View–ViewModel(MVVM) 是一個軟件架構設計模式，它的出現促進了 GUI 前端開發與後端業務邏輯的分離，極大地提高了前端開發效率。
回到前端技術上來，在原生Javascript或JQuery時代，我們要獲取或改變頁面上標籤數據，需要對Dom進行操作，而使用MVVM模式，則無需前端人員再去對標籤賦值，一切都由框架實現了。
二者區別見下圖：
如果你使用過JQuery，則體會的更加深刻，在MVVM模式中，用ViewModel代替了用JS或JQuery手動操作的過程，它充當核心調度者協調器的作用，實現了數據的雙線綁定。
MVVM 的核心是 ViewModel 層，它就像是一箇中轉站（value converter），負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，該層向上與視圖層進行雙向數據綁定，向下與 Model 層通過接口請求進行數據交互，起呈上啓下作用。
MVVM組成部分如下圖：
分層設計一直是軟件架構的主流設計思想之一，MVVM 也不例外。
View層
View 是視圖層，也就是用戶界面，主要由前端人員構建。
前端主要由 HTML 和 CSS 來構建，爲了更方便地展現 ViewModel 或者 Model 層的數據，已經產生了各種各樣的前後端模板語言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用來構建用戶界面的內置模板語言。
Model層
Model 是指數據模型，泛指後端進行的各種業務邏輯處理和數據操控，主要圍繞數據庫系統展開。
一般是獨立的項目，以restfull風格接口提供數據服務。主要由後端人員構建，提供接口文檔給前端人員即可。
ViewModel層
ViewModel 是由前端開發人員組織生成和維護的視圖數據層，主要由前端人員操作和維護。
在這一層，前端開發者對從後端獲取的 Model 數據進行轉換處理，做二次封裝，以生成符合 View 層使用預期的視圖數據模型。
需要注意的是 ViewModel 所封裝出來的數據模型包括視圖的狀態和行爲兩部分，而 Model 層的數據模型是隻包含狀態的，比如頁面的這一塊展示什麼，那一塊展示什麼這些都屬於視圖狀態（展示），而頁面加載進來時發生什麼，點擊這一塊發生什麼，這一塊滾動時發生什麼這些都屬於視圖行爲（交互），視圖狀態和行爲都封裝在了 ViewModel 裏。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。
由於實現了雙向綁定，ViewModel 的內容會實時展現在 View 層，這是激動人心的，因爲前端開發者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經把最髒最累的一塊做好了，我們開發者只需要處理和維護 ViewModel，更新數據視圖就會自動得到相應更新，真正實現數據驅動開發。
看到了吧，View 層展現的不是 Model 層的數據，而是 ViewModel 的數據，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前後端分離方案實施的重要一環。
MVVM 已經相當成熟了，主要運用但不僅僅在網絡應用程序開發中。KnockoutJS 是最早實現 MVVM 模式的前端框架之一，當下流行的 MVVM 框架有 Vue，Angular 等。
既然如此，接下來在uni-app中演示如何用MVVM模式實現雙向數據綁定。
MVVM雙向數據綁定
打開HBuilderX，利用前文講解的方式創建一個uni-app默認項目test，接下來分析每個頁面的對應的組成以及雙向數據綁定。
uni-app項目中，每個頁面後綴爲.vue，包含三個部分：template、script、style。
template部分對應View，對應一些HTML代碼，css樣式寫在style標籤中。
script標籤裏的data部分對應Model。
整個script對應的是ViewModel，如上所述，不僅包含頁面視圖數據，還包含了頁面行爲。
所謂雙向綁定是指Model裏的數據可以直接顯示在界面上，而界面上進行的操作也可以直接修改數據對象。
如圖所示，model層定義了title對象，並通過{{title}}綁定在text標籤上，頁面加載時在界面顯示了title的值。同時通過 :value 把title的值綁定到input標籤上，在界面上輸入內容改變文本框的值，通過自定義change事件改變title對象的值，可以看到title的值變化後也直接反應在了界面上。
這就是數據雙向綁定，這種模式無需再對各個標籤進行獲取或賦值操作，而如果用Js或JQuery則需要通過對Dom的操作才能實現，這就是他們的最大區別。
瞭解了框架思想，下一篇文章，我們開始創建uni-app項目並分析其目錄結構。
領取現金紅包的活動，點擊原文連接可以直達。
摸魚時間
你用過哪些基於MVVM模式的前端框架呢？
咱們留言區見！
更多精彩內容，歡迎持續關注。有任何疑問歡迎添加作者個人微信進行交流。
一切知識都源於記憶，所有成功都需要付出！我們一起見證堅持和拼搏的力量！
--公衆號：自學幫
本文分享自微信公衆號 - 自學幫（zixuebang8）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。