前端规范总结

引自《阿里规约》的开头片段：

----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制定交通法规表面上是要限制行车权，灰机上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的同一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少采坑，杜绝踩重复的坑，切实提升系统的稳定性，码出质量。

命名：

项目命名、目录命名、HTML、js、css、png等文件命名、都使用小写方式，以中划线分割；

命名严谨性：尽量使用英文拼写，让阅读者易于理解

HTML

缩进：2个空格

分块注释：在每一个块状元素、列表元素和表格元素后，加上一对HTML注释

语义化标签：避免整个页面都是div和p标签；

双引号：使用双引号

CSS

类名使用上述小写加中划线命名规范；id采用驼峰式命名；scss中的变量、函数、混合、placeholder采用驼峰式命名

css选择器避免使用标签名

使用直接子选择器

尽量使用缩写属性

每个选择器及属性独占一行

省略0后面的单位

避免使用id选择器及全局标签选择器防止全局污染

less

公共less文件放在style/less/common文件夹

按以下顺序组织

1、@import

2、变量声明

3、样式声明

避免嵌套过多

JavaScript

命名小写驼峰，不能以下划线开始或结束

方法名、参数名、成员变量、局部变量统一使用lowerCamelCase风格，必须遵从驼峰格式

增删改查、详情统一使用：add，update，delete，detail，get

常量命名全部大写，单词间用下划线隔开

不同逻辑、语义、业务的代码之间插入空行分隔开以提升可读性

字符串统一使用单引号（在创建HTML字符串非常有好处）

对象声明：使用字面值创建对象，使用字面量代替对象构造器

使用ES6+

if，else，for，while，do，switch，try，catch，finally，with后面必须有大括号

undefined使用typeof和字符串'undefined'判断

条件判断和循环最多三层，可用三元运算符代替，但不要过长，超过三层抽成函数

this的转换命名使用self

大量使用console.log会有性能问题

VUE

命名：组件名始终是多个单词，采用pascal-case（所有首字母大写），组件文件命名使用kebab-case，基础组件以base开头，和父组件紧密耦合的子组件应以父组件名作为前缀

在template中使用组件，应适应pascal-case（所有首字母大写），并使用自闭合组件

prop定义应该尽量详细：camel-case，指定类型，加上注释，required或default，若有业务需要必须加validator

组件样式设置scoped作用域

如果特性元素过多，主动换行

模板中使用简单表达式，复杂表达式重构为计算属性或方法

v-if、v-show：频繁切换使用v-show，条件改变少使用v-if

vue2结构顺序：name>components>mixins>props>data>computed>watch>filter>钩子函数（按执行顺序）>methods

路由
使用懒加载

命名使用kebab-case尽量vue文件的目录结构保持一致

path以/开头

vue项目的命名与后端命名保持一致

目录：

src：源码目录

api：所有api接口

assets：静态资源，images，icons，styles等

components：公用组件

config：配置信息

constants：常量信息，项目所有Enum，全局常量等

directives：自定义指令

filters：过滤器，全局工具

datas：模拟数据，临时存放

lib：外部引用的插件存放及修改文件

mock：模拟接口，临时存放

plugins：插件，全局使用

router：路由，统一管理

store：vuex，统一管理

themes：自定义样式主题

views：视图目录

role：模块名

role-list.vue：role列表页面

role-add.vue：role新建页面

role-update.vue：role更新页面

index.less：role模块样式

components：role模块通用组件文件夹

employee：模块名

api目录：文件、变量命名要与后端保持一致，按照后端一个controller一个api.js文件，api中的方法名字要与后端api url尽量保持语义高度一致性，每个api方法要添加注释，与后端文档保持一致

assets目录：静态资源命名使用kebab-case

components目录：命名使用kebab-case

router与store目录：将业务进行拆分，不能放到一个js文件里，router尽量按照views中的结构保持一致，store按照业务进行拆分不同的js文件

components目录：命名要与后端、router、api保持一致

注释：

公共组件使用说明

api目录的接口js

store中的state、mutation、action等

vue文件中的template，若文件较大添加start end注释

每个methods

data中的非常见单词

其他
避免直接操作DOM

使用了git/svn的话删除console、弃用代码等无用代码