周星巖 王俊淘

（沈陽師范大學 遼寧省沈陽市 110034）

近年來，IT 技術朝著多元化方向發(fā)展，瀏覽器段出現(xiàn)了很多性能優(yōu)異、功能強大得到開發(fā)框架，比如 JavaScript、VBScript、Jscript 等腳本。在瀏覽器產(chǎn)品呈多樣化發(fā)展的態(tài)勢中，即便還是存有ECMAScript 標準，但是因其編制相對較遲，故而各個瀏覽器運行階段均設定了各自的標準，這就要求開發(fā)人員面對網(wǎng)頁的同個功能時，要為其編寫出數(shù)份代碼，進而使其在不同瀏覽器中表現(xiàn)出較高的適用性[1]。迄今為止， jQuery 依然是應用范圍最廣的一種框架，其有效應對了過去網(wǎng)頁兼容性問題，使前端變成更具簡潔性。和MVC 模式在前端開發(fā)領域中應用范圍不斷拓展相伴隨的是各種開發(fā)框架的構建，本文主要介紹了幾種主流框架。

1 Web前端模式的演化

早在1989年，就有物理學家研發(fā)出超文本標記語言，即我們耳熟能詳?shù)腍TML。

1993年HTML 演變成成互聯(lián)網(wǎng)草案，原始的HTML 僅是靜態(tài)頁面，無法動態(tài)整改頁面內容。1995年，JavaScript 誕生后使頁面實現(xiàn)了動態(tài)整改，時至今日，我們可以將Web 前端模式細化為如下四個階段[2]：

（1）js 整合原始的瀏覽器API，以瀏覽器的運行機制維基礎直接操作控制、頁面DOM。

（2）Web 2.0 時代到來以后，對Web 開發(fā)提出了更多、更高的要求，ajax日漸流行。為降低跨瀏覽器開發(fā)過程的繁雜性及綜合分析不同瀏覽器之間的兼容性，Dojo、Mootools、Prototype 等前端類庫陸續(xù)出現(xiàn)，jQuery 以簡潔、優(yōu)雅。美觀等設計優(yōu)勢脫穎而出，在業(yè)內占據(jù)著很高的地位。

（3）MVC 模式出現(xiàn)后，在前端技術的引領下，很多后臺的業(yè)務邏輯慢慢轉移至向前端，單獨使用jQuery 經(jīng)常不能滿足繁雜業(yè)務的運轉需求，特別是在單頁面運用方面表現(xiàn)得更為顯著，Backbone.js 應時而生，其被視為前端MVC 框架的鼻祖，顯著提升了前端開發(fā)的價值[3]。

（4）MVVM 模式以MVC 的思想為基礎，巧用數(shù)據(jù)驅動視圖，促進數(shù)據(jù)和視圖兩者的完全分離，這樣前、后端達到了真正意義上的分離，自然而然的在Web 開發(fā)領域中占據(jù)了獨一無二的地位。

2 幾種常見的Web前端開發(fā)框架

2.1 jQuery

jQuery 是JavaScript 的封裝，其主要是用于封裝常規(guī)功能以及處置瀏覽器的兼容性問題。“write less, do more”是其核心宗旨，力爭用簡潔代碼形成多樣化的功能。jQuery 屬于輕量級的腳本，生產(chǎn)版本文件包單一，只有94.8KB。當下已對外發(fā)布了3 個系列的版本，1.12.4、3.5 系列版本應用范圍較寬廣。現(xiàn)存的很多網(wǎng)站對外提供了線上CDN 的jQuery 資源，只要能將特定語言添加至HTML 代碼內便能順利引用jQuery 語法。項目推進階段合理應用jQuery，有助于減少JavaScript 的代碼數(shù)量。

2.2 Angular JS

該框架主要是采用HTML III TypeScript 去建設客戶端應用的平臺，主要是為了解決既往“單頁面運用”時暴露出的不足。當下，該框架己發(fā)布至第二個版本，MVC 框架是最經(jīng)典的模式，對雙向數(shù)據(jù)綁定過程起到了強大的支撐作用；其內的V 作為視圖元素，是利用html實現(xiàn)自身功能的，樣廣大用戶便能清晰的觀察到頁面內容；C 對應的是控制器Controller，基于JavaScript 實現(xiàn)，作為頁面的邏輯部分；M 是數(shù)據(jù)Model，即頁面上存有的數(shù)據(jù)模型[4]。用戶瀏覽網(wǎng)頁過程中，和頁面進行交互，例如點擊、移動、滾動鼠標等后，控制器獲得相應信號去進行處理，處理結束后最明顯的特征是數(shù)據(jù)模式被更新。

Angular JS 和Jquery 項目之間存在較大差異，沒有將所有代碼融合為一，更具簡潔性。應用MVC 模式后，促進代碼邏輯、UI 層兩者的分離過程，代碼的整潔性、清晰度均有很大提升，為信息整改及運維管理等過程創(chuàng)造了很多便利條件。升級后的AngularJS 版本能提供完整度更高的文檔，并提供腳手架Angular CLI 用于搭建環(huán)境，能夠形成庫代碼、運行多種連續(xù)開發(fā)任務，比如檢測、包裝與布置。模塊化是本框架設計時遵循的主要思想，以此為基礎構建出個性化的指令系統(tǒng)，要求工作人員嚴格依照框架設定的方式進行編碼，需在工作團隊的協(xié)助下進行，無形中增加了代碼的可維護性。

2.3 BackBone JS

