對(duì)于大多數(shù)前端框架，我想聊一聊，這些前端框架從何而來(lái)，解決了什么問(wèn)題，又有哪些高明之處。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括阿魯科爾沁網(wǎng)站建設(shè)、阿魯科爾沁網(wǎng)站制作、阿魯科爾沁網(wǎng)頁(yè)制作以及阿魯科爾沁網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，阿魯科爾沁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到阿魯科爾沁省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

認(rèn)識(shí)了解問(wèn)題，切忌一頭扎進(jìn)去研究而未了解其全貌。為此，我們追溯到20世紀(jì)90年代，網(wǎng)景瀏覽器橫空出世，占據(jù)了瀏覽器市場(chǎng)第一的份額。那時(shí)的網(wǎng)景瀏覽器已經(jīng)搭載了 Cookie、 Frames 和 JavaScript 等功能，可惜好景不長(zhǎng)，再后來(lái)與微軟的“瀏覽器大戰(zhàn)”中敗下了陣來(lái)。

于是網(wǎng)景公司將代碼開源，創(chuàng)造了 Mozilla ，也就是現(xiàn)在的 Firefox?？梢哉f(shuō)，瀏覽器大戰(zhàn)從未停止過(guò)，Opera 、 Safari 、 Google Chrome …… 當(dāng)然，還有微軟的 Internet Explorer 以及一些其他的瀏覽器。各瀏覽器引擎不同，標(biāo)準(zhǔn)不一，苦了的就是我們的主角：前端開發(fā)。

排版引擎

所有這些瀏覽器，使用最廣泛的無(wú)非是這些引擎：?Gecko 、 WebKit 和 Trident。最早的 Netscape 使用的是 Gecko 排版引擎，后來(lái)的 Firefox 繼承了它的衣缽。微軟從 Spyglass 公司買來(lái)技術(shù)開發(fā)了 Internet Explorer ， 使用了 Trident 引擎。蘋果開發(fā)了 WebKit ，做出了 Safari 瀏覽器，后來(lái)引擎開源， Google 做出了基于 WebKit 的 Chrome 。

有人會(huì)說(shuō)，那 QQ瀏覽器、360瀏覽器、世界之窗、搜狗瀏覽器之類的，這些瀏覽器只是套了 Chrome 或 IE 的內(nèi)核罷了。

而和前端程序員打交道的，最終就是這三樣?xùn)|西： HTML 、 CSS 、 JavaScript 。

JavaScript

HTML 負(fù)責(zé)描述界面的元素結(jié)構(gòu)， CSS 負(fù)責(zé)描述界面的樣式表現(xiàn)， JavaScript 負(fù)責(zé)界面元素的交互和與后臺(tái)數(shù)據(jù)的交互。早期的靜態(tài)網(wǎng)頁(yè)，甚至不需要 JavaScript ，因?yàn)椴恍枰嗟慕换?。即使用?JavaScript ，最多也是用于表單驗(yàn)證、彈彈提示框。

隨著 Web2.0 的概念炒起來(lái)，動(dòng)態(tài)網(wǎng)站逐漸成為主流。早期的動(dòng)態(tài)網(wǎng)站，隨便的一個(gè)數(shù)據(jù)更新都要刷新整個(gè)頁(yè)面，體驗(yàn)逐漸變得不可接受。于是，局部數(shù)據(jù)刷新成了當(dāng)時(shí)的熱點(diǎn)，這就是當(dāng)年炒的很熱的 Ajax 技術(shù)。

Ajax 的全稱是 Asynchronous JavaScript and XML , 即異步 JavaScript 和 XML 技術(shù)。當(dāng)時(shí)炒的神乎其神，而其根本本質(zhì)其實(shí)很簡(jiǎn)單，就是 XMLHttpRequest ，然后配合 DOM 的操作，就可以變化出各種不同的花樣出來(lái)。 XMLHttpRequest 負(fù)責(zé)和服務(wù)器交互，返回?cái)?shù)據(jù)后通過(guò) DOM 的操作動(dòng)態(tài)實(shí)時(shí)的更新界面元素。

然而，一個(gè)簡(jiǎn)簡(jiǎn)單單的 Ajax ，各個(gè)瀏覽器的支持卻不同。為了兼容不同的瀏覽器，導(dǎo)致寫 Ajax 變得異常痛苦。比如，一個(gè) 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)  {}

????}                         //歡迎加入全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

}

