如果你的大學(xué)畢業(yè)設(shè)計(jì)是進(jìn)行一個(gè)網(wǎng)站的設(shè)計(jì)，對(duì)于學(xué)計(jì)算機(jī)專(zhuān)業(yè)的學(xué)生來(lái)說(shuō)并不是一件引以為豪的事，特別是他所設(shè)計(jì)的作品不能被采用的時(shí)候。我的畢業(yè)設(shè)計(jì)是用ASP做一個(gè)教務(wù)管理系統(tǒng)，雖然我的并不喜歡這個(gè)畢設(shè)經(jīng)歷，但是通過(guò)畢設(shè)我對(duì)使用ASP設(shè)計(jì)網(wǎng)頁(yè)有了許多認(rèn)識(shí)，特別是關(guān)于如何減少頁(yè)面的重復(fù)設(shè)計(jì)，這是一篇比較初級(jí)的帖子，又不妥之處還請(qǐng)各位網(wǎng)友批評(píng)指正。
想法的由來(lái)和基本思路
一個(gè)網(wǎng)站的設(shè)計(jì)，首先應(yīng)該是頁(yè)面風(fēng)格的整體設(shè)計(jì)，然后才是代碼的編寫(xiě)。我在畢業(yè)設(shè)計(jì)中因?yàn)槔蠋煹囊?，多次改變了?yè)面的風(fēng)格，導(dǎo)致了相同功能頁(yè)面的重復(fù)書(shū)寫(xiě)。這幾次重復(fù)加大了我的工作量，也使我覺(jué)得ASP網(wǎng)頁(yè)設(shè)計(jì)比較惡心。幾經(jīng)修改后我常常問(wèn)自己，有沒(méi)有好的辦法，使頁(yè)面修改對(duì)功能實(shí)現(xiàn)的影響不大呢？我想到了程序設(shè)計(jì)中的結(jié)構(gòu)化和模塊化設(shè)計(jì)。
所謂結(jié)構(gòu)化是把頁(yè)面框架分成幾個(gè)大的部分，比如把頁(yè)面分成的標(biāo)題欄、菜單欄、左導(dǎo)航欄、頁(yè)面主體和頁(yè)腳幾個(gè)部分。在我設(shè)計(jì)的網(wǎng)站中各個(gè)頁(yè)面多數(shù)是使用這個(gè)框架的。使用框架是為了后面的設(shè)計(jì)比較簡(jiǎn)單，為了簡(jiǎn)化頁(yè)面各個(gè)部分的設(shè)計(jì)，所以在經(jīng)常要改變的地方是我使用函數(shù)來(lái)完成的，因?yàn)楹瘮?shù)可以在實(shí)現(xiàn)的頁(yè)面中方便的改變。
由于模板是整個(gè)網(wǎng)站的基礎(chǔ)，所有的其他頁(yè)面都是在他的基礎(chǔ)上完成的，所以我在系統(tǒng)中備份了一頁(yè)。根據(jù)需要我把它分為了三塊：第一塊是頁(yè)面左邊“信息欄”的內(nèi)容；第二塊是頁(yè)面的右邊的，也是頁(yè)面的主要內(nèi)容的顯示部分；第三塊包括頁(yè)面主體，同時(shí)還在相應(yīng)的部分調(diào)用了第一塊函數(shù)和第二塊函數(shù)。對(duì)應(yīng)函數(shù)片斷如下：
sub main()
root=0
'定義網(wǎng)頁(yè)的位置，為的是正確的現(xiàn)實(shí)圖片和聯(lián)接。0為根目錄，1為一級(jí)子目錄，以此類(lèi)推。
dim images(6)
images(0)="images/bg.gif"
……
images(5)="images/03.gif"
'下面的雙重循環(huán)是配置temp.asp中出現(xiàn)圖片對(duì)root的相對(duì)位置
for i=0 to 5
while j<>root
images(i)="../"+images(i)
j=j+1
wend
next
'下面是頁(yè)面的書(shū)寫(xiě),<html><body>什么的
……
Main_left()
……
Main_right()
……
end sub
function main_left()
response.Write("left")
end function
function main_right()
response.Write("right")
end function
%>
調(diào)用頁(yè)面的內(nèi)容如下：
<!--#include file="tmp.asp" -->
<%
main()
%>
只要頁(yè)面改寫(xiě)相應(yīng)的main_left和main_right兩個(gè)函數(shù)就可以改寫(xiě)也面對(duì)應(yīng)位置的顯示內(nèi)容，在測(cè)試頁(yè)面中，我只讓兩個(gè)函數(shù)輸出兩句話(huà)：左部顯示left，右部顯示right示例圖如下：
在系統(tǒng)的編寫(xiě)過(guò)程中，第一次產(chǎn)生模塊化的念頭是在頁(yè)面的第二次修改階段（把代碼加入最后一版的模板時(shí)）。我用HTML寫(xiě)了一個(gè)導(dǎo)航欄，并把它加入了幾乎所有的系統(tǒng)頁(yè)面（復(fù)制+粘貼）。這個(gè)導(dǎo)航欄中有大量的重復(fù)代碼，代碼十分長(zhǎng)，寫(xiě)在網(wǎng)頁(yè)中也不美觀(guān)。在復(fù)制完后我發(fā)現(xiàn)在編輯時(shí)，我設(shè)置的網(wǎng)格的寬度是一定的，可是系統(tǒng)顯示的卻不一樣，更重要的是我發(fā)現(xiàn)每當(dāng)我修改了一個(gè)導(dǎo)航欄的圖片后要手動(dòng)更新近20個(gè)頁(yè)面！這實(shí)在是太不方便了。為了便于菜單的移植，我決定把它模塊化——寫(xiě)入一個(gè)VBScript函數(shù)保存到一個(gè)單獨(dú)的文件中。程序如下：
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時(shí)不顯示
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
為了發(fā)揮循環(huán)的作用，我使用了兩個(gè)數(shù)組來(lái)存放導(dǎo)航欄中要使用的圖片的名稱(chēng)和鏈接地址。然后，根據(jù)用戶(hù)級(jí)別，寫(xiě)出適合他們的導(dǎo)航條。
導(dǎo)航欄的模塊（函數(shù)）化，大大地減少了頁(yè)面的代碼行數(shù)，增加了代碼的可讀性。它還增加了頁(yè)面的可維護(hù)性，現(xiàn)在如果要對(duì)導(dǎo)航欄進(jìn)行修改，只要更改函數(shù)中相應(yīng)的代碼即可實(shí)現(xiàn)所有頁(yè)面導(dǎo)航欄的更新。
結(jié)構(gòu)化的優(yōu)點(diǎn)
頁(yè)面設(shè)計(jì)模塊化的優(yōu)點(diǎn)是顯而易見(jiàn)的。它減少了代碼的長(zhǎng)度，使頁(yè)面代碼看起來(lái)十分簡(jiǎn)潔；它減少了程序員需要注意的網(wǎng)頁(yè)文件結(jié)構(gòu)，只要注意自己代碼的編寫(xiě)和處理；它還減少了程序員的工作量，如果要改寫(xiě)頁(yè)面框架的內(nèi)容，只要改寫(xiě)模板即可使所有使用此模板的頁(yè)面得到更新而不用改寫(xiě)其他頁(yè)面；結(jié)構(gòu)化后由于使用的都是ASP腳本，使得服務(wù)器在處理頁(yè)面時(shí)不用在幾個(gè)解釋器之間切換，據(jù)微軟官方的說(shuō)法，純腳本型ASP網(wǎng)頁(yè)能提高處理器的效能10%左右。
結(jié)構(gòu)化的缺點(diǎn)
頁(yè)面的結(jié)構(gòu)化又上面的優(yōu)點(diǎn)，但是它的缺點(diǎn)也是非常明顯的：它不是HTML頁(yè)面，大多數(shù)的網(wǎng)頁(yè)編輯器無(wú)法直接瀏覽和修改，這給頁(yè)面設(shè)計(jì)人員（美工）造成了一些困難。如果先用HTML寫(xiě)完后，再改成純代碼方式的網(wǎng)頁(yè)對(duì)程序員來(lái)說(shuō)工作量太大。
頁(yè)面結(jié)構(gòu)化與模板的比較
頁(yè)面的結(jié)構(gòu)化在某種程度上說(shuō)也是使用了模板的概念，但是就我個(gè)人來(lái)說(shuō)結(jié)構(gòu)化設(shè)計(jì)比模板使用方便。首先，模板要在模板頁(yè)中插入“可編輯區(qū)域”在編輯區(qū)域外，無(wú)法作修改。這可能在某些時(shí)候比較方便，但在某些時(shí)候也就意味著你失去了修改葉面的自由；其次，在模板中無(wú)法把<%%>中的代碼貼入由他生成的頁(yè)面，而模塊化設(shè)計(jì)不存在這個(gè)問(wèn)題；再次，使用模板不能減少代碼的長(zhǎng)度，用模板生成的頁(yè)面代碼總是比模板多，頁(yè)面代碼不夠簡(jiǎn)潔，而是用模塊化設(shè)計(jì)則可以實(shí)現(xiàn)此目標(biāo)。
