前端书写规范
2017-05-24 本文已影响0人
予以暖杀风
==注重结构、表现、行为分离==
1. html结构
1. 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="utf-8" />
2.不允许写行内样式与内联样式表；
3.css引入统一放入</head>前；
4.javascript引入建议统一放入</body>前；
5.页面公用样式统一放入reset.css中，分别引入；独用样式，按需引入。
6.代码缩进，使用Tab键实现层次分明的缩进;
7.标签必须小写，合理关闭。
8.所有的标签必须合理嵌套，注重语义化。
9.自定义属性推荐使用 data-；布尔类型的属性，建议不添加属性值。
9.属性名必须使用小写字母，用双引号包围。
10.表单：必须为含有描述性表单元素(input, textarea)添加label。使用 button 元素时必须指明 type 属性值。尽量不要使用按钮类元素的 name 属性。
11.图片：禁止 img 的 src 取值为空。避免为 img 添加不必要的 title 属性。为重要图片添加 alt 属性。 添加 width 和 height 属性，以避免页面抖动。
2. css表现
1.（禁止）将样式写为单行
2. 省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
3. 不要在CSS中使用expression
4.（禁止）使用css原生@import
5. 不要在CSS中使用!important
6.（不推荐）ie使用filter,（ 禁止）使用expression
7. 使用after或overflow的方式清浮动
8. 去掉小数点 0
9.每个样式属性后加 ";"
10.避免浏览器hacks
11Class命名中（禁止）出现大写字母，(必须)采用“- ”对class中的字母分隔
12.ID和class(类)命名应反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。
13.尽可能使用缩写属性，如padding，margin，background，font。
14.URI值（url()）不要使用引号。
15.删除空属性及注释后的无效属性。
16.书写顺序：显示属性，元素位置，元素属性，元素内容属性
3. JavaScript
1.（禁止）使用eval，有注入风险，尤其是ajax返回数据,效率低，
2. 除了三目运算，if,else等（禁止）简写
3. 当需要缓存this时必须使用变量进行缓存
4. 左花括号置于行末，右花括号置于行首。
5. 声明变量，必须var。
4、类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;
5、函数命名: 首字母小写驼峰式命名. 如iTaoLun();
6、命名语义化, 尽可能利用英文单词或其缩写;
7、尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval_r() & innerText;
8、后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;
9、代码结构明了, 加适量注释. 提高函数重用率;
10、注重与html分离, 减小reflow, 注重性能.
