基于Web的模塊化網頁設計分析

湯孝云，徐明偉

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

關鍵詞：Web;模塊化;網頁設計;瀏覽技術

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

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

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

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

1 Web模塊化的網頁設計

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

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

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

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

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

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

2 Web模塊化網頁的瀏覽

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

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

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

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