網頁的結構化與模塊化
07-16
如果你的大學畢業設計是進行一個網站的設計，對於學計算機專業的學生來說並不是一件引以為豪的事，特別是他所設計的作品不能被採用的時候。我的畢業設計是用ASP做一個教務管理系統，雖然我的並不喜歡這個畢設經歷，但是通過畢設我對使用ASP設計網頁有了許多認識，特別是關於如何減少頁面的重複設計，這是一篇比較初級的帖子，又不妥之處還請各位網友批評指正。 想法的由來和基本思路 一個網站的設計，首先應該是頁面風格的整體設計，然後才是代碼的編寫。我在畢業設計中因為老師的要求，多次改變了頁面的風格，導致了相同功能頁面的重複書寫。這幾次重複加大了我的工作量，也使我覺得ASP網頁設計比較噁心。幾經修改後我常常問自己，有沒有好的辦法，使頁面修改對功能實現的影響不大呢？我想到了程序設計中的結構化和模塊化設計。 所謂結構化是把頁面框架分成幾個大的部分，比如把頁面分成的標題欄、菜單欄、左導航欄、頁面主體和頁腳幾個部分。在我設計的網站中各個頁面多數是使用這個框架的。使用框架是為了後面的設計比較簡單，為了簡化頁面各個部分的設計，所以在經常要改變的地方是我使用函數來完成的，因為函數可以在實現的頁面中方便的改變。 由於模板是整個網站的基礎，所有的其他頁面都是在他的基礎上完成的，所以我在系統中備份了一頁。根據需要我把它分為了三塊：第一塊是頁面左邊「信息欄」的內容；第二塊是頁面的右邊的，也是頁面的主要內容的顯示部分；第三塊包括頁面主體，同時還在相應的部分調用了第一塊函數和第二塊函數。對應函數片斷如下： sub main() root=0 "定義網頁的位置，為的是正確的現實圖片和聯接。0為根目錄，1為一級子目錄，以此類推。 dim images(6) images(0)="images/bg.gif" …… images(5)="images/03.gif" "下面的雙重循環是配置temp.asp中出現圖片對root的相對位置 for i=0 to 5 while j<>root images(i)="../"+images(i) j=j+1 wend next "下面是頁面的書寫,<html><body>什麼的 …… Main_left() …… Main_right() …… end sub function main_left() response.Write("left") end function function main_right() response.Write("right") end function %> 調用頁面的內容如下： <!--#include file="tmp.asp" --> <% main() %> 只要頁面改寫相應的main_left和main_right兩個函數就可以改寫也面對應位置的顯示內容，在測試頁面中，我只讓兩個函數輸出兩句話：左部顯示left，右部顯示right示例圖如下： 在系統的編寫過程中，第一次產生模塊化的念頭是在頁面的第二次修改階段（把代碼加入最後一版的模板時）。我用HTML寫了一個導航欄，並把它加入了幾乎所有的系統頁面（複製+粘貼）。這個導航欄中有大量的重複代碼，代碼十分長，寫在網頁中也不美觀。在複製完後我發現在編輯時，我設置的網格的寬度是一定的，可是系統顯示的卻不一樣，更重要的是我發現每當我修改了一個導航欄的圖片後要手動更新近20個頁面！這實在是太不方便了。為了便於菜單的移植，我決定把它模塊化——寫入一個VBScript函數保存到一個單獨的文件中。程序如下： function automenu() dim link(10) dim pic(10) link(1)="default.asp" …… link(9)="liuyuan.asp" if session("MM_UserAuthorization")=1 then link(2)=" xxxx.asp" end if if session("MM_UserAuthorization")=1 then link(5)="xxf.asp" end if pic(1)="images/home_button" …… pic(9)="images/liuyanban" bkp="images/news_r8_c8.gif" if root<>1 then for i=1 to 9』校正圖片路徑 link(i)="../"+link(i) pic(i)="../"+pic(i) bkp="../images/news_r8_c8.gif" next end if if session("mm_username")<>"" then response.Write("<table width_="800" border="0" background=""+bkp+"" bgcolor = "#D6D3CE">" ) response.Write("<tr>") for i=1 to 9 "顯示邏輯:flag為1時不顯示 flag=0 if (session("MM_UserAuthorization")=1 and i=4) or (session("MM_UserAuthorization")=1 and i=8) then flag=1 end if if (session("MM_UserAuthorization")<>1 and i=6) or (session("MM_UserAuthorization")<>4 and i=8) then flag=1 end if if (session("MM_UserAuthorization")<>1 and i=7) then flag=1 end if "if not (session("MM_UserAuthorization")<>4 and i=8) then flag=1 end if if flag<>1 then response.Write("<td width_="90">") str="<A href=""+link(i)+"">" response.Write(str) str="<IMG border=0 name=homeButton onmouseout="this.src="" str="<IMG border=0 " str=str+"height=22 name=homeButton " str=str+"onmouseout="+chr(34)+"this.src= "" str=str+pic(i)+"_a.gif";"+chr(34) str=str+" onmouseover=" +chr(34)+"this.src=""+pic(i)+"_b.gif";"+chr(34) str=str+" src="+chr(34)+pic(i)+"_a.gif"+chr(34)+" width_=90>" response.Write(str) response.Write("</a>") response.Write("</td>") response.Write("<td width_="20"> </td>") end if next response.Write("</tr>") response.Write("</table>") end if end function 為了發揮循環的作用，我使用了兩個數組來存放導航欄中要使用的圖片的名稱和鏈接地址。然後，根據用戶級別，寫出適合他們的導航條。 導航欄的模塊（函數）化，大大地減少了頁面的代碼行數，增加了代碼的可讀性。它還增加了頁面的可維護性，現在如果要對導航欄進行修改，只要更改函數中相應的代碼即可實現所有頁面導航欄的更新。 結構化的優點 頁面設計模塊化的優點是顯而易見的。它減少了代碼的長度，使頁面代碼看起來十分簡潔；它減少了程序員需要注意的網頁文件結構，只要注意自己代碼的編寫和處理；它還減少了程序員的工作量，如果要改寫頁面框架的內容，只要改寫模板即可使所有使用此模板的頁面得到更新而不用改寫其他頁面；結構化後由於使用的都是ASP腳本，使得伺服器在處理頁面時不用在幾個解釋器之間切換，據微軟官方的說法，純腳本型ASP網頁能提高處理器的效能10%左右。 結構化的缺點 頁面的結構化又上面的優點，但是它的缺點也是非常明顯的：它不是HTML頁面，大多數的網頁編輯器無法直接瀏覽和修改，這給頁面設計人員（美工）造成了一些困難。如果先用HTML寫完後，再改成純代碼方式的網頁對程序員來說工作量太大。 頁面結構化與模板的比較 頁面的結構化在某種程度上說也是使用了模板的概念，但是就我個人來說結構化設計比模板使用方便。首先，模板要在模板頁中插入「可編輯區域」在編輯區域外，無法作修改。這可能在某些時候比較方便，但在某些時候也就意味著你失去了修改葉面的自由；其次，在模板中無法把<%%>中的代碼貼入由他生成的頁面，而模塊化設計不存在這個問題；再次，使用模板不能減少代碼的長度，用模板生成的頁面代碼總是比模板多，頁面代碼不夠簡潔，而是用模塊化設計則可以實現此目標。
推薦閱讀：
推薦閱讀：
※SimpRead：簡悅你的知識消化歷程
※新增網頁0
※【背景圖片】【製作網頁素材篇】精美背景素材
※更換網頁背景的jquery代碼（寫入cookie）
※太強了！打開網頁直接觀看全部電視，讓網路電視全部下崗