技术部前端代码规范
【摘要】公司前端代码规范的培训内容
【作者】xingxing
一、HTML
1、用四个空格来代替制表符（tab）
2、嵌套元素应当缩进一次（即两个空格）。
3、对于属性的定义，确保全部使用双引号，绝不要使用单引号。
HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
（1）class
（2）id, name
（3）data-*
（4）src, for, type, href, value
（5）title, alt
（6）role, aria-*
4、不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。
5、设置通用代码结构及head内元素
二、css
1、十六进制值应该全部小写且尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
2、为选择器中的属性添加双引号，例如，input[type="text"]。
3、避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。
4、每条声明都应该独占一行。
5、所有声明语句都应当以分号结尾。
6、css属性书写顺序, 建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起.
布局定位属性: margin、padding、float(包括clear)、position(相应的flow等;
自身属性: width &; height &; background &; border;
文本属性:font、color、text-align、text-decoration、text-indent等;
其他属性: list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序) 、zoom等.
7、必须为大区块样式添加注释, 小区块适量注释;
8、将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。
三、命名规范
1、文件命名
文件参考公司第一个项目
2、Class命名
（1）class 名称中只能出现小写字符和破折号
（2）避免过度任意的简写。
（3）使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
（4）基于最近的父 class 或基本（base） class 作为新 class 的前缀。
（5）使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
（6）公用的样式类的使用ui-*
（7）用的组件类的使用tmpl-*
（8）具体页面中的特殊样式使用sp-*
（9）不带任何前缀的类名为跟随性质的类，不能单独定义属性，必须和其他类一起使用
（10）Id首字母小写驼峰式命名
3、函数变量命名
（1）构造函数（类）命名：首字母大写，驼峰式命名。
（2）其他变量命名：变量名＝类型＋对象描述
JavaScript变量起名类型
变量命名前缀
举例
Array 数组
a
aList，aGroup
Boolean 逻辑
b
bChecked，bHasLogin
Function 函数
f
fGetHtml，fInit
Integer 数字
n
nPage，nTotal
Object 对象
o
oButton，oDate
Regular Expression 正则
r
rDomain，rEmail
String 字符
s
sName，sHtml
（3）$：表示Jquery对象
（4）常量首字母大写命名
4、图片命名
图片的名称分为头尾两部分,用下划线隔开,头部为页面名称+尾部表示此图片的大类性质
四、js规范
1、编写注释
公共组件维护者和各栏目WD都需要在文件头部加上注释说明：
/**
*文件用途说明
*作者姓名、联系方式（旺旺）
*制作日期
**/
大的模块注释方法：
//================
// 代码用途
//================
小的注释；
//代码说明
注释单独一行，不要在代码后的同一行内加注释。例如：
//姓名
var name = “abc”; V
var name =”abc”; //姓名 X
2、定义变量提到作用域顶部
3、语句结尾的分号不可省略
4、运算符 ( = + - * / ) 前后需要添加空格
欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏， 必须干货！
