在瞭解MVVM之前，我們先回顧一下前端發展的歷史階段，做到心中有數，才會更好理解。

這段回顧歷史，由於網上就可查不少資料，但都篇幅很長，晦澀難懂。

所以我引用了 廖雪峰老師網站總結的一段話，言簡意駭，方便大家秒懂閱讀

在上個世紀的1989年，歐洲核子研究中心的物理學家Tim Berners-Lee發明了超文字標記語言（HyperText Markup Language），簡稱HTML，並在1993年成為網際網路草案。從此，網際網路開始迅速商業化，誕生了一大批商業網站。

最早的HTML頁面是完全靜態的網頁，它們是預先編寫好的存放在Web伺服器上的html檔案。

瀏覽器請求某個URL時，Web伺服器把對應的html檔案扔給瀏覽器，就可以顯示html檔案的內容了。

如果要針對不同的使用者顯示不同的頁面，顯然不可能給成千上萬的使用者準備好成千上萬的不同的html檔案，所以，伺服器就需要針對不同的使用者，動態生成不同的html檔案。一個最直接的想法就是利用C、C++這些程式語言，直接向瀏覽器輸出拼接後的字串。這種技術被稱為CGI：Common Gateway Interface。

很顯然，像新浪首頁這樣的複雜的HTML是不可能通過拼字串得到的。於是，人們又發現，其實拼字串的時候，大多數字符串都是HTML片段，是不變的，變化的只有少數和使用者相關的資料，所以，又出現了新的建立動態HTML的方式：ASP、JSP和PHP等——分別由微軟、SUN和開源社群開發。

在以前：
在ASP中，一個asp檔案就是一個HTML，但是，需要替換的變數用特殊的<%=var%>標記出來了，再配合迴圈、條件判斷，建立動態HTML就比CGI要容易得多。

但是，一旦瀏覽器顯示了一個HTML頁面，要更新頁面內容，唯一的方法就是重新向伺服器獲取一份新的HTML內容。如果瀏覽器想要自己修改HTML頁面的內容，怎麼辦？那就需要等到1995年年底，JavaScript被引入到瀏覽器。

有了JavaScript後，瀏覽器就可以執行JavaScript，然後，對頁面進行一些修改。JavaScript還可以通過修改HTML的DOM結構和CSS來實現一些動畫效果，而這些功能沒法通過伺服器完成，必須在瀏覽器實現。

以上頁面發展歷史，摘自廖雪峰總結，有興趣可以去搜

下面先跟著我節奏揭開MVVM原理。

JavaScript操作HTML

至於 js如何在瀏覽器執行，這又是另外一個資深課題了（前端真的是隻是龐雜），這裡我們不做研究，有興趣的可以自己去搜資料。我們只需要知道瀏覽器就是也JS執行容器，執行完之後，通過頁面顯示結果就行了，就像java需要編譯器一樣原理。

用JavaScript在瀏覽器中操作HTML，也經歷了若干發展階段： 我們利用【小北最帥】這個案例來展示

【第一階段】

是JS原生通過瀏覽器解析機制，它的原理是使用瀏覽器提供的原生API 結合JS語法，可以直接操作DOM，如：

HTML:

<div id="name" style="color:#fff">前端你別鬧</div> <div id="age">3</div>

JavaScript:

// JavaScriptvar dom1 = document.getElementById('name');var dom2 = document.getElementById('age'); dom1.innerHTML = '小北'; dom2.innerHTML = '666'; dom1.style.color = '#000000';  // css樣式也可以操作

結果變成：

<div id="name" style="color:#fff">小北</div> <div id="age">'666</div>

【第二階段】

我用一個字總結 就是懶，就是我們上一篇說的jQuery時代，由於原生API晦澀難懂，語法很長不好用，最重要的是要考慮各種瀏覽器相容性，因為他們的解析標準都不一樣，造成了，寫一段效果程式碼要寫很多的相容語法，令人沮喪，所以jQuery的出現，迅速佔領了世界。

上邊的例子用 jQuery 是這樣的

HTML:

<div id="name" style="color:#fff">前端你別鬧</div> <div id="age">3</div>

JavaScript:

// jQuery 一句話就行

$('#name').text('小北好帥').css('color', '#000000'); $('#age').text('666').css('color', '#fff');

結果變成：

<div id="name" style="color:#fff">小北好帥</div> <div id="age">666</div>

【第三階段】

MVC模式，需要伺服器端配合，JavaScript可以在前端修改伺服器渲染後的資料。

一句話就是所有通訊都是單向的： 也就是前期我們最常用的狀態，提交一次反饋一次，通訊一次相互制約。

比如：提交表單 填寫內容 → 點選提交 →業務邏輯處理 →存入資料庫 → 重新整理頁面→伺服器取資料庫資料→渲染到客戶端頁面→ 展示上一次你提交的內容

