网页的结构化与模块化(新手帖)

原创 2004年08月27日 23:02:00

网页的结构化与模块化<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

如果你的大学毕业设计是进行一个网站的设计,对于学计算机专业的学生来说并不是一件引以为豪的事,特别是他所设计的作品不能被采用的时候。我的毕业设计是用ASP做一个教务管理系统,虽然我的并不喜欢这个毕设经历,但是通过毕设我对使用ASP设计网页有了许多认识,特别是关于如何减少页面的重复设计,这是一篇比较初级的帖子,又不妥之处还请各位网友批评指正。

想法的由来和基本思路

一个网站的设计,首先应该是页面风格的整体设计,然后才是代码的编写。我在毕业设计中因为老师的要求,多次改变了页面的风格,导致了相同功能页面的重复书写。这几次重复加大了我的工作量,也使我觉得ASP网页设计比较恶心。几经修改后我常常问自己,有没有好的办法,使页面修改对功能实现的影响不大呢?我想到了程序设计中的结构化和模块化设计。

所谓结构化是把页面框架分成几个大的部分,比如把页面分成的标题栏、菜单栏、左导航栏、页面主体和页脚几个部分。在我设计的网站中各个页面多数是使用这个框架的。使用框架是为了后面的设计比较简单,为了简化页面各个部分的设计,所以在经常要改变的地方是我使用函数来完成的,因为函数可以在实现的页面中方便的改变。

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

由于模板是整个网站的基础,所有的其他页面都是在他的基础上完成的,所以我在系统中备份了一页。根据需要我把它分为了三块:第一块是页面左边“信息栏”的内容;第二块是页面的右边的,也是页面的主要内容的显示部分;第三块包括页面主体,同时还在相应的部分调用了第一块函数和第二块函数。对应函数片断如下:

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_leftmain_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 <?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />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

    '显示逻辑:flag1时不显示

       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'>&nbsp;</td>")

    end if

next

response.Write("</tr>")

response.Write("</table>")

end if

end function

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

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

结构化的优点

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

结构化的缺点

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

页面结构化与模板的比较

页面的结构化在某种程度上说也是使用了模板的概念,但是就我个人来说结构化设计比模板使用方便。首先,模板要在模板页中插入可编辑区域在编辑区域外,无法作修改。这可能在某些时候比较方便,但在某些时候也就意味着你失去了修改叶面的自由;其次,在模板中无法把<%%>中的代码贴入由他生成的页面,而模块化设计不存在这个问题;再次,使用模板不能减少代码的长度,用模板生成的页面代码总是比模板多,页面代码不够简洁,而是用模块化设计则可以实现此目标。

HTML中结构化标签的使用

H5中新添加的结构标签种类常用 main标签 article标签 section标签 aside标签 nav标签 header标签 footer标签 为什么用这些结构标签H5中新添加的结构标签种类(常...
  • sinat_31257007
  • sinat_31257007
  • 2016年02月17日 23:42
  • 1145

WEB网页结构化信息抽取技术介绍(网页库级)

WEB结构化信息抽取就是将网页中的非结构化数据按照一定的需求抽取成结构化数据。是垂直搜索引擎和通用搜索引擎最大的差别。  如:比较购物搜索那就需要抓取网页后,对网页中的商品信息进行抽取,抽取出商品名称...
  • starxu85
  • starxu85
  • 2008年05月27日 21:20
  • 637

4种HTML结构化解析方法

1. dom解析方式 2. 字符串首尾截取 3. 正则表达式 4. 通用型,分析能力有限,但能兼容大部分网站...
  • a286352250
  • a286352250
  • 2013年11月08日 13:21
  • 1318

WEB网页结构化信息抽取技术介绍(网页库级)

导读: WEB结构化信息抽取就是将网页中的非结构化数据按照一定的需求抽取成结构化数据。是垂直搜索引擎和通用搜索引擎最大的差别。   如:比较购物搜索那就需要抓取网页后,对网页中的商品信息进行抽取,抽...
  • chief1985
  • chief1985
  • 2007年11月17日 16:56
  • 1851

CSS模块化(六) 模块化设计

6. 模块化设计 6.1 样式的作用域──页面重构中的模块化设计(一) 模块化设计我已经提过很多了,都是跟模块化相关的,不过之前一直没有讲到具体实现方面的内容,只是一些思维。这次重点讲一下实现方面的内...
  • hacke2
  • hacke2
  • 2014年03月25日 10:49
  • 3495

web前端模块化开发

定义与由来定义模块就是实现特定功能的相互独立的一组方法。由来背景 随着网站逐渐的开发,嵌入网页的js代码越来越庞大,而网页也越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等。为了更好的...
  • liangshiquan1
  • liangshiquan1
  • 2016年03月14日 20:49
  • 1467

ma 新手五国贴

http://bbs.pcbeta.com/viewthread-863656-1-1.html
  • neutrojan
  • neutrojan
  • 2013年12月07日 08:39
  • 1746

模块化编程 自顶向下编程 自底向上编程 结构化编程 面向对象编程 面向过程编程

模块化程序设计(modular programming),简单地说就是程序的编写不是开始就逐条录入计算机语句和指令,而是首先用主程序、子程序、子过程等框架把软件的主要结构和流程描述出来,并定义和调试好...
  • li1914309758
  • li1914309758
  • 2016年09月08日 19:44
  • 1196

前端模块化理解

转至http://www.cnblogs.com/lvdabao/p/js-modules-develop.html 在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可;如今...
  • heyue_99
  • heyue_99
  • 2017年02月06日 17:03
  • 4847

高粒度模块化的前端开发

  • 2012年12月28日 13:49
  • 7.08MB
  • 下载
收藏助手
不良信息举报
您举报文章:网页的结构化与模块化(新手帖)
举报原因:
原因补充:

(最多只允许输入30个字)