面向Web2.0的web應用前端開發(fā)框架設計研究

曾李青

摘 要：隨著Web2.0相關理念和技術的發(fā)展，消費者市場中互聯(lián)網產品的競爭越來越激烈，而互聯(lián)網后臺邏輯處理和前端開發(fā)都以多種復雜技術為依托，致使其整體開發(fā)的難度較大、周期較長，應用開發(fā)效率相對較低。主要研究了面向Web2.0的web應用前端開發(fā)框架設計，以期提升互聯(lián)網產品的研發(fā)效率。

關鍵詞：Web2.0；web應用前端；開發(fā)框架設計；JavaScript插件

中圖分類號：TP311.52 文獻標識碼：A DOI：10.15913/j.cnki.kjycx.2015.22.016

Web2.0屬于一種全新的傳播方式，它不僅是互聯(lián)網技術的改進，而且強調公開個人的真實表達和共同建設互聯(lián)網的開發(fā)理念，其應用過程中的網站數(shù)據(jù)允許用戶隨意上傳和下載，信息共享程度高；每個用戶在網站系統(tǒng)中都擁有獨屬于個人的數(shù)據(jù)，通過直接的瀏覽器既可以實現(xiàn)所有功能，又省去了相關客戶端安裝環(huán)節(jié)，在多人參與、可讀可寫的同時，為互聯(lián)網產品創(chuàng)新提供可能。

1 web應用前端開發(fā)框架需求

面向Web2.0的web應用前端開發(fā)框架需求包括功能性和非功能性兩個方面。功能性需求主要包括頁面元素的樣式、JavaScript插件的正確使用、對頁面布局進行整體設計和公共banner設計四個方面；而非功能性需求包括滿足用戶體驗、對前端頁面加載速度進行優(yōu)化和瀏覽器不兼容問題三個方面。因此，面向Web2.0的web應用前端開發(fā)框架設計要以上述內容為基礎，以解決實際問題為目標。

2 web應用前端開發(fā)框架設計

2.1 瀏覽器兼容性方案設計

由于瀏覽器針對網頁前端代碼解析具有不一致性，即使同一個網頁在不同瀏覽器中的顯示效果也存在明顯的差異，因此瀏覽器兼容性一直是前端開發(fā)過程中的重點和難點。如何使網頁在不同瀏覽器中能夠適應相應的解析標準，從而實現(xiàn)不同瀏覽器都得到良好的顯示效果，是網站開發(fā)者所面臨的主要問題，而通過瀏覽器開發(fā)商確定所有瀏覽器統(tǒng)一使用的解析標準，使網頁在不同的瀏覽器中得到同等的解析，是保證用戶體驗效果的有效方法。萬維網聯(lián)盟標準，即W3C是諸多解析標準的集合，可以從CSS、ECMAScript及XHTML和XML三個方面與網頁的表現(xiàn)、行為、結構三部分相對應，因此，在瀏覽器開發(fā)的過程中統(tǒng)一使用此標準可以保證網頁在不同的瀏覽器中均能夠達到預期的使用效果。但值得注意的是，萬維網聯(lián)盟中所使用的標準并不是全部由其自主研發(fā)，比如ECMAScript是由其他標準組織所指定?，F(xiàn)階段，除舊版本瀏覽器仍在改進外，大部分主流瀏覽器都嚴格依據(jù)萬維網聯(lián)盟標準，因此，萬維網聯(lián)盟標準是互聯(lián)網瀏覽器使用標準的必然選擇。在面向Web2.0的web應用前端開發(fā)框架設計的過程中，要積極應用萬維網聯(lián)盟標準，不斷優(yōu)化用戶的瀏覽器。當在運作的過程中通過檢測代碼檢測到用戶所使用的瀏覽器版本較低時或為實現(xiàn)兼容，要及時提示用戶更新，并為用戶提供直接下載最新版本的正確網址，以達到推動用戶及時更新瀏覽器的目的。此設計雖未真正解決瀏覽器不全面兼容的問題，但萬維網聯(lián)盟標準的統(tǒng)一使用促成了應用前端開發(fā)框架的一致性，同樣解決了相應的現(xiàn)實問題。

2.2 CSS樣式方案設計

由于CSS（疊層樣式表）樣式對前端框架的整體風格具有決定性，而且影響著用戶使用的具體效果，因此在前端框架設計過程中占有重要地位。在設計過程中，首先應以UI組件為基礎進行方案設計?？紤]到增加表格、列表等多樣組建樣式雖有效保證了組建的集成度，使用戶在應用的過程中可以根據(jù)實際需要直接使用，極其方便，但由于組建結構相對復雜，靈活性無法得到全面保證，因此在設計的過程中需有意識地加入涉及范圍更廣、優(yōu)先級更優(yōu)越的小粒度基礎樣式，以達到既能靈活改變集成的UI組件樣式屬性，又能根據(jù)現(xiàn)實需要直接構成所需樣式的目的，將方便性和靈活性有機結合。因此，面向Web2.0的web應用前端開發(fā)框架設計過程中的CSS樣式設計應積極將兩者相結合。

2.3 JavaScript解決方案設計

JavaScript以對象和事件驅動為基礎，具有一定安全性的客戶端腳本語言，不僅可以應用于客戶端Web開發(fā)方面，在對HTML網頁增添動態(tài)功能方面具有較好的效果，也可以應用于服務器端編程等方面。完整的JavaScript包含ECMAScript、文檔對象模型、字節(jié)順序記號三部分，因此，其在前端框架中主要起著保障全局方法的使用和調動jQuery插件的使用作用。在設計過程中根據(jù)JavaScript的作用在完整的網絡開發(fā)環(huán)境中自動調試和完成JavaScript代碼，獲得Ajax類庫的支持，并對源編輯程序進行改進，保證其既能支持多種語言，又能檢查語法。

2.4 文件組織結構設計

CSS組織文件的設計主要針對對外公共文件publiacss、樣式重置文件reset.css、各種UI插件樣式所在文件plugin.css、各種基礎樣式所在文件layout.css，針對每一類文件在前端開發(fā)中的作用進行設計，以解決瀏覽器樣式標準不統(tǒng)一、傳統(tǒng)樣式不靈活等問題。由于以上CSS文件在網頁使用過程中均有被使用的可能，因此在前端開發(fā)框架設計過程中，將所有的文件壓縮為public.css統(tǒng)一使用，避免過多的請求影響用戶的使用質量。此外，JavaScript文件組織結構設計理論與CSS基本一致。

3 結論

綜上所述，面向Web2.0的web應用前端開發(fā)框架設計是為解決人們在生產生活中面臨的實際問題而產生的，因此在設計的過程中方向較明確，而且設計的意義深遠。通過面向Web2.0的web應用前端開發(fā)框架設計，不斷深化、合理利用互聯(lián)網產品前端開發(fā)重復性特點，不僅可縮短互聯(lián)網產品的開發(fā)周期，還可滿足實際需求。這是互聯(lián)網產品發(fā)展的必然選擇，也是其進步的具體表現(xiàn)。

參考文獻

[1]喬淑夷.基于MVC模式的web前端框架關鍵技術研究與實現(xiàn)[D].青島：中國海洋大學，2014.

[2]劉靖桐.面向Web2.0的web應用前端開發(fā)框架的設計與實現(xiàn)[D].北京：北京郵電大學，2014.

[3]崔偉毅.面向Web的組合環(huán)境設計和應用構建[D].上海：復旦大學，2008.

〔編輯：劉曉芳〕