單單一個(gè) XmlHttpRequest 就讓前端程序員百苦難辯，更別說(shuō)跨瀏覽器的 DOM 選擇與操作、 CSS 的差異…… 前端程序員只能默默檫干眼淚，為了解決這些問(wèn)題， jQuery 橫空出世。

jQuery

jQuery 是一套跨瀏覽器的 JavaScript 庫(kù)，既然大家都這么痛苦要處理兼容問(wèn)題，那何不讓我一個(gè)人來(lái)承受。自 jQuery 從 2006 年 1 月發(fā)布第一個(gè)版本以來(lái)，現(xiàn)在已完全占領(lǐng)市場(chǎng)。據(jù)統(tǒng)計(jì)，全球前10,000個(gè)訪問(wèn)最高的網(wǎng)站中，有65%使用了jQuery 。

jQuery 不僅解決了瀏覽器兼容的問(wèn)題，還提供了大量的簡(jiǎn)便語(yǔ)法，用于選擇和操作 DOM 對(duì)象、創(chuàng)建動(dòng)畫效果、處理事件以及 Ajax 的支持。

得麒麟才子者，可得天下。 jQuery 出來(lái)后，有種得 jQuery 者可得前端天下的感覺(jué)。隨后基于 jQuery 的各種 UI 插件、組件層出不窮，如 YUI 等等，也呈現(xiàn)出百花齊放的氣象。

似乎 jQuery 已經(jīng)解決了所有問(wèn)題，而我對(duì)前端開發(fā)的經(jīng)驗(yàn)，也止于 jQuery 。 jQuery 的確能解決之前的諸多問(wèn)題，然而互聯(lián)網(wǎng)在發(fā)展，瀏覽器的地位不斷提高，人們對(duì)瀏覽器里的體驗(yàn)的要求也逐漸變高，Web 端的功能越來(lái)越重。 Google 甚至認(rèn)為你的電腦僅僅需要一個(gè)瀏覽器即可。

需求越來(lái)越多，功能越來(lái)越復(fù)雜，使得 JavaScript 本身的缺點(diǎn)暴露了出來(lái)。 JavaScript 過(guò)于靈活，代碼的組織過(guò)于零散，一旦需求變得復(fù)雜，這一大坨一大坨的 JavaScript 代碼將變得難以維護(hù)。特別是如今崇尚的快速開發(fā)、快速試錯(cuò)的開發(fā)模式，臃腫、難以組織和維護(hù)的 JavaScript 代碼成了一個(gè)需要重要解決的問(wèn)題。 歡迎加入全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

于是，如何將 JavaScript 代碼有效的組織和分類，如何簡(jiǎn)化代碼的寫法成為了研究的重點(diǎn)。就連 1978 年就被提出的 MVC 模式也被應(yīng)用到了前端開發(fā)的框架之中。

MVC

MVC 是一種軟件架構(gòu)分層的思想。將軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和控制器（Controller）。

• （控制器 Controller）- 負(fù)責(zé)轉(zhuǎn)發(fā)請(qǐng)求，對(duì)請(qǐng)求進(jìn)行處理。
• （視圖 View） - 界面設(shè)計(jì)人員進(jìn)行圖形界面設(shè)計(jì)。
• （模型 Model） - 程序員編寫程序應(yīng)有的功能（實(shí)現(xiàn)算法等等）、數(shù)據(jù)庫(kù)專家進(jìn)行數(shù)據(jù)管理和數(shù)據(jù)庫(kù)設(shè)計(jì)(可以實(shí)現(xiàn)具體的功能)。

MVC 的優(yōu)點(diǎn)是將系統(tǒng)進(jìn)行了分層，單獨(dú)的分層變得邏輯更加清晰，便于維護(hù)，提高了代碼的可重用性，由于各司其職，在響應(yīng)變化時(shí)，也能做出快速反應(yīng)。

應(yīng)用到前端開發(fā)， MVC 里的 Model 、 View 、 Controller 分別對(duì)應(yīng)：

• （控制器 Controller）：業(yè)務(wù)邏輯，URL Router
• （視圖 View）：用戶界面，DOM 處理。
• （模型 Model）：數(shù)據(jù)保存

除了 MVC ，還有 MVP、 MVVM 等模型。然而，這些所謂的概念真的重要嗎？黑貓白貓都是好貓，能解決問(wèn)題的才是好模型好框架。

xxx.js