2010年是該框架的誕生之年，其融合了fUnderscore、Require JS、Handlebar，其中Underscore 持有的功能和jQuery 較為詳細，能夠提供基礎性的功能函數(shù)庫； Require JS 為構成JavaScript 的加載器，能夠使前端代碼對按需加載過程提供強大的支持作用；Handlebar 通過分離view、 data 區(qū)快捷的建設 出Web 模板[5]。Backbone JS 在繁雜的“單頁面運用”中表現(xiàn)出極高的適應能力，其為當時的很多開發(fā)人員提供更輕量、友好性更強的前端開發(fā)處理辦法。Backbone 框架下能夠達到視圖組件化，具體是對繁雜的View 視圖進行切割處理，使其成為微，自行定義出組件模版，完全分離事件綁定與數(shù)據(jù)綁定。2014年前后，Backbone JS 框架在國內外備受歡迎Airbnb、Linkedin、百度貼吧等均用了該框架的局部功能。

2.4 React JS開發(fā)框架

該框架始源于 Facebook 的內部項目，主要被用在搭建用戶界面的JavaScript 庫領域中，將簡潔、獨立的代碼片段組建成繁雜度很高的UI 界面。其性能優(yōu)良、代碼邏輯簡易，能較好的應對既往跨瀏覽器過程出現(xiàn)的兼容性問題。

React Js 能夠直接整合用戶界面，借此方法協(xié)助開發(fā)人員獲得多種交互式網(wǎng)頁。并且將JSX 語法整合至該用戶界面內，能明顯提升復用式組件的簡潔度，操作過程更為簡易，且還能維持組件內部構造的高清晰性。以這些組件為基礎，React Js 能夠精確辨別代碼和現(xiàn)實目標，在瀏覽器內DOM 渲染功能的協(xié)助下去研發(fā)網(wǎng)頁，這是成功研發(fā)原生移動應用功能的重要基礎。

2.5 Vue JS

這是一種建設 web 界面的JavaScript 框架，漸進式是該種框架的主要特征，和其他類型的前端框架相比較，Vue JS 按照從下至上的順序實現(xiàn)增量級開發(fā)、應用，器給予視圖層較高關注，較便捷的和第三方庫或現(xiàn)有項目整合為一[6]。

Vue JS 框架能夠提供極為獨特的MVVM 數(shù)據(jù)捆綁與一個能夠實現(xiàn)組合的組件系統(tǒng)。站在技術層面上分析，MVVM 模式上設定的視圖模型層是 Vue JS 框架關注的焦點，并基于雙向數(shù)據(jù)綁定的形式建設了視圖與模型兩者的連接關系，進而對頁面的效果形成良好的驅動作用。何其他MVVM 框架做比較分析，VueJs 更具操作性，能夠迅速應用異步批處理方法更新DOM，整合應用可復用的、解耦的組件，準許安裝多種類型模塊，情境應用過程也具有很高的靈活性。

3 測試開放能力

3.1 監(jiān)測代碼質量

前端代碼質量是測評框架開發(fā)效率的主要指標之一。利用模塊化思想設計開發(fā)框架，其對開發(fā)人員編寫代碼的方法表現(xiàn)出了強大的支撐作用，引用模板后能更標準、規(guī)范的編寫代碼，明顯減少了既往拼接字符過程中的錯差，也規(guī)避因開發(fā)人員編碼格調不統(tǒng)一而增加框架運維成本的問題[7]。利用 JSHint 檢測框架js 代碼質量，借此方式利用檢測規(guī)則、運行指令去探查到代碼潛在的一些不足。通過檢測js 代碼質量，而后有針對性的整改檢出問題，不僅能優(yōu)化框架編碼品質，還能引領編碼風格標準程度提升過程。

3.2 框架的綜合運用

開發(fā)Web 應用程序時框架的主要作用，運營告示、活動、問題、權限、消息、申請、現(xiàn)金、文件和計劃管理等均是當下主流框架的基本功能。標準 UI 樣式區(qū)規(guī)范頁面樣式。在以上開發(fā)實踐中，采用框架內持有的功能，比如基于數(shù)據(jù)驅動模型形成的差異化渲染、預編譯、數(shù)據(jù)化存儲等功能。

3.3 分析易用性

主要是采用易學習性、易理解性與易操作性去測評前端易用性抵達的程度，需要綜合分析框架的各個功能屬性、模塊學習的難易程度、框架使用者持有的能力。具備JavaScript 開發(fā)實踐經(jīng)驗的人員是框架的主要使用群體，大部分開發(fā)人員對語法、方法能扎實掌握及嫻熟運用。只要能對前端開發(fā)涉及到的數(shù)據(jù)模型與模塊化機制有全面了解，便能順利的了解框架源代碼的內涵，隨后掌握框架的正確應用方法[8]?？蚣苓€對外提供了官網(wǎng)教程與詳盡的應用操作說明，這樣即便是程序員新手也能通過學習教程去掌握框架的具體應用方法。

視圖層、模型層和視圖模型層是構成框架的三個主要層次。模塊化思想明顯提升了視圖層代碼編寫過程的簡潔度，幫助相關人員更快捷的掌握模塊的操作使用方法。熟悉模板語法是模型層學習過程中的核心內容，框架外供極為豐富的指令集去提升模板的簡潔度，便有開發(fā)人員靈活使用。

4 結束語

本文簡要分析、概括了Web 框架的發(fā)展演進過程，闡述了五種Web 主流前端框架的發(fā)展、應用情況。若被開放的項目屬于“多頁面應用”的范疇，PC 斷客戶是主要的用戶群，那么 jQuery 能較好的滿足現(xiàn)實需求；如果熱衷于Typescript 語法，則推薦使用Angular 2.x 。在互聯(lián)網(wǎng)技術不斷發(fā)展的時代背景下，相信將會成功研發(fā)出更多樣、功能更為優(yōu)異的Web 前端框架，進而為眾多開發(fā)者提供更多品質優(yōu)良、運行高效的工具。