原創 小北哥哥 前端你別鬧 2017-04-07
今天來說說 “前端發展歷史和框架”
「前端程序發展的歷史」
「 不學自知，不問自曉，古今行事，未之有也 」
我們都知道現在流行的框架：Vue.Js、Angular.Js、ReactJs，已經逐漸應用到各個項目和實際應用中，它們都是MVVM數據驅動框架系列的一種。
在瞭解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:
<script>
// JavaScript
var dom1 = document.getElementById('name');
var dom2 = document.getElementById('age');
dom1.innerHTML = '小北';
dom2.innerHTML = '666';
dom1.style.color = '#000000'; // css樣式也可以操作
</script>
結果變成:
<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:
<script>
// jQuery 一句話就行
$('#name').text('小北好帥').css('color', '#000000');
$('#age').text('666').css('color', '#fff');
</script>
【第三階段】
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、Angular.Js、React.Js 等我們在下一篇討論
結尾
好累，終於通過簡單的例子和很白話的語言，引出了mvvm框架話題，大牛請忽略，也別笑我，我只是用最簡單易懂的語言和表達，讓更多的人看明白原理，纔好進行實際應用，其實沒什麼技術難點。