网站的技术实现/开发规范
任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一、代码维护和扩展。飞飞Asp!技术乐园由于Web项目开发的分散性、独立性、整合的交互性等,所以定制一套完整的约定和规则显得尤为重要。
本文档将定制一系列约定和规则,他们分别文件夹命名规则、文件名命名规则、程序代码编程风格、数据库设计约定。这些规则和约定需要与开发人员、设计人员和维护人员共同讨论定制,将来开发都将严格按规则或约定开发。每个团队开发都应有自己的一套规范,一个优良可行的规范可以使我们工作得心应手事半***倍。
一个完善的网站的开发除了主开发环境之外,还会涉及到CSS,Jsscript,DOM,XML等其他技术。只有合理使用的以上的每项技术,才能使我们的网站的各方面的性能发挥到极致。
就网站开发技术实现方面做出以下规范。本规范既是一个开发规范,也是一个语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。
网站开发流程
在项目开始实施之前应该有一个工作步骤也就是工作流程,在项目开发中最需要时间的是总体设计和系统测试,而程序编写代码所占的时间并不多,但有的团队就急于开发写代码,先把程序写出来再说,没有注重评审和测试这2个环节,结果造成返工。所以项目来了不要急于开工写代码,应该一步一步慢慢来,只有走的慢才能走得稳走得远。下图的开发流程比较好地体现开发的整个环节。飞飞@Asp技术乐园
图 1
从图1可以看到2条主线,这2条主线分别是前台开发和后台开发。前后台开发在项目开发早期互相没有交叉,当然不是绝对没有,Web策划和需求分析都是互相有关系的,一个是网站表现形式和风格的策划另一个是网站***能的策划,它们是衣服和躯干的关系。到了开发后期就需要把界面和***能模块结合起来形成一个统一,也就即将发布的网站。
基本要求:
1.网站的根目录下建立共用图片文件夹(images),样式文件夹(css),脚本文件夹(js),包含文件夹(inc),函数文件夹(function)
2.在根目录中原则上根据网站的不同的***能模块建立不同的文件夹。每个***能模块文件夹下分别建立自己的图片文件夹(images),样式文件夹(Css),及脚本文件夹(js),特殊要求目录(例如:生成的静态页目录)也需要独立建立,如果这个栏目的内容特别多,又分出很多下级栏目,可以相应的再开设其他目录。
3.由程序自动生成的目录的目录构建规则。使用“年/月/日”的基本规则,若网站流量过大的话,可以考虑加入“时”的目录;若流量一般也可以采取 “年/月”的格式
4.由程序上传的文件的文件命名规则。采用“当前时间的数字+上传序列号+随机3位数字字母组合”
5.网站的页面的样式及脚本文件要独立放置于外部文件夹
6.如果需要背景文件的话请使用4*4或8*8
7.除非有特殊情况,目录、文件的名称全部用小写英文字母、数字、下划线的组合,其中不得包含汉字、空格和特殊字符;目录的命名请尽量以英文为指导,不到万不得已不要以拼音作为目录名称,经验证明,用拼音命名的目录往往连一个月后的自己都看不懂,
8.网站的动态页面、静态页面、CSS、js分发布版和测试版本。发布版要求去掉所有的注释以及多余行。测试版要求保留所有注释内容。
9.网站的静态页面必须符合W3C的XHTML 1.0 Transitional标准
10. 必须添加<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>页头(如果使用utf-8的话)使用<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
11. 动态输出代码必须添加<%Session.codepage=936%>如果使用UTF-8必须添加<%Session.codepage=65001%>
12. 如果使用Asp,动态页页头必须添加<%Option Explicit%>,强制定义变量。
13. 如果使用Asp,变量大小写一定要区分
14. 所编写的js函数,css,以及动态代码函数需要添加注释
15. meta、js、网页特殊符号、ADO对象、VBscript、jsScript、DHTML、CSS、可以参考相应手册
代码 编 写
我们应该有一个整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的风格保持一致,因为我们不可能永远孤立的开发,你随时都有可能和三个月前的自己合作(你的客户要求改版),也经常要和工作室中不同的同事共同开发一个项目,还有可能被要求修改已经离职人员开发的代码,当然你自己也有可能会扔下一个项目给后来的同事。
一般 原 则
1. 基本的htm语言结构要符合Xhtml标准。例如:属性值的双引号不能省略,如果有必要的话,可以使用转义字符。可参靠Xhmtl1.0基本手册
2. 在排布表格之前,请大家一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免 <colspan> <rowspan> 两个标记,经验表明,这两个标记会带来许多麻烦。
3. 一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。如果必须这样做,请使用 <tbody>标记,以便能够使这个大表格分块显示。
4. 排版中我们经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义 p { text-indent: 2px; } 然后给每一段加上 <p> 标记,注意,一般情况下,请不要省略 </p> 结束标记。
5. 原则上,我们禁止用 <img width=? height=? /> 来人为干预图片显示的尺寸,而且建议 <img> 标签中不要带上width 和height 两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的***能;但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,请大家务必在最后给 <img>附上 width 和 height 属性。
6. 为了最大程度的发挥浏览器自动排版的***能,在一段完整的文字中请尽量不要使用<br /> 来人工干预分段。
7. 不同语种的文字之间应该有一个半角空格,但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点,英文字母和数字周围的括号应该使用半角括号。
8. 所有的字号都应该用样式表来实现,禁止在页面中出现 <font size=?> 标记
9. 请不要在网页中连续出现多于一个的 也尽量少使用全角空格(英文字符集下,全角空格会变成乱码),空白应该尽量使用 text-indent, padding, margin, hspace, vspace。
10. 中英文混排时,我们尽可能的将英文和数字定义为verdana 和arial 两种字体。
11. 行距建议用百分比来定义,常用的两个行距的值是line-height:120%/150%.
12. “网页大小”定义为网页的所有文件大小的总和,包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户,网页大小保持在34K以下为合适。
1. 文件夹文件名命名规范
文件夹命名一般采用英文,长度一般不超过20个字符,命名采用小写字母。除特殊情况才使用中文拼音,一些常见的文件夹命名如:images(存放图形文件),flash(存放Flash文件),style(存放CSS文件),scripts(存放Javascript脚本),inc(存放include文件),link(存放友情链接),media(存放多媒体文件)等。
文件名称统一用小写的英文字母、数字和下划线的组合。命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。
2. 目录建立的原则:以最少的层次提供最清晰简便的访问结构。
根目录。
根目录指DNS域名服务器指向的索引文件的存放目录。
服务器的ftp上传目录默认为html文件。
每个语言版本存放于独立的目录。已有版本语言设置为:
简体中文 \gb
繁体中文 \big5
英 语 \en
日 语 \jp
每个主要***能(主菜单)建立一个相应的独立目录。
3. 图片的命名规范
遵循以下几条规范☆ 名称分为头尾两两部分,用下划线隔开。
☆ 头部分表示此图片的大类性质,例如广告、标志、菜单、按钮等等。
☆ 一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner
标志性的图片我们取名为:logo
在页面上位置不固定并且带有链接的小图片我们取名为button
在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu
装饰用的照片我们取名:pic
不带链接表示标题的图片我们取名:title
依照此原则类推。
☆ 尾部分用来表示图片的具体含义。
☆ 下面是几个样例,大家应该能够一眼看明白图片的意义:
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.
4. 动态语言文件命名规则
命名规则:“性质_描述”,描述可以有多个单词,用”_”隔开,性质一般是该页面得概要。范例:register_form.asp,register_post.asp,topic_lock.asp
5. CSS的命名规范及部分简写说明(附CSS开发手册及常用CSS技巧)
以下结构可以组合使用,例如:左列标题lefttitle;底部导航footernav
书写原则是:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词 ;
5.如果可以话,最好加上中文说明;
----------------------------------------------------------------------------------------------
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright
----------------------------------------------------------------------------------------------
下面是CSS缩写性质的列表以及它们所表示的常规性质。
Background(背景):背景附件、背景颜色、背景图像、背景位置、背景重复 (在设置水平和垂直的时候如果参数不是数值话,所有的属性是没有先后关系的,可以随排)
Border(边框):边框颜色、边框风格、边框宽度
border-bottom(底部边框):底部边框颜色、底部边框样式、底部边框宽度
border-left(左侧边框):左侧边框颜色、左侧边框样式、左侧边框宽度
border-right(右侧边框):右侧边框颜色、右侧边框样式、右侧边框宽度
border-top(顶部边框):顶部边框颜色、顶部边框样式、顶部边框宽度
cue(声音提示):前提示、后提示
font(字体):字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
list-style(列表样式):列表样式图像、列表样式位置、列表样式类型
margin(空白):顶部空白、右侧空白、底部空白、左侧空白
outline(大纲):大纲颜色、大纲样式、大纲宽度
padding(间隙):顶部间隙、右侧间隙、底部间隙、左侧间隙
pause(暂停):后暂停、前暂停
减少空白
6. 数据库开发
数据文件命名采用“***能系统名+_+文件类型”,比如***能系统名为news,则数据库文件命名为news_database.mdf,有的数据库文件有多个,比如SQL Server就有2个,一个是数据库文件,另一个是日志文件,那么他们的文件命名分别为news_database.mdf,news_log.log。文件名全部采用小写。
数据库表命名规范,表名长度不能超过30个字符,表名中含有单词全部采用单数形式,单词首写字母要大写,多个单词间不用任何连接符号。若库中有多个系统,表名采用系统名称+单词或多个单词,系统名是开发系统的缩写,系统名称全部采用小写英文字符,如bbsTitle,bbsForumType。若库中只含有一个系统,那么表名仅用一个单词或多个单词。单词选择能够概括表内容的一个或多个英文单词,如UserInfo,UserType。关连表命名规则为Re_表A_表B,Re是Relative的缩写,如:Re_User_ArticleType, Re_User_FormType。飞飞Asp技术.乐园
数据库字段命名规范,数据库字段名全部采用小写英文单词,单词之间用”_”隔开,命名规则是表别名+单词,如:user_name,user_pwd。表别名规则,如果表名是一个单词,别名就取单词的前4 个字母;如果表名是两个单词,就各取两个单词的前两个字母组成4 个字母长的别名;如果表的名字由3 个单词组成,你不妨从头两个单词中各取一个然后从最后一个单词中再取出两个字母,结果还是组成4 字母长的别名。
视图名采用规则View_表A_表B_表C,View表示视图。这个视图由几个表产生就用”_”连接几个表的名,如果表过多可以将表名适当简化,但一定要列出所有表名。
存储过程命名规则P_表名_存取过程名(缩写),比如P_User_Del,P_ArticleType_AddData。
SQL语句编写规则,关键字必须大写,其他书写按上述命名规则,比如:
SELECT user_id, user_name FROM User WHERE user_id = ‘tom’
7. 程序代码编程规范
一个良好的程序编码风格有利于系统的维护,代码也易于阅读查错。在此只讨论ASP的编程风格和约定。在ASP中所有变量是弱变量,无需定义就可以直接使用,而且代码不区分大小写。但其他语言一般这些都要定义的,为了养成良好的编程习惯,请务必一定要在每个页面头部添加<%Option EXplicit%>编写代码务必按照一下规则。
1. 每个变量名必须定义,在ASP文件的最开始添加语句<%Option EXplicit%>,强制定制每个变量。
2. 出于易读和一致性的目的,在代码中使用以下变量命名约定:
子类型 |
前缀 |
示例 |
Boolean |
bln |
blnFound |
Byte |
byt |
bytRasterData |
Date (Time) |
dtm |
dtmStart |
Double |
dbl |
dblTolerance |
Error |
err |
errOrderNum |
Integer |
int |
intQuantity |
Long |
lng |
lngDistance |
Object |
obj |
objCurrent |
Single |
sng |
sngAverage |
String |
str |
strFirstName |
3. 程序代码需要有缩进,缩进采用键盘Tab键,不采用空格键。并且”=”或者链接字符串时需要左右空一格,如下:
a = “test”
4. 函数过程编写的约定。函数或者过程命名采用动作+名词,每个函数需要给出相应的注释,函数***能,传入变量,以及作者和修改相关信息。如下面函数:
<%
'[***能] 返回一个参数的值
'[参数] strParameterName 参数名称
'[作者] icefire 2002/8/20 am
Function GetParameterValue(strParameterName)
Dim objRS, strSQL, strParameterValue
strSQL = "SELECT ParameterValue FROM damsParameters WHERE ParameterName = '" & strParameterName & "'"
.
.
.
GetParameterValue = strParameterValue
Set objRS = Nothing
End Function
5. ASP内置对象区分大小写。如下代码片断
strUserName = Request.Form(“UserName”)
Set conn = Server.CreateObject("ADODB.Connection")
6. 数据库连接一个库只能有一个数据库连接文件,创建数据库对象得原则是尽可能晚地打开数据库,尽可能早地关闭数据库。创建数据库对象调用统一地创建函数。如下:
Sub OpenConn(ByRef conn)
Dim strDBPath, strDBConnection
strDBPath = Server.MapPath("database/tax.mdb")
strDBConnnection = "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & strDBPath
Set conn = Server.CreateObject("ADODB.Connection")
conn.Open strDBConnnection
End Sub
当一个对象不在使用时要释放对象资源,比如objFSO,objRS对象等。采用统一函数调用。函数如下:
Sub CloseObj(ByRef obj)
If IsObject(obj) Then
obj.Close
Set obj = nothing
End If
End Sub