檢視（View）：使用者介面。
控制器（Controller）：業務邏輯
模型（Model）：資料儲存

各部分之間的通訊方式如下。

View 傳送指令到 Controller

Controller 完成業務邏輯後，要求 Model 改變狀態

Model 將新的資料傳送到 View，使用者得到反饋

這個模式缺點是什麼呢？

缺點一：它必須等待伺服器端的指示，而且如果是非同步模式的話，所有html節點、資料、頁面結構都是後端請求過來。

瀏覽器只作為一個解析顯示容器，Model 作用幾乎是廢x，Model 層面做的很少幾乎前端無法控制，你前端幾乎是切圖仔和做輪播圖的工作/哭

缺點二：因為你前端渲染的頁面結構，幾乎是後端伺服器包紮一堆資料一起傳送過來，前端的你只需要用拼接字串 或者字串拼接引擎

 比如Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等來做事，說白了純苦力和重複工作居多，這也導致了，如果很多人認為前端並不重要，只負責美工 和 動作體驗就好了。

缺點三：一發而動全身。資料、顯示不分離！為什麼這麼說，因為如果業務邏輯要變，比如很簡單的需求，你用jsp或者php 拼接出來的ajax資料頁面，年齡這個欄位我不需要了，把性別欄位 區分開，男的單獨顯示，女的單獨顯示，以前是一起顯示到一個表的

那麼，後端先要sql查詢把 男、女資料分開，然後渲染字串時候把 年齡 這個欄位去除，然後把男女分開成2個table，然後再推送給前端接收。

前端收到了，然後從新在渲染一遍，在加工一次頁面甚至是展示動作效果。。。真苦逼啊（前後端一起大聲喊到：加班使我快樂，嗚嗚嗚）

MVVM框架模式

終於來到【第四階段】，為什麼在MVC模式我說這麼多廢話呢，因為你瞭解了MVC才能更清楚的知道

「 何為mvvm模式 」

MVVM最早由微軟提出來，它借鑑了桌面應用程式的MVC思想，在前端頁面中，把Model用純JavaScript物件表示，View負責顯示，兩者做到了最大限度的分離。也就是我們常說的，前後分離，真正在這裡得以實現

它採用雙向繫結（data-binding）：View的變動，自動反映在 ViewModel，反之亦然,model資料的變動，也自動展示給頁面顯示

把Model和View關聯起來的就是ViewModel。ViewModel負責把Model的資料同步到View顯示出來，還負責把View的修改同步回Model。

可能理論知識枯燥無味，那麼我們還是實戰派，來看程式碼不就好了嗎？
還是剛才的 【小北最帥】案例

js和jQuery的寫法 大家也看到了，那麼我們來MVVM 資料繫結怎麼實現。

由於資料驅動模式的精髓在於【資料】和【檢視】分離，所以我們首先並不關心DOM結構，而是關心資料的展現。

最簡單的資料儲存方式是什麼呢？顯然不是mysql、資料庫而是使用JavaScript物件

HTML:

// 這次我不關心你了，哼哼

JavaScript:

// JS基礎物件// 原始資料
var xiaobei = {    name: '前端你別鬧',    age: 3，    
   tag：'乾貨'
};

結果是：

name: 前端你別鬧
age: 3
tag: 乾貨

假設：
我們把變數xiaobei 看作Model資料，把HTML某些DOM節點看作View，並意淫它們已經通過某種手段被關聯起來了。

下面我們把name 從[ 前端你別鬧] 改為 [小北]，把顯示的age從 [3] 改為 [666]，tag變成 [最帥！]
按照以前我們肯定操作DOM節點，而現在我們只需要修改JavaScript物件：

JavaScript:

// JS基礎物件// 改變的資料

var xiaobei = {    name: '小北',    age: 666，    
   tag：'最帥'
};

結果是：

name: 小北
age: 666
tag: 最帥

通過實驗和理論

小夥伴驚呆了，我們只要改變JavaScript物件的內容，就會導致DOM結構作出對應的變化！
這讓我們的關注點從如何操作DOM變成了如何改變JavaScript物件的狀態，而操作JavaScript物件比獲取和操作DOM簡單了一個地球的距離！

這也是MVVM的核心思想：關注Model的變化，讓MVVM框架利用自己的機制去自動更新DOM，從而把開發者從操作DOM的繁瑣中解脫出來！

也就是所謂的 資料 - 檢視分離，資料驅動檢視， 檢視不影響資料，再也不用管繁瑣的DOM結構操作了，世界頓時清淨，完美！

常見的MVVM框架：Vue.JS、AngularJs、reactJs 等我們在下一篇討論

結尾

好累，終於通過簡單的例子和很白話的語言，引出了mvvm框架話題，大牛請忽略，也別笑我，我只是用最簡單易懂的語言和表達，讓更多的人看明白原理，才好進行實際應用，其實沒什麼技術難點。