web新興前端框架與模式研究

《web新興前端框架與模式研究》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。

1、Web新興前端框架與模式研究-電子商務(wù)論文Web新興前端框架與模式研究文／占東明洪家偉陳希楊徐禮飛辛鄢放摘要：隨著互聯(lián)網(wǎng)的進(jìn)步，傳統(tǒng)的Web技術(shù)已經(jīng)不能滿足于人們對(duì)交互體驗(yàn)的更高要求，使用ReactJS，bootstrap，AngularJS，H5等新興技術(shù)成為未來(lái)前端開(kāi)發(fā)的必然選擇；展示了近幾年興起的新興技術(shù)和工程化思想，分析其優(yōu)缺點(diǎn)；指出應(yīng)用和應(yīng)對(duì)這些技術(shù)是未來(lái)幾年前端發(fā)展的重要課題。關(guān)鍵詞：前端發(fā)展；前端模塊化；AngularJs；HTML5；Webpack；Backbonejs；Reactjs

2、引言近年來(lái)隨著前端領(lǐng)域的大跨步發(fā)展，前端領(lǐng)域的技術(shù)方向呈現(xiàn)出了百花齊放的盛況。許多前端學(xué)習(xí)者在面對(duì)如此多元化的技術(shù)方向時(shí)，不免感到疑惑和茫然。本文旨在探討近年來(lái)前端領(lǐng)域里一些框架和模式的應(yīng)用方向及其特點(diǎn)。綜合考慮了客觀規(guī)律和主觀判斷的因素，以此為前端人員在技術(shù)決策提供科學(xué)、合理的分析。1、前端基石與催化劑1.1瀏覽器的躍進(jìn)現(xiàn)在H5已經(jīng)成為了一個(gè)符號(hào)，基本上所有具有絢麗界面或者交互的Web界面，無(wú)論是PC還是Mobile端，都被稱為基于H5。H5技術(shù)的發(fā)展以及帶來(lái)的一系列前端的變革，都離不開(kāi)現(xiàn)代瀏覽器的

3、發(fā)展與以IE為典型代表的老的瀏覽器的消逝。1.2瀏覽器端的魔術(shù)：AJAXAJAX即“AsynchronousJavaScriptandXML”（異步的JavaScript與XML技術(shù)），指的是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，可以基于JavaScript的XmlHttpRequest的用于創(chuàng)建交互性更強(qiáng)的Web應(yīng)用。AJAX是一種已有技術(shù)的mashup，多種技術(shù)組合在一起形成了其特色和優(yōu)勢(shì)，早在1998年就已經(jīng)開(kāi)始有人使用。Google在地圖和Gmail等產(chǎn)品中對(duì)這項(xiàng)技術(shù)的深入應(yīng)用，以及AJA

4、X這個(gè)吸引眼球的名字的提出，使其正式站在了聚光燈下，開(kāi)始吸引無(wú)數(shù)人的目光。我們知道Web應(yīng)用中用戶提交表單時(shí)就向Web服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器接收并處理傳來(lái)的表單，并返回一個(gè)新的網(wǎng)頁(yè)。而前后兩個(gè)頁(yè)面中的往往大部分HTML代碼是一樣的，每次都返回整個(gè)頁(yè)面內(nèi)容是一種帶寬資源的浪費(fèi)。而AJAX應(yīng)用僅向服務(wù)器發(fā)送并取回必須的數(shù)據(jù)，并在客戶端采用JavaScript處理來(lái)自服務(wù)器響應(yīng)，更新頁(yè)面的局部信息。這樣不僅瀏覽器和服務(wù)器的數(shù)據(jù)交換大大減少，而且客戶端也可以更加快速地響應(yīng)用戶操作。如果你用Gmail就應(yīng)該

5、知道，Gmail從來(lái)都不刷新頁(yè)面，所有的請(qǐng)求都是通過(guò)AJAX獲取數(shù)據(jù)進(jìn)行局部更新。AJAX的出現(xiàn)，以及諸如EXTJS、DOJO等一些前端開(kāi)發(fā)框架的出現(xiàn)，也使得單頁(yè)應(yīng)用（SinglePageApplication）在這個(gè)時(shí)候流行起來(lái)。1.3ECMAScript2015年是JavaScript誕生的20周年。同時(shí)又是ES6標(biāo)準(zhǔn)落地的一年。ES6是迄今為止ECMAScript標(biāo)準(zhǔn)最大的變革(如果不算上胎死腹中的ES4的話)，帶來(lái)了一系列令開(kāi)發(fā)者興奮的新特性。從目前es的進(jìn)化速度來(lái)看，es后面應(yīng)該會(huì)變成一個(gè)個(gè)

6、的feature發(fā)布而不是像以前那樣大版本號(hào)的方式，所以現(xiàn)在官方也在推薦ES+年份這種叫法而不是ES+版本。更讓人興奮的是，JavaScript慢慢不再局限于前端開(kāi)發(fā)中，NodeJs的提出讓人們感受到了利用JavaScript進(jìn)行全棧開(kāi)發(fā)的能力，從此大大提高了開(kāi)發(fā)的效率（至少不用多學(xué)習(xí)一門語(yǔ)言）。JavaScript在物聯(lián)網(wǎng)中的應(yīng)用也曾經(jīng)引起一些追捧與風(fēng)潮，不過(guò)今年物聯(lián)網(wǎng)社區(qū)更加冷靜地看待著這個(gè)問(wèn)題，但是并不影響各大廠商對(duì)于JavaScript的支持，可以參閱《JavaScriptBeyondtheW

7、ebin2015》這篇文章。可以預(yù)見(jiàn)JavaScript在其他領(lǐng)域?qū)⒗^續(xù)大放異彩，畢竟ECMAScript6，7已經(jīng)是如此的優(yōu)秀。2、模塊化和工程化2.1前端MVC：Angular/Backbone這種模式下，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點(diǎn)是Ajax接口，規(guī)定好交互接口后，前后端工程師就可以根據(jù)約定，分頭開(kāi)工，開(kāi)發(fā)環(huán)境中通過(guò)Mock等方式進(jìn)行測(cè)試，同時(shí)在特定時(shí)間節(jié)點(diǎn)進(jìn)行前后端集成測(cè)試。但是，隨著業(yè)務(wù)功能的愈發(fā)復(fù)雜（看看現(xiàn)在的Gmail），這種模式本質(zhì)上和JSP時(shí)代的Web開(kāi)發(fā)并無(wú)本質(zhì)區(qū)別，只

8、不過(guò)是將復(fù)雜的業(yè)務(wù)邏輯從JSP文件轉(zhuǎn)移到了JavaScript文件中而已?，F(xiàn)在，對(duì)于一個(gè)前端功能、交互復(fù)雜的SPA，JavaScript代碼很容易膨脹（超過(guò)10萬(wàn)行）。很自然地，像服務(wù)端從JSP向MVC框架轉(zhuǎn)換的過(guò)程一樣，前端開(kāi)發(fā)也出現(xiàn)了大量的MVC框架，比較典型的包括BackboneJS，AngularJS，EmberJS，KnockoutJS?？偟膩?lái)說(shuō)，MV*框架的提出是為了解決前端開(kāi)發(fā)的復(fù)雜度，提供一套規(guī)則組織代碼、分層（MVC），通過(guò)合理的組織和