Web Front-end Development Document Specification(www.weyoo.cn)
1、文件管理规范
1) 资源文件目录
| 背景图片目录 | 图标目录 | 图片目录 | 临时图片目录 | 样式文件目录 | 脚本文件目录 | flash文件目录 | 上传文件目录 | 静态文件目录 |
| images/bg | images/ico | images/pic | images/temp | style | js | flash | upload | static |
2) 文件夹及文件命名
用简短有意义的英文或者拼音（不能出现中文命名）来命名。
①文件夹命名规则: 全部小写。例如(emotions, download, mail)。
②html,js,css文件命名规则: 第一个单词首字母小写,之后每个单词首字母大写,html文件后缀名统一为.htm。例如(index.htm, customizeCity.htm, register.js, dateSelect.js, base.css, mapApply.css)。
③图片命名规则: 第一个单词首字母小写,之后每个单词首字母大写,或者全部小写,单词间用下划线连接。例如(btn_sign.gif, bgTipBox.png)。
2、XHTML书写规范
- 1) 文档类型声明统一为XHTML 1.0 Transitional;
- 2) 编码统一为utf-8;
- 3) 确保有Title,Description,Keywords等完整的meta标签。
- 4) 引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.7.1.min.js;引入插件,文件名格式为库名称 + 插件名称,比如jQuery.cookie.js;
- 5) 非特殊情况下样式和脚本代码必须独立于xhtml代码于外部文件中，样式文件必须外链至<head>...</head>之间，渲染执行脚本必须外链至页面底部;
- 6) 引入外部样式文件及脚本文件采用时间戳后缀，防止由于缓存问题导致页面不能及时更新;
- 7) 书写时采用制表符缩进(大小为4);
- 8) 编码必须遵循w3c标准,标签、属性及属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合;属性值必须用双引号包括;
- 9) 充分利用无兼容性问题的html自身标签,比如span,em,strong,label,等等;需要为html元素添加自定义属性的时候,首先要考虑下有没有默认的已有的合适标签去设置,如果没有,可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;
- 10) 语义化html,如标题根据重要性用h1~h6(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素;
- 11) 尽可能减少div嵌套;
- 12) 必须为含有描述性表单元素(input,textarea)添加label;
- 13) 能以背景形式呈现的图片,尽量写入css样式中;
- 14) 图片必须加上alt属性;给重要的元素和截断的元素加上title;
- 15) 不是标签一部分的特殊符号都用编码表示:比如<(<)&>(>)&空格()&»(»)等等;
- 16) 给区块代码及重要功能(比如循环)加上合理的注释,方便后台添加功能:注释格式,‘–-’只能在注释的始末位置,不能出现2个或2个以上的"--";
3、CSS书写规范
- 1) 编码统一为utf-8;
- 2) 全局定义以及全站公共部分共用文件common.css,开发过程中,每个页面请务必都要引入,此文件包含reset,常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式及头部底部样式,此文件不可随意修改;
- 3) 选择符命名及其使用：
① 命名请尽量使用英文避免使用汉语拼音,使用驼峰式命名和划线命名法。如(searchBox, p_i_4_l, width200);驼峰式命名法用来区别不同的单词，划线命名法表示从属关系。命名要语义化,简明化,尽量使用简短的英文单词组合;
② id是唯一的并是父级的,class是可以重复的并是子级的,所以id一般使用在大的模块上,class可用在重复使用率高及子级中;
③ 严禁出现#id ul li(长度超过2以上的派生类)等类似选择器;允许.active .classname;减少使用基于元素的类选择器:div.classname;减少属性选择器：#id[title=weyoo]; ④ 严禁使用 “*” 选择符; - 4) CSS属性书写顺序尽量遵循:显示属性->盒模型->文字属性->排版->其他。例如:#searchBtn{display:block;position:abtolute;left:2px;top:0;width:50px;height:19px;border:1px solid #ccc;padding:5px 2px;font:Arial 12px/19px;text-align:center;vertical-align:middle;color:#666;background:#999;cursor:pointer;}
- 5) 尽量使用高级语法简写代码：body{font:italic bold 12px/20px arial,sans-serif;} input{padding:2px 3px; border:1px solid #999};
- 6) 书写代码前,考虑并提高样式重复使用率,归类class分组，以便通用性;
- 7) 背景图片请尽可能使用sprite技术,减少http请求;
- 8) 减少使用影响性能的属性,比如position:absolute||float;性能比较:“默认” 优于 “定位” 优于 “浮动”;
- 9) 尽量不要使用expression等不兼容的属性;
- 10) 尽量不使用hack写出兼容当前主流浏览器(ie6~ie9,firefox,chrome,safari,opera)的代码。例如:float元素的父元素不能指定clear属性,务必指定width属性(尽量使用em而不是px做单位),尽量不指定margin和padding等属性(可以在float元素内部嵌套一个标签来设置margin和padding)。
- 11) 文件头部注释须标明作者及修改日期。必须为大区块样式添加合理注释;
- 12) 测试完成后压缩合并css文件,力求降低http请求;
4、JavaScript书写规范
- 1) 编码统一为utf-8;
- 2) 常用功能函数统一写在公用js文件commonToolFn.js里;
- 3) 书写时采用制表符缩进(大小为4);
- 4) 常量所有字符大写，变量所有字符小写;类命名:首字母大写驼峰式命名.如CommonTool;函数命名:首字母小写驼峰式命名.如arrEach();
- 5) 命名语义化,尽可能利用英文单词或其缩写;代码结构明了,提高函数重用率;
- 6) 文件头部注释须标明作者及修改日期。函数注释须标明函数功能，参数及返回值;
- 7) 书写过程过,每行代码结束必须有分号;
- 8) 声明变量必须用var ,包括循环 遍历:如：for(var i=0;i<10;i+=1){},for(var value in obj){};注意减少全局变量的声明 避免变量混乱;
- 9) 条件判断后执行代码块必须加花括号:if(){...};for(){...}
- 10) 规范json书写:必须以花括号开始和结束;
- 11) 测试完成后压缩合并JavaScript文件,力求降低http请求;
5、性能优化规范
- 1) 由于大多都是操作DOM，所以在查找节点时务必书写高效的选择器(jQuery);
- 2) 缓存频繁使用的对象、数组及相关的属性;
- 3) 使脚本尽可能少地运行或者不运行(按需加载,比如选项卡数据在页面加载时只加载第一个选项卡的内容数据，其他选项卡异步提交加载);
- 4) 合理的使用图片格式，并进行压缩优化，保持图片最佳视觉以及大小;
- 5) 对于大数据，多屏页面进行数据延迟加载处理，以及图片预加载;
6、版本控制规范
- 1) 代码提交前清理无关文件(比如缩略图缓存数据文件thumb.db等等);
- 2) 对于CSS以及JS约定好的代码注释必须加上之后再提交到SVN，方便SVN自动更新文件编辑信息以及版本号;
- 3) 变更文件(特别是模版文件以及重要的页面)比较大时最好做好备份工作，方便发布到正式线出现问题时快速撤回;
- 4) 代码修改或提交前获取下最新版本，有规律的提交代码；签入代码前经过良好的测试;
7、开发调试工具
- 1) 前端常用编辑器/IDE(开发);
- 2) IDE自带/浏览器插件(调试);
- 3) CSS,JS压缩工具;
- 4) 其他辅助工具;
