网页的结构化与模块化


答案：网页的结构化与模块化

如果你的大学毕业设计是进行一个网站的设计，对于学计算机专业的学生来说并不是一件引以为豪的事，特别是他所设计的作品不能被采用的时候。我的毕业设计是用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=>
       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='http://old.zzzyk.com/article/Article/"+pic(i)+"_b.gif';"+chr(34)

         str=str+" src=http://old.zzzyk.com/article/Article/"+chr(34)+pic(i)+"_a.gif"+chr(34)+" width=90>"

         response.Write(str)         

         response.Write("</a>")

         response.Write("</td>")

         response.Write("<td width='20'>&nbsp;</td>")

    end if

next

response.Write("</tr>")

response.Write("</table>")

end if

end function

为了发挥循环的作用，我使用了两个数组来存放导航栏中要使用的图片的名称和链接地址。然后，根据用户级别，写出适合他们的导航条。

导航栏的模块（函数）化，大大地减少了页面的代码行数，增加了代码的可读性。它还增加了页面的可维护性，现在如果要对导航栏进行修改，只要更改函数中相应的代码即可实现所有页面导航栏的更新。

结构化的优点

页面设计模块化的优点是显而易见的。它减少了代码的长度，使页面代码看起来十分简洁；它减少了程序员需要注意的网页文件结构，只要注意自己代码的编写和处理；它还减少了程序员的工作量，如果要改写页面框架的内容，只要改写模板即可使所有使用此模板的页面得到更新而不用改写其他页面；结构化后由于使用的都是ASP脚本，使得服务器在处理页面时不用在几个解释器之间切换，据微软官方的说法，纯脚本型ASP网页能提高处理器的效能10%左右。

结构化的缺点

页面的结构化又上面的优点，但是它的缺点也是非常明显的：它不是HTML页面，大多数的网页编辑器无法直接浏览和修改，这给页面设计人员（美工）造成了一些困难。如果先用HTML写完后，再改成纯代码方式的网页对程序员来说工作量太大。

页面结构化与模板的比较

页面的结构化在某种程度上说也是使用了模板的概念，但是就我个人来说结构化设计比模板使用方便。首先，模板要在模板页中插入“可编辑区域”在编辑区域外，无法作修改。这可能在某些时候比较方便，但在某些时候也就意味着你失去了修改叶面的自由；其次，在模板中无法把<%%>中的代码贴入由他生成的页面，而模块化设计不存在这个问题；再次，使用模板不能减少代码的长度，用模板生成的页面代码总是比模板多，页面代码不够简洁，而是用模块化设计则可以实现此目标。
上一个：在ASP中，用JScript脚本实现分页的另类办法。
下一个：howto: send a mail, exchange script read your mail body and add it to database
更多图片编程知识: