湯孝云，徐明偉

摘要：就當(dāng)下Web在網(wǎng)頁設(shè)計(jì)開發(fā)的現(xiàn)狀進(jìn)行分析，在組織信息的過程中參考的基本單位即為網(wǎng)頁，在傳統(tǒng)設(shè)計(jì)方式之下，會(huì)導(dǎo)致Web應(yīng)用開發(fā)效率不高，增大后期維護(hù)任務(wù)量。本研究主要結(jié)合Web在網(wǎng)頁設(shè)計(jì)開發(fā)過程中出現(xiàn)的問題，構(gòu)建出模塊化網(wǎng)頁設(shè)計(jì)方式，并進(jìn)行模塊化網(wǎng)頁瀏覽，從而使開發(fā)效率得到提升，減輕維護(hù)任務(wù)。

關(guān)鍵詞：Web;模塊化;網(wǎng)頁設(shè)計(jì);瀏覽技術(shù)

中圖分類號：TP393? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）21-0134-02

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

借助Web的模塊化網(wǎng)頁設(shè)計(jì)技術(shù)，能夠有效維護(hù)、組織信息，明顯優(yōu)于傳統(tǒng)設(shè)計(jì)方式，大大改善了Web應(yīng)用設(shè)計(jì)開發(fā)效率。而且在這種網(wǎng)頁設(shè)計(jì)技術(shù)的支持下，能夠?yàn)樵L問者的瀏覽提供便利，可以將關(guān)鍵信息呈現(xiàn)出來，全面提高了網(wǎng)頁瀏覽性能。

1 Web模塊化的網(wǎng)頁設(shè)計(jì)

在開展程序設(shè)計(jì)工作時(shí)，一般都會(huì)將反復(fù)利用的程序制作為子模塊。在對程序段進(jìn)行運(yùn)用的過程中，僅需借助語句對子模塊進(jìn)行調(diào)用即可，這種設(shè)計(jì)方式應(yīng)用的就是模塊化程序設(shè)計(jì)理念。利用Web模塊化的設(shè)計(jì)方式，能夠確保開發(fā)程序的設(shè)計(jì)任務(wù)不會(huì)過于繁重，也有效降低了程序錯(cuò)誤問題的發(fā)生。如果需要改動(dòng)程序功能，僅需對相關(guān)子模塊進(jìn)行修改，不必要完全修改程序，由此減輕了維護(hù)、修改網(wǎng)頁程序的任務(wù)量。

在不斷研究和分析眾多網(wǎng)頁之后，能夠得知網(wǎng)站內(nèi)的頁面中包括多種信息，而且相同信息的量也較多，包括：廣告、版權(quán)信息以及標(biāo)頭等。參考程序設(shè)計(jì)過程中所運(yùn)用的模塊化設(shè)計(jì)理念，將其運(yùn)用到網(wǎng)頁設(shè)計(jì)方面，由此形成了模塊化網(wǎng)頁設(shè)計(jì)基礎(chǔ)[1]。針對網(wǎng)頁開展模塊化設(shè)計(jì)，能夠使網(wǎng)頁開發(fā)設(shè)計(jì)任務(wù)量得到明顯的減輕，同時(shí)也容易對網(wǎng)站開展后期修改、維護(hù)等操作，從而更加高效化的組織信息，最終能夠達(dá)到使Web性能得到全面改善的效果。

Web模塊化網(wǎng)頁設(shè)計(jì)的核心理念即為：基于Web，將基本單位設(shè)定為模塊，完成組織信息的操作。主模塊、多個(gè)子模塊共同組成了網(wǎng)頁，其中主模塊與程序主函數(shù)作用相同，可以將其視作網(wǎng)頁主干。程序必須具備主函數(shù)，同樣網(wǎng)站頁面也應(yīng)擁有其主模塊。從本質(zhì)上看，網(wǎng)頁主模塊像容器一樣，能夠?qū)ψ幽K進(jìn)行存放，也能夠?qū)Χ喾N頁面元素進(jìn)行存放，例如：圖片和文本等。

而網(wǎng)頁子模塊的主要功能就是基本頁面元素進(jìn)行組織、存放，一般會(huì)將應(yīng)用率較高的元素制作為子模塊，會(huì)借助獨(dú)立模塊文件的方式來對子模塊進(jìn)行存放處理。對頁面進(jìn)行制作的過程中，利用子模塊能夠針對頁面元素開展相關(guān)操作，例如：刪除或插入等[2]。結(jié)合實(shí)際需求，還可以將其余子模塊嵌入到子模塊內(nèi)，進(jìn)行多層嵌套處理。

通常認(rèn)為網(wǎng)頁包括腳注模塊、左/右導(dǎo)航模塊、主內(nèi)容模塊以及標(biāo)頭模塊五大子模塊，在這種網(wǎng)頁結(jié)構(gòu)下開展相關(guān)設(shè)計(jì)工作。網(wǎng)頁模塊結(jié)構(gòu)示意圖詳見下圖：

