探討網(wǎng)站制作下的Web前端開發(fā)設(shè)計

陳曦

摘要：Web環(huán)境早已經(jīng)跨入了2.0時代，網(wǎng)站平臺的職能也從傳統(tǒng)的靜態(tài)數(shù)據(jù)轉(zhuǎn)變?yōu)闉橛脩籼峁└訌?fù)雜的Web服務(wù)，讓用戶獲得良好的體驗。所以，隨著業(yè)務(wù)需求模式的調(diào)整，代碼耦合現(xiàn)象導(dǎo)致了各類代碼擴(kuò)展能力差、迭代難度大的問題。因此，我們需要探討網(wǎng)站制作要求下的Web前端開發(fā)設(shè)計要求，提出模塊化的開發(fā)模式。

關(guān)鍵詞：網(wǎng)站制作;Web前端;開發(fā)設(shè)計

中圖分類號：TP393.092文獻(xiàn)標(biāo)識碼：A文章編號：1672-9129（2020）13-0084-01

Web前端開發(fā)設(shè)計的目的是為了滿足各大平臺網(wǎng)站中不同模塊的需求，對業(yè)務(wù)邏輯進(jìn)行相應(yīng)的調(diào)整，從全局性能優(yōu)化的角度對網(wǎng)站進(jìn)行完善。在設(shè)計完畢之后，我們也希望將相應(yīng)的框架設(shè)計運(yùn)用到云計算平臺項目實現(xiàn)的過程當(dāng)中，構(gòu)建不同類型的用戶模塊，完成設(shè)計與開發(fā)過程。

1Web前端開發(fā)設(shè)計的具體需求

1.1用戶系統(tǒng)需求。Web平臺本身是以網(wǎng)絡(luò)為基礎(chǔ)背景的應(yīng)用服務(wù)類型，是對資源的管理和操作。對于一個完整的平臺來說，一般包括兩個部分，一是用戶服務(wù)系統(tǒng)，二是后臺管理系統(tǒng)。前者是針對平臺的使用者用戶提供各種類型的服務(wù)，后臺管理系統(tǒng)的目標(biāo)群體則是后臺技術(shù)人員，目的在于對各種資源進(jìn)行維護(hù)和其他操作。用戶系統(tǒng)作為平臺的門戶，承擔(dān)了大量的信息獲取任務(wù)，而隨著未來系統(tǒng)需求的不斷增加和功能的擴(kuò)展，前端頁面結(jié)構(gòu)DOM元素也將不斷增加，UI展示邏輯復(fù)雜程度提升，無論是靜態(tài)圖片文件還是其它的異步請求數(shù)據(jù)都會變得更加豐富，頁面加載環(huán)節(jié)瀏覽器需要在短時間內(nèi)渲染大量的信息與文件。此外平臺采用服務(wù)端語言注入后端模板的方式來滿足用戶的個性化要求，雖然能夠在業(yè)務(wù)層面達(dá)到相應(yīng)水準(zhǔn)，但是在開發(fā)過程中，會讓前端和后端職責(zé)出現(xiàn)模糊。面對用戶需求日益復(fù)雜的現(xiàn)狀，現(xiàn)有的開發(fā)模式已經(jīng)顯得有些不足?？傮w來看，用戶系統(tǒng)的前端框架應(yīng)該在滿足信息渲染和信息加載能力的要求之下實現(xiàn)資源的按需分配，在相應(yīng)的網(wǎng)絡(luò)環(huán)境下保持加載能力。從頁面加載的角度來看，縮短用戶的等待時間讓界面能快速展現(xiàn)出來，能夠預(yù)防在網(wǎng)絡(luò)環(huán)境不好時出現(xiàn)空頁、報錯現(xiàn)象。

1.2系統(tǒng)前端開發(fā)需求。當(dāng)前針對管理系統(tǒng)的開發(fā)模式是前后端使用異步請求進(jìn)行通信，基本已經(jīng)實現(xiàn)了數(shù)據(jù)層中的前端和后端分離，在并行開發(fā)方面較為便捷，采用這種方法，在應(yīng)用過程中也不會產(chǎn)生因為后端渲染問題導(dǎo)致的各類錯誤。但問題在于如果數(shù)據(jù)量過大，那么長此以往會導(dǎo)致代碼堆積邏輯性較差，給今后的功能擴(kuò)展和模塊優(yōu)化工作帶來極大困難?？紤]到這一方面的需求，我們針對后臺管理和開發(fā)應(yīng)用需要，可以將前端的邏輯代碼按照功能進(jìn)行劃分，并將不同層次的開發(fā)模式與后臺管理平臺的數(shù)據(jù)驅(qū)動特點進(jìn)行結(jié)合，在層次劃分的基礎(chǔ)上實現(xiàn)代碼模塊化開發(fā)，將子功能進(jìn)行封裝后，將每一個子功能視作獨(dú)立模塊，這樣也能實現(xiàn)代碼解耦滿足代碼復(fù)用與擴(kuò)展要求[1]。

