前端开发规范文档
Posted xieyongbin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发规范文档相关的知识，希望对你有一定的参考价值。
目的
提高团队协作效率，方便前后端功能添加和后期优化及维护。
一，通用规范
1、Tab键用4个空格代替（windows下Tab键占4个空格）；
2、统一文档编码为”UTF-8”，统一文档类型为<!DOCTYPE html>，统一收藏夹图标，统一字体;
3、禁止在js/json中使用关键字命名；
4、if、while、when、switch语句的执行体用”{}”括起来，禁止省略花括号；
5、禁止在return关键字及要返回的表达式之间换行；
6、必须为大区块样式或功能模块添加注释，小区块适量注释；
7、特殊符号使用转义字符表示；
8、Html、css、js、images文件均归档到<系统开发规范>约定的目录中去；
9、Css属性或者javascript代码以“；”结尾，也方便压缩工具断句；
10、引入JS库文件，文件名须包含库名称及版本及是否为压缩版，比如jquery-1.4.1.min.js;引入插件，文件名格式为库名称+插件名称，比如jQuery.cookie.js；
11、以var严格模式声明变量，切勿在一段js代码中同时使用var、let、const声明变量；
12、符合web标准，语义化html，使结构、表现和行为的有效分离，代码要求简洁明了有序，尽可能较少服务器负载，保证最快的解析速度；
一、文件/资源命名
1、确保文件命名以英文字母而不是数字开头，以特殊字符开头的文件一般有特殊的含义和用处，如register-form.html；
2、资源的字母名称须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或认为修改过后，大小写不同导致引用文件不同的错误，很难被发现；
3、需要对文件增加前后缀或特定的扩展名（如.min.js,.min.css）,或一串前缀（如123.main.min.css）情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据；
4、文件存放位置的规范，如css存放.css样式文件，javascript存放.js文件；
二、协议
1、引用图片，样式和脚本时，不要指定引入资源所带的具体协议；
三、CSS书写规范
1、不要在标签上直接写样式；
2、不要将CSS样式写成单行；
3、不要在CSS样式中使用expression表达式;
4、不要在CSS样式中使用@import;
5、每个样式属性后加”;”;
6、样式兼容模式加前缀:-webkit、-o-、-moz-；
7、Margin、padding、border使用合并方式书写；
四、HTML书写规范
1、非特殊情况下，CSS样式文件外链到<head>之间，JavaScript文件外链到页面底部；
2、标签、属性由英文小写组成，所有标签除(br、img、hr、input、link等个别外)必须闭合；
3、属性值由””双引号；
4、尽可能减少<div>等标签的嵌套，减少代码量及提高代码可读性；
5、语义化html,如段落标记使用<p>，列表用<ul>等，内联元素中不可嵌套块级元素；
五、JavaScript书写规范
(1)命名规范
1、常量名:全部大写，单词间用”_”下划线分隔，如:CSS_BTN_NUM；
2、对象的属性和方法名:小驼峰式，如:bindEvent = “click”;
3、类名(构造器):小驼峰式首字母大写，如:Current,DefaultConfig;
4、函数名:小驼峰式，如:current(),defaultConfig();
5、变量名:小驼峰式，如:current,defaultConfig;
(2)代码格式
1、”（）”括号前后需要空格；
2、”=”等号前后需要空格；
3、”,”逗号前后需要空格；
4、if、while、when、switch语句的执行体用”{}”括起来；
5、数组，对象内避免额外的”逗号”，如:var arr = [“sex”,”year”,”name”,];
6、使用严格条件判断，用”===”代替”==”;
六、注释
1、Javascript、css文件注释需要标注创建/修改时间，重大版本修改记录，功能描述，函数描述；
七、图片规范
1、命名以小写英文、数字、”_”组合，便于团队其他成员理解，如header_btn.png；
2、重要图片加上alt属性，重要的元素加上title;
3、保证图片质量的前提下，使用sprite技术集中小的背景图和图标，减少页面http请求和加载时间；
八、代码检查
1、对于JavaScript,建议使用JSLint或JSHint;
6、Css、JS、Html等在线格式化工具；
以上是关于前端开发规范文档的主要内容，如果未能解决你的问题，请参考以下文章