网站项目的规范

来源：互联网发布：美国终身监禁知乎编辑：程序博客网时间：2024/05/24 05:30

工作多年了，一直不爱讲规范，因为凭自己经验做出来的东西不会有太多乱子，但是从开始进行项目管理以来，发现没有规矩真会出问题，

所以经过两个中小型项目，自己做了些总结，希望能和看到此文的朋友讨论，如果您有任何看法或者建议，可以留言指正、补充，也可以邮件到

28181305#qq.com，谢谢。

所以总结前台UI开发相关的必须预订的几个项目：

1 一个所有页面都包含一个php文件，这个php文件去链接css需要的样式表文件，不允许出现其它对样式表文件的引用的出现

—— 因为样式表文件太多，会增加http请求次数，而且不同的文件出现相同的class名字也会引起冲突，修改时会导致顾此失彼；放在一个动态的php文件之后，如果用户可选皮肤也可以在此文件中实现，整个项目都只需要关注少数的1-2个css文件即可。

2 项目开始之初，首相要做的是在css文件的最前面规定div,input、p、span、td、a（html tag）的字体大小、行间距、文字的颜色、边距；input、textarea的边框样式；table tr td的样式；a的文字颜色、鼠标经过文字颜色；其它任何地方不得再次定义这些html tag的样式（换言之对html的样式的定义只能出现在css文件的最前面）

3 接着定义几种标题格式——包括文字大小、文字颜色、是否加粗、边框样式、背景图片、高度，所有的标题只允许使用这几种样式

4 各种列表页面的翻页的样式——包括翻页链接的文字大小、文字颜色、边框样式、内边距、外边距，所有的翻页全部使用这个样式

5 定义一个用于筛选条件的tab的样式（选中状态、非选中状态、基本样式）的文字颜色、文字大小、高度、行高、内外边距、文字位置，所有的筛选都只使用这个样式。

6 定义几个按钮类如：button_green button_red button_gray button_hilight，所有按钮性质的东西，只允许用这几个类，或者用浏览器自己的input，禁止自定义按钮样式。

7 对于文内容的内边距要注意保持一致，在项目最初就规定上边距，开发过程当中禁止开发人员自行定制内外边距，也就是禁止规定margin和padding

8 所有图标的高度与line-height或者与文字大小，避免图标与文字不对齐。

9 按钮背景图、标题背景图、图标全部使用textpacker打包成单个图片文件。

后端规范：

1 文件名、目录名、变量名及数据库表名、字段名，一律使用小写字母，单词之间下划线分隔：new_rows,user_name
2 类名函数名，首字母小写，后面的每个单词首字母大写：newRows，userName
3 所有文件使用utf8编码
4 SQL语句关键词一律大写：SELECT id,name FROM user
5 所有用户参数:$_GET、$_POST、$_COOKIE、$_FILES['col']['name']一律不得直接使用，期望是数字的一律用intval转换，期望是字符串的一律至少使用safestr（自定义函数）过滤：$id=intval($_GET['id']);$name=safestr($_GET['name']);
6 文件上传，不得使用$_FILES['col']['name']中的任何部分，必须全部自己构建存储路径和文件名:

$path_parts = pathinfo($_FILES['col']['name']);
if($path_parts["extension"]=='png')
$filename=$user_id.'.png';
else if($path_parts["extension"]=='jpg')
$filename=$user_id.'.jpg';
else
$filename=$user_id.'.gif';

7 jq绑定事件必须使用dom的id，禁止使用selector，如$('p[class=cls1]').bind(...，应该使用$('#p_cls1').bind，原因在于修改时直接查找p_cls1就可以找到绑定的函数，并且效率更好。

8 mysql字段不要使用datetime或者time，用int类型来表示时间

9 表的自增id字段一律用id，不要使用tablename_id，这样不方便写一些自动化程序。

10 js函数尽量根据功能个性化，比如不要使用add,update,post这样的函数名，这种名字容易冲突，为了减少http请求次数，需要合并js时，遇到冲突就很难搞定，应该使用news_add,news_update,product_post这样的名字

付一个css基础文件，由于时间关系没有完成：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>基础样式及预览</title><link rel="stylesheet" href="css.css" type="text/css" media="screen" title="no title" charset="utf-8"/></head><style>*{word-break: break-all}/* html tag 定义开始 */td,a,input,div,span,p{font-size: 12px;line-height: 18px;margin: 0px;padding: 0px;margin: 0px;color: #EFEFEF;}a{color: blue;text-decoration: none;}a:hover{color: red;}/* 列表类定义开始 */table{}tr{}th{}ul{}li{}/* --------------------------------------- *//* 容器类定义开始 */.main{width:100%; margin: 0 auto;font-size:12px}.container{width:1000px; margin:0 auto;}.right,.middle,.left{padding-left:12px;padding-right:12px; float: left}.left{width:116px;}.middle{width:576px;}.right{width:136px;}.content{}.content_main{}/* --------------------------------------- *//* 标题类定义开始 */.title_color01{}.title_color02{}.title_picture01{}.title_picture02{}.tilte_of_section{}/* --------------------------------------- *//* 标题类定义开始 */.button_green{}.button_red{}.button_gray{}.button_hilight{}/* --------------------------------------- *//* 分页类定义开始 */.page{}.page .head{padding-left:12}.page a{}.page .current{}.page .end{}/* --------------------------------------- *//* TAB切换类定义开始 */.tab{}.tab .normal{}.tab .active{}/* --------------------------------------- */   </style><body><div class="main"><div class="container"><div class="left"><div class="title_color01">阅读排行</div><div class="content"></div><div class="title_picture01">活跃用户</div><div class="content"></div></div><div class="middle"><div class="title_color01"></div><div class="content content_main"></div><div class="title_color01"></div><div class="content"><div class="tilte_of_section">填写信息</div><div class="form"></div><div><a class="button_green">提交</a><a class="button_gray">重置</a></div><div class="tab"><div class="active"></div><div class="normal"></div></div><div class="content_main"><div class="page"><a class="head">首页</a><a>第三页</a><a class="current">第四页</a><a>第五页</a><a class="end">末页</a></div></div><div class="content_main"></div></div></div><div class="right"><div class="title_color01"></div><div class="content"></div><div class="title_picture01"></div><div class="content"></div></div></div></div></body></html>