前端编码规范
HTML规范
- 整体结构:
1) 文件首行应为<!DOCTYPE html>。 2) 必须声明文档的编码为UTF-8。 3) 应按照从上到下，从左到右的视觉顺序编写结构。 4) 多用Flex布局，少用浮动布局。 5) 明显的数据表格应使用Table布局。 6) 在head元素中引入样式文件，在body元素底部引入js文件。 7) 内联元素不应包含块级元素。 8) 应保持良好的树形结构。 9) 在保证扩展性的同时减少冗余结构。 10) 每个模块应写好注释。 - 代码格式
1) 缩进使用2个空格。 2) 移除行尾的空格。 3) 所有元素必须闭合。 4) 在恰当的元素上写行类样式。 5) 元素属性使用双引号包裹。 6) 元素名全部使用小写。 7) 元素上的id属性不能重复。 8) 一个元素上的类名不宜超过3个。 9) 类名全部小写，以中划线连接。 10) 元素上的自定义属性使用data-开头 11) 属性之间间隔1个空格。 12) 为html元素指定正确的lang属性。 13) 布尔型属性无需赋值。 14) 元素应严格遵循父子关系。 - 语义化
1) 类名应以模块为单位命名，且具有唯一性，不使用无意义的字符组合。 2) 元素应使用符合内容特征的语义化标签。 3) 图片元素应加入alt属性。 4) 背景图片的文字同样应写在代码中，并利用样式使其不可见，有利于搜索引擎抓取。 5) 以实体字符代替与HTML语法相同的字符，避免浏览器解析错误。
CSS规范
- 整体结构
1) 不可粗暴重置元素默认样式，而是统一各浏览器的视觉效果。 2) 模块内部的子元素均需基于父模块来选择。 3) 减少样式耦合，一段样式只做一件事。 4) 样式层级结构应与HTML结构保持一致。 5) 通过类名构建作用域，避免样式污染。 6) 每个模块应写好注释。 7) 样式的管理是一门艺术。 - 代码格式
1) 缩进使用2个空格。 2) 后代选择器层级不能超过3层。 3) 不使用id作为选择器。 4) 每一条属性必须换行，且以分号结尾。 5) 属性名必须小写。 6) 禁止使用混乱的z-index层级。 7) 可以连写的属性建议连写。 8) 省略属性值为0的单位。 9) 需要引号的地方使用双引号。 10) 颜色值使用16禁止或者rgba的形式。 11) 显式的在body中声明字体。 12) 属性应保持一致的顺序。 13) 尽量不使用属性覆写。 14) 尽量不使用!important。 15) 避免使用消耗性能的表达式。 16) 装饰元素尽量使用伪类来表达。 17) 图片元素的大小不宜超过200K，透明图片使用png24格式。 18) 使用雪碧图减少图片请求连接数。 19) 动画优先使用transform属性。
ES6规范
- 整体结构
1) 禁止使用关键字作为变量或常量。 2) 正确的使用高阶函数。 3) 优先使用ES6的语法。 4) 异步操作使用Promise或async/await语法。 5) 真值判断、非空判断、数值判断要注意隐式转换。 6) 函数注释应包含清晰的入参和返回值说明（类型，变量名，含义）。 7) 数值计算与大数值要注意精度丢失。 8) 同一类型的代码应归纳到一个文件里。 - 代码格式
1) 缩进使用2个空格。 2) 在花括号前添加1个空格。 3) 运算符前后分别添加1个空格。 4) 文件末尾插入一个空行。 5) 非特殊情况语句结尾无需添加分号。 6) 代码块之间插入1个空行。 7) 变量或函数命名统一使用驼峰规则，且含义清晰。 8) 常量统一使用大写加下划线连接规则，且含义清晰。 9) 数组最后一个元素与对象最后一个属性禁止添加逗号。 10) 字符串使用单引号。 11) 字符串包含表达式时，使用模板字符串。 12) 魔鬼数字使用常量替代。 13) 除非变量会被重新赋值，一律使用const定义。 14) 优先使用箭头函数。 15) 使用扩展操作符合并数组或对象。 16) 对象中的同名键值应简写。 17) 优先使用字面量创建对象或数组。 18) 对数组或对象使用解构赋值。 19) 判断相等严格使用全等操作符。 20) 优先导出单个函数，避免循环依赖。 21) 不要在逻辑判断中定义函数。 22) 函数传参应定义默认值。 23) 使用class语法创建类。 24) 条件表达式不可省略大括号。
VUE规范
- 整体结构
1) 组件应按照业务逻辑划分，避免颗粒度过大或过小。 2) 以模板、脚本、样式的顺序书写代码。 3) 状态管理若较复杂，应使用状态管理器。 - 代码格式
1) 页面文件名以小写加连字符的规则命名。 2) 组件文件名以驼峰规则命名，且首字母大写。 3) 组件必须有name属性，并与文件名一致。 4) 唯一的子组件要以父组件名为前缀。 5) 引入组件时，变量应与该组件一致。 6) 在模板中使用组件时，与该组件名一致。 7) 模板上的根元素类名与组件名一致，但改为小写加连字符。 8) 组件的data必须是一个函数，并返回对象。 9) 子组件的prop定义应尽量详细。 10) 组件通信应通过事件的方式，避免直接修改组件的状态。 11) v-for指令必须添加key属性。 12) 避免v-for与v-if同时使用。 13) 组件样式统一使用scss语法，并添加scoped属性。 14) 如果要覆写外部组件的样式，使用样式穿透::v-deep。 15) 模板中元素上的属性超过3个时应换行书写。 16) 模板中若有复杂的表达式应使用计算属性或调用方法。 17) 模板中统一用:绑定值，用@绑定事件，用#绑定插槽。 18) 组件的选项避免使用箭头函数，因为会丢失this绑定。 19) 确保模板中使用的变量是响应式的。
