曾李青

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

關(guān)鍵詞：Web2.0；web應(yīng)用前端；開發(fā)框架設(shè)計(jì)；JavaScript插件

中圖分類號(hào)：TP311.52 文獻(xiàn)標(biāo)識(shí)碼：A DOI：10.15913/j.cnki.kjycx.2015.22.016

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

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

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

2 web應(yīng)用前端開發(fā)框架設(shè)計(jì)

2.1 瀏覽器兼容性方案設(shè)計(jì)

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

2.2 CSS樣式方案設(shè)計(jì)

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

2.3 JavaScript解決方案設(shè)計(jì)

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

2.4 文件組織結(jié)構(gòu)設(shè)計(jì)

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

3 結(jié)論

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

參考文獻(xiàn)

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

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

[3]崔偉毅.面向Web的組合環(huán)境設(shè)計(jì)和應(yīng)用構(gòu)建[D].上海：復(fù)旦大學(xué)，2008.

〔編輯：劉曉芳〕