本文详细介绍了前端编码规范，包括HTML的重要编码规范，如class和id的命名，input标签的使用；CSS编码规范，如选择器与属性的书写方式，颜色和字体的定义；以及JavaScript编码规范，如变量命名，函数定义和类型检测。遵循这些规范能提高代码质量和可读性。
知识点1：HTML重要编码规范
（参考Baidu EFE team：https://github.com/ecomfe/spec/blob/master/html-style-guide.md）
1.class应代表相应模块或部件的内容或功能（而不是左边右边这样的样式信息），全字母小写，单词间以 - 分隔；
2.id必须页面唯一，全字母小写，单词间以 - 分隔；
3.对于无需自闭合的标签如input、img、br、hr等，不允许自闭合；
4.属性值必须用双引号包围，不允许单引号和不使用引号；
5.指定字符编码的meta必须是head的第一个直接子元素；
6.页面必须包含title声明标题，并紧随charset声明之后；
7.引入css时必须指明rel="stylesheet"，无须指明type（默认就是text/css）；
8.在head中引入页面需要的所有CSS资源（否则可能导致页面闪烁）；
9.Js放在页面末尾，或采用异步加载（否则将阻断页面渲染，影响性能）；
10.禁止img的src取值为空，延迟加载的图片也要增加默认src（否则部分浏览器会重新加载当前页面）；
11.为重要图片添加alt属性，不仅能提高用户体验，还能有利于搜索引擎优化；
12.为图片添加width和height属性以免页面抖动；
13.有下载需求的图片采用img标签实现，无下载需求的图片采用CSS背景图实现；
14.有文本标题的控件必须使用label标签将其与其标题相关联（label用于为 input 元素定义标注并可被点击。将控件置于label内或将label的for属性指向控件id）；
15.使用button时必须指明type（默认为submit，如果被置于form中点击后将导致表单提交）；
16.尽量不使用按钮类元素的name属性（由于兼容性问题会带来许多难以发现问题）；
知识点2：CSS重要编码规范
（参考Baidu EFE team：https://github.com/ecomfe/spec/blob/master/css-style-guide.md）
1.选择器与 { 之间必须包含空格，属性名与之后的 : 间不允许包含空格，: 与属性值之间必须包含空格；
2.当一个rule包含多个selector时，每个选择器声明独占一行；
3.属性选择器中的值必须用双引号包围，不允许使用单引号和不使用引号；
4.选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确；
5.同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性；
6.当数值为0-1之间的小数时，省略整数部分的0；
7.url()函数中的路径不加引号；
8.rgb颜色值必须使用十六进制记号形式#rrggbb，不允许使用rgb()；
9.颜色值可以缩写时必须缩写，如#aaccaa可缩写为#aca。不使用命名色值；
10.font-family属性中的字体族名称应使用英文，如“SimSun”宋体，“SimHei”黑体，“Microsoft YaHei”微软雅黑；
11.font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )；
12.需要在windows平台显示的中文内容其字号应不小于12px；
13.font-weight属性用数值方式描述，如400和700分别等价于normal和bold；
知识点3：JavaScript重要编码规范
（参考Baidu EFE team：https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md）
1.运算符处换行时，运算符必须在新行的行首；
2.不同行为或逻辑的语句集，使用空行隔开；
3.在if / else / for / do / while语句中，即使只有一行也不省略{}；
4.变量、函数、类的方法与属性都使用Camel命名法，如var loadingModules；
5.常量、枚举的属性使用全部字母大写，单词间下划线分隔的命名方式；
6.类、枚举变量使用Pascal命名法，如function TextNode(options) {}；
7.类名使用名词，函数名使用动宾短语；
8.boolean类型的变量使用is或has开头；
9.有时会使用特殊标记进行说明，必须用单行注释的形式。如：TODO（有功能待实现）、FIXME（代码运行没问题，但可能由于时间赶或者其他原因需要修正)、HACK（为修正某些问题而写的不太好或者使用了某些诡异手段的代码）；
10.每个var只声明一个变量。变量即用即声明，不在起始位置统一声明所有变量；
11.不在循环体中包含函数表达式，将其实现提取到循环体外，否则运行过程中会生成循环次数个函数对象；
12.对有序集合进行遍历时，缓存length提高性能。因为有时会每次访问都动态计算元素个数；
13.对有序集合进行顺序无关的遍历时，可以使用while(n--)这样的逆序遍历来节省变量；
14.类型检测优先使用typeof，对象类型检测使用instanceof；
15.类型转换成string时使用 + ''，转换成number时使用+，转换成boolean时使用!!；
16.使用paeseInt时必须指定进制；
17.字符串开头和结束使用单引号。因为字符串经常用来拼接HTML，这样可以方便包含双引号而不需转义写法；
18.使用+拼接字符串；
19.使用对象字面量{}创建新Object，如果所有属性均可以不添加引号则都不添加，否则都添加单引号；
20.for in遍历对象时，使用hasOwnProperty过滤掉原型中的属性；
21.使用数组字面量[]创建新数组，除非想要创建的是指定长度的数组；
22.遍历数组使用for in可能得到错误结果，因此应使用length遍历；
23.自己实现的常规排序算法在性能上并不优于数组默认的sort方法；
24.清空数组使用length=0；
25.一个函数的长度控制在50行以内；
26.通过options参数传递非数据输入型参数；
27.遍历DOM元素集合时，尽量缓存集合长度，如需多次操作同一集合，应将集合转为数组；
28.尽可能通过为元素添加预定义的className来改变元素样式，避免直接操作style设置；
29.尽量减少DOM操作，操作DOM时尽量减少页面reflow。会触发reflow的有DOM元素增删和改内容、修改影响元素布局的属性、resize浏览器窗口等；
30.在没有事件自动管理的框架支持下，应持有监听器函数的引用，在适当时候（元素释放、页面卸载等）移除添加的监听器；
知识点4：CSS命名参考
（参考：https://www.cnblogs.com/ipoplar/p/4539415.html）
示例：
知识点5：项目目录结构规范
（参考Baidu EFE team：https://github.com/ecomfe/spec/blob/master/directory.md）
1.对于目录名，有习惯性缩写的单词必须用缩写，且不允许复数形式。如img-图片，js-JavaScript脚本。
2.${root}表示项目的根目录，直接置于${root}下的目录称作一级目录，一级目录必须具有某种职能属性。如src-源文件、test-测试用例、doc-项目文档、dep-引入依赖的第三方包、tool-开发或构建时使用的工具、entry-页面入口文件等等。除此之外${root}下也可以放置一些跟项目发布相关的文件，如build.sh，build.xml，Makefile，Gruntfile等等。
3.src目录内按业务逻辑来划分子目录，通常为一个业务公共资源目录common和多个业务目录biz1、biz2等。业务目录内通常直接放置js资源，并鼓励将业务相关源文件资源都直接置于业务目录下。当源文件资源数量较多时应考虑是否划分更细的子业务，建立子业务目录subbiz1、subbiz2等。如果无法分隔，也允许出现css、tpl、img、swf、font等目录。
示例：
${root}/
src/
common/
img/
sprites.png
logo.png
conf.js
layout.css
biz1/
img/
add_button.png
add.js
add.tpl.html
add.less
biz2/
subbiz1/
list.js
list.tpl.html
list.css
subbiz2/
biz3/
css/
add.css
remove.css
img/
add_button.png
tpl/
add.html
remove.html
add.js
remove.js
dep/
er/
src/
test/
esui/
src/
test/
test/
doc/
index.html
main.html
......
扫一扫
1429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