在網(wǎng)站的網(wǎng)頁中，上腳注模塊、標(biāo)頭模塊均固定不變，而且左/右導(dǎo)航兩大模塊基本上也相類似，不會(huì)出現(xiàn)較大的變動(dòng)。網(wǎng)頁存在的差異主要在于不同的主內(nèi)容模塊，但是在主內(nèi)容模塊內(nèi)所含有的詳細(xì)內(nèi)容，不同網(wǎng)頁中也會(huì)出現(xiàn)重復(fù)的現(xiàn)象，在這種情況下就需要將子模塊嵌套到網(wǎng)頁主內(nèi)容模塊內(nèi)，從而達(dá)到重用信息的目的。

2 Web模塊化網(wǎng)頁的瀏覽

在對應(yīng)用模塊化網(wǎng)頁設(shè)計(jì)技術(shù)時(shí)，可以將網(wǎng)頁劃分為五個(gè)不同的子模塊，從邏輯層面來看各個(gè)子模塊彼此獨(dú)立。網(wǎng)頁中的左導(dǎo)航模塊、右導(dǎo)航模塊的主要作用就是對站內(nèi)、外訪問頻率較高的鏈接進(jìn)行供應(yīng)，包括站點(diǎn)鏈接、網(wǎng)頁鏈接兩大類。網(wǎng)站、公司的版權(quán)信息以及商標(biāo)信息都能夠存放在腳注模塊內(nèi)，網(wǎng)頁關(guān)鍵在于主內(nèi)容模塊，主內(nèi)容模塊的差異才形成了不同的網(wǎng)頁。

借助傳統(tǒng)方式對模塊化網(wǎng)頁進(jìn)行瀏覽的過程中，Web服務(wù)器能夠收到由客戶端瀏覽器所發(fā)出的HTTP請求。在請求送達(dá)之后，Web服務(wù)器會(huì)向客戶端瀏覽器傳送頁面主模塊內(nèi)容[3]。對于主模塊內(nèi)容，瀏覽器能夠依據(jù)前后順序開展解讀處理，若頁面涵蓋的元素有子模塊、圖片等，則瀏覽器會(huì)將元素HTTP請求傳輸至Web服務(wù)器。當(dāng)子模塊、圖片等元素被瀏覽器所接收時(shí)，即可在網(wǎng)頁主模塊內(nèi)進(jìn)行插入，在接收全部元素之后，即可構(gòu)成整體頁面。借助該瀏覽技術(shù)對網(wǎng)頁進(jìn)行瀏覽的過程中，面向訪問者所呈現(xiàn)的是由上至下的頁面內(nèi)容。

若網(wǎng)絡(luò)帶寬良好，即僅需較短時(shí)間就能夠打開頁面，這種情況下借助傳統(tǒng)頁面瀏覽技術(shù)即可。使用者在對網(wǎng)頁進(jìn)行瀏覽的過程中，關(guān)注點(diǎn)主要放在頁面信息上，之后才會(huì)注意到網(wǎng)頁結(jié)構(gòu)設(shè)計(jì)美觀性、合理性等內(nèi)容。這就表示玩野主內(nèi)容模塊下的信息才是使用者所關(guān)注的要點(diǎn)。但是若網(wǎng)絡(luò)帶寬相對較窄的情況下，需要耗費(fèi)長時(shí)間打開頁面，使用者會(huì)不自主在等待過程中觀察網(wǎng)頁其他模塊，包括有導(dǎo)航模塊、表模塊等模塊所涵蓋的信息，主內(nèi)容模塊之后才會(huì)呈現(xiàn)出來。若在打開頁面的過程中，最先呈現(xiàn)的是網(wǎng)頁主內(nèi)容模塊信息，則算是理想狀況，然而在等待時(shí)通常會(huì)因?yàn)闃?biāo)頭模塊較大，Web服務(wù)器會(huì)顯示瀏覽器連接超時(shí)，并未對主內(nèi)容模塊進(jìn)行呈現(xiàn)，頁面剩下內(nèi)容也同樣無法呈現(xiàn)出來。這樣就會(huì)讓使用者不能對網(wǎng)頁內(nèi)容進(jìn)行查看，再次對頁面進(jìn)行刷新也無法呈現(xiàn)。

在處理這一問題的過程中，就需要找到在寬帶、時(shí)間有限的情況下，有效呈現(xiàn)頁面主要內(nèi)容的方式，而且要做到在向訪問者呈現(xiàn)信息的過程中，要按照主內(nèi)容模塊、其他模塊的順序來進(jìn)行。為了達(dá)成這種特殊順序頁面瀏覽目的，對網(wǎng)頁設(shè)計(jì)提出了更高的要求，設(shè)計(jì)人員需要對也頁面不同模塊賦予權(quán)值，進(jìn)行頁面瀏覽的操作時(shí)，瀏覽器也要依據(jù)模塊權(quán)值大小的排序來對頁面各個(gè)模塊進(jìn)行呈現(xiàn)[4]。頁面設(shè)計(jì)人員可以借助對不同頁面模塊權(quán)值大小調(diào)整的方式，即針對最先呈現(xiàn)的關(guān)鍵模塊賦予的權(quán)值較大，這樣就實(shí)現(xiàn)了對模塊呈現(xiàn)順序的合理安排。