一. 规范目的:使开发流程更加规范化。
二. 通用规范:
1. 关于tab, windows下tab键占用4个空格,Linux下占用8个空格
2.css样式属性或者javascript代码后加分号,方便压缩工具“断句”
3.文件内容编码均统一为UTF-8 无BOM编码
4.css,js中的非注释类中文字符须转换成unicode编码使用,以避免编码错误时乱码显示
三. 文件规范:
1. 文件名用英文单词,多个单词用驼峰命名法或下划线
2. 一些浏览器会将含有这些词的作为广告拦截,文件命名、ID、CLASS等所有命名避免以上词汇。
`ad`、`ads`、`adv`、`banner`、`sponsor`、`gg`、`guangg`、`guanggao`等
四. html书写规范:
1. 为每个HTML页面的第一行添加标准模式(standard mode)的声明,确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html>
2. 文档类型声明统一为html5声明类型,编码统一为UTF-8
<meta charset="utf-8">
3. <head>中添加信息
<meta name="author" content=""> //作者
<meta name="description" content=" "> //网页描述
<meta name="keywords" content="a,b,c">//关键字,用逗号分隔
<meta http-equiv="Cache-control" content="no-cache, must-revalidate"> //网页不会被缓存
<link rel="Shortcut Icon" href="favicon.ico"> //收藏图标
IE支持通过特定标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求,否则最好是设置为edge mode ,从而通知IE采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4. 非特殊情况下,css样式文件外链至head之间,javascript 文件外链至页面底部。
5. 含有描述性表单元素添加label
6.多用无兼容性问题的html内置标签
比如span, em , strong , optgroup , label等,需要自定义HTML标签属性时,首先考虑是否已有的合适标签可替换,如果没有,可以使用以“data-”为前缀来添加自定义属性,避免使用其他命名方式。
7. 尽可能减少<div>嵌套
五. css书写规范
1. 为了欺骗w3c的验证工具,可将代码分成两个文件,一个是针对所有浏览器,一个只针对IE。即 将所有符合w3c的代码写到一个文件中,而一些IE中必须而又不能通过w3c验证的代码(如 cursor:hand)放到另一个文件中,再用下面的方法导入。
<!--放置所有浏览器样式-->
<link rel="stylesheet" type="text/css' href="">
<!--只放置IE必须,而不能通过w3c的-->
<!-- [ if IE ]
<link rel="stylesheet" href=" ">
<![endif]-->
2. css样式新建或修改遵循的原则
根据新建样式的适用范围分为三级:全站级,产品级,页面级。
尽量通过继承或层叠重用已有样式
不要轻易改动全站级css, 改动后,要经过全面测试
3. css属性显示顺序
显示属性,元素位置,元素属性,元素内容属性
4. css书写顺序
.header{
/*显示属性*/
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/*自身属性*/
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/*文本属性*/
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};
兼容多个浏览器时,将标准属性写在底部
-moz-border-radius:15px; /*Firefox*/
-webkit-border-radius:15px; /*Safari和Chrome*/
border-radius:15px; /*Opera 10.5+,以及使用IE-CSS3的IE浏览器*/ //标准属性
5.使用选择器时,命名比较短的词汇或者缩写的不允许直接定义样式
.hd,.bd,.td{} //如这些命名
可用上级节点进行限定
.recommand-mod .td{}
6.使用z-index属性尽量z-index的值不要超过150(通用组的除外),页面中的元素内容的z-index不能超过10(提示框等模块除外但维持在150以下),不允许直接使用(999~9999)之间大值。
7.避免使用低效的选择器
body>*{}
ul>li>a{}
......./*反面示例*/
8. 五个不要三个避免一个使用
不要在标签上直接写样式
不要在css中直接写expression
不要在css中写@import
不要在css中写!important
不要在css中使用* 通配符
避免使用filter
避免使用行内(inline)样式
避免使用*设置margin, padding
使用after或overflow的方法清除浮动
9. 减少使用影响性能的属性
position:absolute; float: left
减少在css中使用滤镜表达式和图片repeat, 尤其在body当中渲染性能极差,如果需要用repeat的话,图片的宽或高不能少于8px
六. javascript书写规范
1.命名规范
常量:全部大写并单词间用分隔线分隔
对象的属性或方法名:小驼峰式
如init, bindEvent, updatePosition
示例:Dialog.prototype={
init:function(){};
bindEvent:function(){},
updatePosition:function(){}
}
类名(构造器):小驼峰式但首字母大写,比如Current,DefaultConfig
函数名:小驼峰式,如current(), defaultConfig()
变量名:小驼峰式, 如current, defaultConfig
私有变量名:小驼峰式但是要以_开头,如_current, _defaultConfig
2. 代码格式
if, while, for , do语句需要用{}括起来
json对象需要格式化对象参数
for-in 循环体内用hasOwnProperty方法检查成员是否为自身成员,避免来自原型链上的污染。
3. 长语句可以考虑断行
4. 使用严格的条件判断符,用===代替==,用!==代替!=,避免掉入==的陷阱,在条件判断时,null, undefined, 空字符串,数字0,NaN这些值表示false.
在==时,则会有一些让人难以理解的陷阱
(function(){
var undefined;
undefined==null;// true
1==true;//true
2==true;// false
0==false;// true
0=='';// true
NaN==NaN;// false
[] ==false;// true
[] == ![];// true
})();
5. number类型,string类型,布尔值,Object和数组Array不建议用new构造
6. 引用对象成员用obj.prop代替obj["prop"], 除非属性名是变量
7. 从number转换为string时推荐使用number+“ ”,不推荐使用new String(number)或number.toString()
8. 从string转换为number时用parseInt(), 有必要的话加上第二个参数,表示进制。
9. 从float到integer的转换推荐使用Math.floor或Math.round或Math.ceil
10. 字符串拼接应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能。
11. 尽量避免使用存在兼容性及消耗资源的方法或属性
例如with , void . evil,innerText
12.注重html分离,减少reflow,注重性能
七. 图片规范
1.命名应用小写字母,数字,_组合,便于团队其他成员理解,例如header_btn.gif
2.页面元素类文件均放入images文件夹
八. 注释规范
1. JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。
2. 中间可以添加如下信息。
@file文件名
@addon把一个函数标记为另一个函数的扩展,另一个函数的定义不在源文件中
@argument用大括号中的自变量类型描述一个自变量
@author函数/类作者的姓名
@base如果类是继承得来,定义基类名称
@class用来给一个类提供描述,不能用于构造器的文档中
@constructor描述一个类的构造器
@deprecated表示函数/类已被忽略
@exception描述函数/类产生的一个错误
@exec@extends表示派生出当前类的另一个类
@fileoverview表示文档块将用于描述当前文件,这个标签应该放在其它任何标签之前
@final指出函数/类
@ignore让jsdoc忽视随后的代码
@member定义随后的函数为提供的类名称的一个成员
@param用大括号中的参数类型描述一个参数
@private表示函数/类为私有,不应包含在生成的文档中
@requires表示需要另一个函数/类
@return描述一个函数的返回值
@see连接到另一个函数/类
@throws描述函数/类可能产生的错误
@type指定函数/成员的返回类型
@version函数/类的版本号
九. 开发及测试工具约定
1. 编码格式化,三码统一