前端代码规范代码管理

前端代码规范-Html 篇
  • 1. 严格的四格缩进;
  • 2. 规范的代码注释;
  • 3. 使用符合语义的标签书写 HTML 文档, 选择恰当的元素表达所需的含义;
  • 4. 元素的标签和属性名必须小写, 属性值必须加双引号;
  • 5. 正确区分自闭合元素和非自闭合元素,非闭合标签必需写反斜杠;
  • 6. 声明方法遵循HTML5的规范; [!DOCTYPE charset等]
  • 7. 写清楚页面的TDK标签;[title标签.description meta标签.keywords meta标签]
  • 8. 尽量精简Html代码;
  • 9. 使用img标签时,务必写清楚其alt属性;
  • 10. 使用a标签时,务必写清楚其title属性;
  • 11. 如无特定要求,页面编码采用UTF-8;
  • 12. 合理的使用H1-H6标签进行标题的嵌套;
  • 13. br标签只在文本中间使用;
  • 14. 尽量避免& nbsp空格符的使用;
  • 15. 能以背景形式呈现的图片, 尽量写入css样式中;
前端代码规范-Css 篇
  • 1. 严格的样式分离;[使用外部样式表的方式]
  • 2. 避免使用@import方式导入css文件;[使用link方式导入]
  • 3. 在Html页面的head标签中导入样式表;
  • 4. 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置;
  • 5. 类名命名请使用下划线分割[避免使用中划线以及驼峰式命名];
  • 6. 项目中尽量减少css文件数量;
  • 7. 避免使用!important ,禁止在css中使用*选择符;
  • 8. 规范的css注释[顶部注释,模块注释]
  • 9. id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id;
  • 10. 合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称;
  • 11. 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag;
  • 12. 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px;
  • 13. 如果是16进制表示颜色,则颜色取值应该大写,如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC;
  • 14. 如果没有边框时,不要写成border:0,应该写成border:none ;
  • 15. 在保持代码结构的前提下,尽量合并重复的样式;
  • 16. background、font等可以缩写的属性,尽量使用缩写形式;
  • 17. 为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei,几个单词中间有空格组成的必须加引号);
  • 18. 字体粗细采用具体数值,粗体bold写为700,正常normal写为400;
  • 19. 背景图片请尽可能使用sprite技术,sprite按照模块、业务、页面来划分均可;
  • 20. 层级(z-index)必须清晰明确,页面弹窗、气泡为最高级(最高级为999),不同弹窗气泡之间可在三位数之间调整;普通区块为10-90内10的倍数;区块展开、弹出为当前父层级上个位增加。
前端代码规范-Javascript 篇
  • 1. js文件应尽量放到body的后面引入;
  • 2. 严格的四格缩进;
  • 3. 规范的代码注释;[头部注释以及模块注释]
  • 4. 所有的变量必须在使用前进行声明;
  • 5. 所有的函数在使用前进行声明。内函数的声明跟在var语句的后面。这样可以帮助判断哪些变量是在函数范围内的。函数名与((左括号)之间不应该有空格。)(右括号)与 开始程序体的{(左大括号)之间应插入一个空格。函数程序体应缩进四个空格。}(右大括号)与声明函数的那一行代码头部对齐。
  • 6. 变量名应由26个大小写字母(A..Z,a..z),10个数字(0..9),和_(下划线)组成。
  • 7. 不要在命名中使用$(美元符号)或者(反斜杠)。
  • 8. 不要把_(下划线)作为变量名的第一个字符。
  • 9. 必须与new共同使用的构造函数名应以大写字母开头。
  • 10. 全局变量应该全部大写
  • 11. 每一行最多只包含一条语句。把;(分号)放到每条简单语句的结尾处。
前端代码管理
  • 1. 使用统一的css重置库;【 http://frontend.house365.com/css/reset.css
  • 2. 建立常用jQuery插件库,整理相关代码形成插件库;【 http://frontend.house365.com/
  • 3. 建立常用的图标库,推荐使用iconfont;
  • 4. css管理推荐使用Less相关技术;
  • 5. 统一的 rem 单位设置;
  • 					
    						(function(doc, win) {
    							var docEl = doc.documentElement,
    								resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    								recalc = function() {
    									var clientWidth = docEl.clientWidth;
    									if(!clientWidth) return;
    									docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
    									// 限定页面最大宽度时使用
    									if(clientWidth > 750) {
    										docEl.style.fontSize = '40px';
    										return;
    									}
    									// 限定页面最大宽度时使用 end
    								};
    							if(!doc.addEventListener) return;
    							win.addEventListener(resizeEvt, recalc, false);
    							doc.addEventListener('DOMContentLoaded', recalc, false);
    						})(document, window);
    					
    				
前端代码浏览器兼容
  • IE7-11,FF,chrome,safari(苹果电脑),360浏览器(含兼容模式),搜狗浏览器,UC浏览器