對於大多數前端框架，我想聊一聊，這些前端框架從何而來，解決了什麼問題，又有哪些高明之處。
認識瞭解問題，切忌一頭扎進去研究而未了解其全貌。爲此，我們追溯到20世紀90年代，網景瀏覽器橫空出世，佔據了瀏覽器市場第一的份額。那時的網景瀏覽器已經搭載了 Cookie、 Frames 和 JavaScript 等功能，可惜好景不長，再後來與微軟的“瀏覽器大戰”中敗下了陣來。
於是網景公司將代碼開源，創造了 Mozilla ，也就是現在的 Firefox。可以說，瀏覽器大戰從未停止過，Opera 、 Safari 、 Google Chrome …… 當然，還有微軟的 Internet Explorer 以及一些其他的瀏覽器。各瀏覽器引擎不同，標準不一，苦了的就是我們的主角：前端開發。
排版引擎
所有這些瀏覽器，使用最廣泛的無非是這些引擎： Gecko 、 WebKit 和 Trident 。最早的 Netscape 使用的是 Gecko 排版引擎，後來的 Firefox 繼承了它的衣鉢。微軟從 Spyglass 公司買來技術開發了 Internet Explorer ， 使用了 Trident 引擎。蘋果開發了 WebKit ，做出了 Safari 瀏覽器，後來引擎開源， Google 做出了基於 WebKit 的 Chrome 。
有人會說，那 QQ瀏覽器、360瀏覽器、世界之窗、搜狗瀏覽器之類的，這些瀏覽器只是套了 Chrome 或 IE 的內核罷了。
而和前端程序員打交道的，最終就是這三樣東西： HTML 、 CSS 、 JavaScript 。
JavaScript
HTML 負責描述界面的元素結構， CSS 負責描述界面的樣式表現， JavaScript 負責界面元素的交互和與後臺數據的交互。早期的靜態網頁，甚至不需要 JavaScript ，因爲不需要太多的交互。即使用到 JavaScript ，最多也是用於表單驗證、彈彈提示框。
隨着 Web2.0 的概念炒起來，動態網站逐漸成爲主流。早期的動態網站，隨便的一個數據更新都要刷新整個頁面，體驗逐漸變得不可接受。於是，局部數據刷新成了當時的熱點，這就是當年炒的很熱的 Ajax 技術。
Ajax 的全稱是 Asynchronous JavaScript and XML , 即異步 JavaScript 和 XML 技術。當時炒的神乎其神，而其根本本質其實很簡單，就是 XMLHttpRequest ，然後配合 DOM 的操作，就可以變化出各種不同的花樣出來。 XMLHttpRequest 負責和服務器交互，返回數據後通過 DOM 的操作動態實時的更新界面元素。
然而，一個簡簡單單的 Ajax ，各個瀏覽器的支持卻不同。爲了兼容不同的瀏覽器，導致寫 Ajax 變得異常痛苦。比如，一個 XmlHttpRequest 的跨瀏覽器的通用寫法就必須寫成這樣：
// Provide the XMLHttpRequest class for IE 5.x-6.x:
// Other browsers (including IE 7.x-8.x) ignore this
// when XMLHttpRequest is predefined
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++) {
try {
xmlHttp = new ActiveXObject(aVersions[i]);
break;
} catch (e) {}
} //歡迎加入全棧開發交流圈一起學習交流：1007317281
}
單單一個 XmlHttpRequest 就讓前端程序員百苦難辯，更別說跨瀏覽器的 DOM 選擇與操作、 CSS 的差異…… 前端程序員只能默默檫乾眼淚，爲了解決這些問題， jQuery 橫空出世。
jQuery![]()
jQuery 是一套跨瀏覽器的 JavaScript 庫，既然大家都這麼痛苦要處理兼容問題，那何不讓我一個人來承受。自 jQuery 從 2006 年 1 月發佈第一個版本以來，現在已完全佔領市場。據統計，全球前10,000個訪問最高的網站中，有65%使用了jQuery 。
jQuery 不僅解決了瀏覽器兼容的問題，還提供了大量的簡便語法，用於選擇和操作 DOM 對象、創建動畫效果、處理事件以及 Ajax 的支持。
得麒麟才子者，可得天下。 jQuery 出來後，有種得 jQuery 者可得前端天下的感覺。隨後基於 jQuery 的各種 UI 插件、組件層出不窮，如 YUI 等等，也呈現出百花齊放的氣象。
似乎 jQuery 已經解決了所有問題，而我對前端開發的經驗，也止於 jQuery 。 jQuery 的確能解決之前的諸多問題，然而互聯網在發展，瀏覽器的地位不斷提高，人們對瀏覽器裏的體驗的要求也逐漸變高，Web 端的功能越來越重。 Google 甚至認爲你的電腦僅僅需要一個瀏覽器即可。
需求越來越多，功能越來越複雜，使得 JavaScript 本身的缺點暴露了出來。 JavaScript 過於靈活，代碼的組織過於零散，一旦需求變得複雜，這一大坨一大坨的 JavaScript 代碼將變得難以維護。特別是如今崇尚的快速開發、快速試錯的開發模式，臃腫、難以組織和維護的 JavaScript 代碼成了一個需要重要解決的問題。 歡迎加入全棧開發交流圈一起學習交流：1007317281
於是，如何將 JavaScript 代碼有效的組織和分類，如何簡化代碼的寫法成爲了研究的重點。就連 1978 年就被提出的 MVC 模式也被應用到了前端開發的框架之中。
MVC![]()
MVC 是一種軟件架構分層的思想。將軟件系統分爲三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。
- （控制器 Controller）- 負責轉發請求，對請求進行處理。
- （視圖 View） - 界面設計人員進行圖形界面設計。
- （模型 Model） - 程序員編寫程序應有的功能（實現算法等等）、數據庫專家進行數據管理和數據庫設計(可以實現具體的功能)。
MVC 的優點是將系統進行了分層，單獨的分層變得邏輯更加清晰，便於維護，提高了代碼的可重用性，由於各司其職，在響應變化時，也能做出快速反應。
應用到前端開發， MVC 裏的 Model 、 View 、 Controller 分別對應：
- （控制器 Controller）：業務邏輯，URL Router
- （視圖 View）：用戶界面，DOM 處理。
- （模型 Model）：數據保存
除了 MVC ，還有 MVP、 MVVM 等模型。然而，這些所謂的概念真的重要嗎？黑貓白貓都是好貓，能解決問題的纔是好模型好框架。
xxx.js
後面出來的 xxx.js 我就不太懂了。比如：Ember.js、Angular.js、Backbone.js、Knockout.js、React.js。直到寫這篇文章前，纔打開各自的主頁，粗略的瀏覽了一下各自的 Quick Start ， 瞭解了一點各自的特性。
首先，我們來對比一下這幾個庫在 GitHub 上的 關注度 ：
從上面的數據可以看出， Angular.js 、 Backbone.js 、 React.js 幾乎佔據了半壁江山。
Angular.js由 Google 推出，從上面的 Fork 數據看出， Angular 在社區支持和貢獻上最爲突出。從首頁的介紹示例看出， Angular 使用簡單，代碼邏輯清晰一看就明白，比如數據雙向綁定的示例：
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Backbone.js是一個老牌的 JavaScript 框架了，據說後來的 JavaScript 框架都受了它的影響。它的特點是簡單、靈活，但是很多事情卻要你自己來做。我只是不明白，爲什麼 Backbone.js 的 Getting Started 會寫的那麼冗長，對於初學者真的好嗎？也許真的是應該是老牌框架的原因吧。
React.js 由 FaceBook 開發，現在也是火的不行。 React.js 讓人爲之眼前一亮的功能是 虛擬 DOM 的機制。前面提到，爲了能支持局部刷新，就需要通過 DOM 操作局部更新元素，一旦項目變大需求變的複雜，也會變得難以維護。而虛擬 DOM 解決了這一問題，通過虛擬 DOM ，你只需要關注整體的 DOM ，當數據發生變化時， React 會重新構建整個 DOM 樹， 然後與上一次的 DOM 樹進行對比，自己計算出需要變化的部分。由於虛擬 DOM 都是在內存中操作，所以性能會非常好。
React 推崇組件化開發，提供了專有的語言 JSX ，不過並非必須。一個簡單的 React 組件的例子：
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
} //歡迎加入全棧開發交流圈一起學習交流：1007317281
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
趨勢
關於 Angular.js 、 Backbone.js 、 React.js ， 如果你是這三種的使用者，也許更有發言權一些。我在百度指數裏對比了 angularjs , backbone , react 這三個關鍵字：
可見 Angular 一經推出便先發制人增長迅猛，而 React 開始階段和 Backbone幾乎並列，但從 2015 年開始爆發，增長速度直指 Angular ， 發展不可估量。
總結
未來前端的世界必定會是天翻地覆，過往的發展歷史我能力有限也只能提到這麼多。雖然前端框架還在一直往前發展，但我回過頭來仔細想想，這樣的發展方向正確嗎？
即使很多人並不喜歡 JavaScript ， 但是 JavaScript 憑藉早期的瀏覽器奠定了堅不可摧的地位， JavaScript 有諸多缺陷，後續的框架只是在不斷的彌補它的缺陷而已。還有關於各瀏覽器的支持問題，後續的框架也是在不斷的填坑。你們有沒有想過，是否有一天，我們能從根本上去解決這些問題，而不是一次又一次的背上歷史的包袱。
感謝您的觀看，如有不足之處，歡迎批評指正。
獲取資料👈👈👈
本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：👉👉👉1007317281👈👈👈，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。