溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于大多數前端框架，我想聊一聊，這些前端框架從何而來，解決了什么問題，又有哪些高明之處。
認識了解問題，切忌一頭扎進去研究而未了解其全貌。為此，我們追溯到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 。
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 是一套跨瀏覽器的 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 是一種軟件架構分層的思想。將軟件系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。
MVC 的優點是將系統進行了分層，單獨的分層變得邏輯更加清晰，便于維護，提高了代碼的可重用性，由于各司其職，在響應變化時，也能做出快速反應。
應用到前端開發， MVC 里的 Model 、 View 、 Controller 分別對應：
除了 MVC ，還有 MVP、 MVVM 等模型。然而，這些所謂的概念真的重要嗎？黑貓白貓都是好貓，能解決問題的才是好模型好框架。
后面出來的 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>
??????<h2>Hello {{yourName}}!</h2>
????</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 有諸多缺陷，后續的框架只是在不斷的彌補它的缺陷而已。還有關于各瀏覽器的支持問題，后續的框架也是在不斷的填坑。你們有沒有想過，是否有一天，我們能從根本上去解決這些問題，而不是一次又一次的背上歷史的包袱。
感謝您的觀看，如有不足之處，歡迎批評指正。
**獲取資料
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