1.3后臺管理系統(tǒng)的前端總體設(shè)計。在分層框架設(shè)計方面，會按照實現(xiàn)功能進(jìn)行劃分，讓前后端分離實現(xiàn)并行開發(fā)。傳統(tǒng)的后臺管理平臺，在展示數(shù)據(jù)過程中方法比較低效，HTML環(huán)境下先進(jìn)行后臺語言測解析再轉(zhuǎn)換為前端代碼會額外消耗時間，且前后端耦合過深會讓后臺修改參數(shù)時影響到前端代碼，對協(xié)同開發(fā)造成不利影響。如果在代碼按照MVC模式進(jìn)行分層基礎(chǔ)上將每一層的功能進(jìn)行細(xì)化并封裝，就能讓子功能模塊相互獨(dú)立，將公共的模塊抽象出來。

2前端開發(fā)設(shè)計方案

2.1信息渲染。在信息渲染模塊當(dāng)中，會將渲染信息與用戶之間的相關(guān)程度作為判定依據(jù)，整個系統(tǒng)會劃分為不同的層次。前端UI層負(fù)責(zé)頁面展示，后臺服務(wù)層負(fù)責(zé)系統(tǒng)業(yè)務(wù)的邏輯規(guī)劃，前端服務(wù)層則負(fù)責(zé)前端和后端之間的用戶數(shù)據(jù)通信要求，通過相應(yīng)的渲染方式取代后端模板嵌入服務(wù)器語言的傳統(tǒng)渲染方法。信息渲染模塊可以讓用戶進(jìn)行信息注冊和登錄并展開信息設(shè)置，讓用戶資源情況在當(dāng)中可以被查看并使用。從網(wǎng)站制作的角度來看，用戶資源加載模塊可以將用戶的信息進(jìn)行顯示，在系統(tǒng)當(dāng)中完成用戶資源信息的渲染，整個過程基于前端層和后臺服務(wù)層的工作模式所進(jìn)行[2]。

2.2頁面加載。網(wǎng)站制作必然涉及到信息的瀏覽，對于承載大流量的頁面來說，既要保證首屏渲染的時間能大幅縮短，又需要在網(wǎng)站穩(wěn)定性的前提下保障良好的展現(xiàn)能力。因此我們在進(jìn)行開發(fā)設(shè)計的過程當(dāng)中，要注意幾個方面的要求。首先是首屏渲染時間的速度，其次是在滾動設(shè)計和部分資源懶加載方面的規(guī)劃，以保障滾動流暢性并減少在特殊時間點出現(xiàn)的網(wǎng)絡(luò)阻塞問題。如果我們將整個網(wǎng)站的資源劃分為首屏資源和次屏資源，前者包括了外部文件、圖片資源和渲染的數(shù)據(jù);后者則包括了數(shù)據(jù)請求和其它靜態(tài)資源請求。針對不同類型的系統(tǒng)需求，在加載方式上也存在差異。例如靜態(tài)文件的加載就是將css文件放置在header標(biāo)簽紙中，讓頁面渲染完畢后等待js文件加載。即便在網(wǎng)絡(luò)環(huán)境不佳的情況下依然要保持用戶體驗，例如在請求等待環(huán)節(jié)設(shè)置一些反饋提示符等。

3結(jié)語

優(yōu)化信息渲染和加載方式，實現(xiàn)前后端并行開發(fā)，是實現(xiàn)代碼高可用和低耦合的發(fā)展趨向。未來互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，讓各種網(wǎng)站和服務(wù)平臺的功能性變得更加重要。針對當(dāng)前平臺開發(fā)過程中存在的各類問題，我們需要基于不同系統(tǒng)和不同需求進(jìn)行開發(fā)設(shè)計，在此基礎(chǔ)之上結(jié)合業(yè)務(wù)內(nèi)容提出模塊化設(shè)計思路。

參考文獻(xiàn)：

[1]于圣彬. 基于HTML5技術(shù)下移動Web前端設(shè)計與開發(fā)的研究[J]. 中國新通信，2018，20（04）：52.

[2]龔電花. 基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化[J]. 信息通信，2018，187（07）：291-293.緊密聯(lián)系、密不可分的。在其規(guī)劃設(shè)計過程中，電子標(biāo)簽在家庭環(huán)境中各類物品中得到了大量安裝，然后聯(lián)系所有物品，從而為家庭成員使用家庭各類物品提供便利性。其中，面對某個物品異常情況的出現(xiàn)，系統(tǒng)可以做到及時發(fā)現(xiàn)問題和解決問題，有效處理物品異常信息[3]。集中整合5G技術(shù)和物聯(lián)網(wǎng)，可以促進(jìn)使用信息收集的順利進(jìn)行，如水電表和煤氣表等，接著借助網(wǎng)絡(luò)的優(yōu)勢，以此來為結(jié)算分析提供依據(jù)和幫助。