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