在了解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框架話題，大牛請忽略，也別笑我，我只是用最簡單易懂的語言和表達，讓更多的人看明白原理，才好進行實際應用，其實沒什么技術難點。

總結

以上是生活随笔為你收集整理的WEB前端 从原生JavaScript到MVVM的全部內容，希望文章能夠幫你解決所遇到的問題。

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