规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.
基本准则
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.
ASP命名规则参考
- 从组件类型名中移去T前缀。例如TButton变成Button;
- 除了第一个元音，删去所有元音字母。例如，Button变成bttn，Edit变成edt;
- 压缩双字母。例如，bttn变成btn;
- 如相同前缀名导致发生冲突，则在某一组件前缀中加入一个元音。例如在TButton组件的前缀中加入元音变为batn，以区别Button的前缀;
- 用不用皆可：去掉一些普遍重复的部分，例如textbox按照前上3条的说明应该书写为txtbx，但是box一词是很多组件共同拥有的词条，所以被去掉，缩写为“txt”。
标准控件
1 btn Button
2 chk CheckBox
3 ckl CheckedListBox
4 cmb ComboBox
5 dtp DateTimePicker
6 lbl Label
7 llb LinkLabel
8 lst ListBox
9 lvw ListView
10 mtx MaskedTextBox
11 cdr MonthCalendar
12 icn NotifyIcon
13 nud NumeircUpDown
14 pic PictureBox
15 prg ProgressBar
16 rdo RadioButton
17 rtx RichTextBox
18 txt或tbx TextBox
19 tip ToolTip
20 tvw TreeView
21 wbs WebBrowser
容器控件
1 flp FlowLayoutPanel
2 grp GroupBox
3 pnl Panel
4 spl SplitContainer
5 tab TabControl
6 tlp TableLayoutPanel
菜单和工具栏
1 cms ContextMenuStrip
2 mns MenuStrip
3 ssr StatusStrip
4 tsr ToolStrip
5 tsc ToolStripContainer
数据
1 dts DataSet
2 dgv DataGridView
3 bds BindingSource
4 bdn BindingNavigator
5 rpv ReportViewer
对话框
1 cld ColorDialog
2 fbd FolderBrowserDialog
3 fnd FontDialog
4 ofd OpenFileDialog
5 sfd SaveFileDialog
组件
1 bgw BackgroundWorker
2 dre DirectoryEntry
3 drs DirectorySearcher
4 err ErrorProvider
5 evl EventLog
6 fsw FileSystemWatcher
7 hlp HelpProvider
8 img ImageList
9 msq MessageQueue
10 pfc PerformanceCounter
11 prc Process
12 spt SerialPort
13 scl ServiceController
14 tmr Timer
印刷
1 psd PageSetupDialog
2 prd PrintDialog
3 pdc PrintDocument
4 prv PrintPreviewControl
5 ppd PrintPreviewDialog
水晶报表
1 crv CrystalReportViewer
2 rpd ReportDocument
其他
1 dud DomainUpDown
2 hsc HScrollBar
3 prg PropertyGrid
4 spl Splitter
5 trb TrackBar
6 vsc VScrollBar
文件规范
- html, css, js, images文件均归档至<系统开发规范>约定的目录中;
- html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;
- css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名;
- Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.
html书写规范
- 文档类型声明及编码: 统一为html5声明类型
<!DOCTYPE html>
编码统一为<meta charset=”utf-8″ />书写时利用IDE实现层次分明的缩进; - 非特殊情况下样式文件必须外链至
<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部; - 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:
<link rel=”stylesheet” href=”…” />
<style>…</style>
<script src=”…”></script>
- 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;
- 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (
<br />), hr(<hr />)等; 属性值必须用双引号包括; - 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;
- 语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
- 尽可能减少div嵌套, 如
<div class=”box”>
<div class=”welcome”>
欢迎访问XXX, 您的用户名是
<div class=”name”>用户名
</div></div></div>
完全可以用以下代码替代:
<div class=”box”>
<p>欢迎访问XXX, 您的用户名是<span>用户名</span>
</p>
</div>
- 书写链接地址时, 必须避免重定向，例如：
href=”http://www.163.com/”
即须在URL地址后面加上“/”； - 在页面中尽量避免使用style属性, 即
style=”…” - 能以背景形式呈现的图片, 尽量写入css样式中;
- 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;
- 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;
- 书写页面过程中, 请考虑向后扩展性;
- class & id 参见 css书写规范.
css书写规范
- 编码统一为utf-8;
- 协作开发及分工: 会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件为base.css, 协作开发过程中, 每个页面请务必都要引入, 此文件包含头部底部样式, 此文件不可随意修改;
- class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是在分发框架文件时命名的, 为JavaScript预留钩子的除外;
- 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
- class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, width; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
- 规避class与id命名(此条重要, 若有不明白请及时相互沟通):
- css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆ padding ＆ float（包括clear） ＆ position（相应的 top,right,bottom,left） ＆ display ＆ visibility ＆ overflow等； 自身属性主要包括: width & height & background & border; 文本属性主要包括： font ＆ color ＆ text-align ＆ text-decoration ＆ text-indent等;
- 书写代码前, 考虑并提高样式重复使用率;
- 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;
- 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;
- 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;
- 减少使用影响性能的属性, 比如position:absolute || float ;
- 必须为大区块样式添加注释, 小区块适量注释;
- 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化会统一处理;
JavaScript书写规范
- 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免从网上download的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);
- 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;
- 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iLiXiaoYang;
jQuery变量要求首字符为’_', 其他与原生JavaScript 规则相同, 如:_iLiXiaoYang
另外, 要求变量集中声明, 避免全局变量. - 类命名: 首字母大写, 驼峰式命名. 如 ILiXiaoYang;
- 函数命名: 首字母小写, 驼峰式命名. 如iLiXiaoYang();
- 命名语义化, 尽可能利用英文单词或其缩写;
- 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;
- 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
- 代码结构明了, 加适量注释. 提高函数重用率;
- 注重与html分离, 减小reflow, 注重性能.
图片规范
- 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;
- 图片格式仅限于gif || png || jpg;
- 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;
- 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
- 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);
- 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.
注释规范
- html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;
- css注释: 注释格式 /这儿是注释/;
- JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;
开发及测试工具约定
建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:
- 不可利用IDE的视图模式’画’代码;
- 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;
- 编码必须格式化, 比如缩进;
测试工具:
前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome;
建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome, 建议安装firebug及IE Tab Plus插件.
其他规范
- 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;
- 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想
本文转自:
http://www.cnblogs.com/baiboy
个人做了一下排版, 个人博客(一个正在认真学习Java的大二学生):
博客地址
欢迎访问和交流, 谢谢!