后面出來(lái)的 xxx.js 我就不太懂了。比如：Ember.js、Angular.js、Backbone.js、Knockout.js、React.js。直到寫這篇文章前，才打開各自的主頁(yè)，粗略的瀏覽了一下各自的 Quick Start ， 了解了一點(diǎn)各自的特性。

首先，我們來(lái)對(duì)比一下這幾個(gè)庫(kù)在 GitHub 上的 關(guān)注度 ：

從上面的數(shù)據(jù)可以看出，?Angular.js 、 Backbone.js 、 React.js幾乎占據(jù)了半壁江山。

Angular.js由 Google 推出，從上面的 Fork 數(shù)據(jù)看出， Angular 在社區(qū)支持和貢獻(xiàn)上最為突出。從首頁(yè)的介紹示例看出， Angular 使用簡(jiǎn)單，代碼邏輯清晰一看就明白，比如數(shù)據(jù)雙向綁定的示例：

<!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是一個(gè)老牌的 JavaScript 框架了，據(jù)說(shuō)后來(lái)的 JavaScript 框架都受了它的影響。它的特點(diǎn)是簡(jiǎn)單、靈活，但是很多事情卻要你自己來(lái)做。我只是不明白，為什么 Backbone.js 的 Getting Started 會(huì)寫的那么冗長(zhǎng)，對(duì)于初學(xué)者真的好嗎？也許真的是應(yīng)該是老牌框架的原因吧。

React.js?由 FaceBook 開發(fā)，現(xiàn)在也是火的不行。 React.js 讓人為之眼前一亮的功能是?虛擬 DOM的機(jī)制。前面提到，為了能支持局部刷新，就需要通過(guò) DOM 操作局部更新元素，一旦項(xiàng)目變大需求變的復(fù)雜，也會(huì)變得難以維護(hù)。而虛擬 DOM 解決了這一問(wèn)題，通過(guò)虛擬 DOM ，你只需要關(guān)注整體的 DOM ，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)， React 會(huì)重新構(gòu)建整個(gè) DOM 樹， 然后與上一次的 DOM 樹進(jìn)行對(duì)比，自己計(jì)算出需要變化的部分。由于虛擬 DOM 都是在內(nèi)存中操作，所以性能會(huì)非常好。

React 推崇組件化開發(fā)，提供了專有的語(yǔ)言 JSX ，不過(guò)并非必須。一個(gè)簡(jiǎn)單的 React 組件的例子：

var  HelloMessage  =  React.createClass({

??render:  function()  {

????return  <div>Hello  {this.props.name}</div>;

??}                  //歡迎加入全棧開發(fā)交流圈一起學(xué)習(xí)交流：1007317281

});

ReactDOM.render(<HelloMessage name="John"  />,  mountNode);

趨勢(shì)

關(guān)于 Angular.js 、 Backbone.js 、 React.js ， 如果你是這三種的使用者，也許更有發(fā)言權(quán)一些。我在百度指數(shù)里對(duì)比了 angularjs , backbone , react 這三個(gè)關(guān)鍵字：

可見(jiàn) Angular 一經(jīng)推出便先發(fā)制人增長(zhǎng)迅猛，而 React 開始階段和 Backbone幾乎并列，但從 2015 年開始爆發(fā)，增長(zhǎng)速度直指 Angular ， 發(fā)展不可估量。

總結(jié)

未來(lái)前端的世界必定會(huì)是天翻地覆，過(guò)往的發(fā)展歷史我能力有限也只能提到這么多。雖然前端框架還在一直往前發(fā)展，但我回過(guò)頭來(lái)仔細(xì)想想，這樣的發(fā)展方向正確嗎？

即使很多人并不喜歡 JavaScript ， 但是 JavaScript 憑借早期的瀏覽器奠定了堅(jiān)不可摧的地位， JavaScript 有諸多缺陷，后續(xù)的框架只是在不斷的彌補(bǔ)它的缺陷而已。還有關(guān)于各瀏覽器的支持問(wèn)題，后續(xù)的框架也是在不斷的填坑。你們有沒(méi)有想過(guò)，是否有一天，我們能從根本上去解決這些問(wèn)題，而不是一次又一次的背上歷史的包袱。
感謝您的觀看，如有不足之處，歡迎批評(píng)指正。
**獲取資料

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

文章標(biāo)題：走進(jìn)前端開發(fā)——框架的演變-創(chuàng)新互聯(lián)
文章來(lái)源：http://www.rwnh.cn/article24/ceisje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、面包屑導(dǎo)航、域名注冊(cè)、搜索引擎優(yōu)化、微信公眾號(hào)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)