基于Web的模塊化網(wǎng)頁設計分析

湯孝云，徐明偉

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

關鍵詞：Web;模塊化;網(wǎng)頁設計;瀏覽技術

中圖分類號：TP393? ? ? 文獻標識碼：A

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

開放科學（資源服務）標識碼（OSID）：

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

1 Web模塊化的網(wǎng)頁設計

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

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

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

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

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

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

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

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

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

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

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