前端通用代码规范
前言
代码规范化可以提高编码工作效率，使代码保持统一的风格，以便于代码整合和后期维护。
1. 命名规范
1.1. 驼峰式命名法****
统一使用驼峰式命名法
大驼峰命名法：PersonInfo
小驼峰命名法：personInfo
1.2. 文件命名
统一使用小写，包含多个单词时，单词之间建议使用半角连词线（-）分割
例如index.vue、error-page
1.3. 变量命名
使用小驼峰式命名法
例如 const tableData = []
1.4. 函数命名
使用小驼峰式命名法，构造函数使用大驼峰命名法
命名规则：前缀为动词
例如 function getData() {}
1.5. 常量命名
全部大写：使用大写字母和下划线组合姓名
例如 HOME_URL
1.6. 注释规范
l 单行注释：单独一行，放在需要注释的代码上方，//（双斜线）与注释文字之间保留一个空格
l 多行注释：/开始和结束/，注释文字与*保留一个空格
l 函数注释：/开始和结束/，注释文字与保留一个空格，注释内容包含函数说明和@关键字
2. 文件目录结构
文件夹名称全部采用小写和半角连词符（-）来命名
避免多层嵌套，单个项目中的目录嵌套控制在最多三到四个层级内
3. JS代码规范
3.1. 命名规范
l 普通命名采用小驼峰式命名
l 命名是复数的时候需要加s
l 命名需要符合语义化
3.2. 变量规范
变量定义尽量使用es6的const、let
3.3. 字符串
l 字符串统一使用单引号而不是双引号
l 用es6的字符串模板（${}）而不是'+'来拼接字符串
l 不要使用不必要的转义字符
l 不要在字符串中用eval()
3.4. 数组
l 用扩展运算符（...）做数组浅拷贝
l 使用数组解构，const [user01, user02, user03] = arr
3.5. 对象
l 用属性值缩写。并且将所有缩写放在对象声明的前面
const url = ‘/’;
const obj = {
url,
age: 1
}
l 对象浅拷贝时，推荐使用扩展运算符（...）
l 使用对象解构，const { userName } = user
3.6. 函数
l 函数参数使用默认值替代使用条件语句进行赋值
l 函数参数越少越好，如果参数超过两个，要使用 ES6 的解构语法，不用考虑参数的顺序。把默认参数赋值放在最后
l 尽量使用箭头函数
l 用命名函数表达式而不是函数声明，函数声明作用域会提升，降低了代码可读性和可维护性 不要改参数，不要对参数重新赋值
l 功能函数使用纯函数，输入一致，输出结果永远唯一
l 优先使用函数式编程
3.7. 遍历for循环
l 数组的长度，使用一个变量来接收，有利于代码执行效率得到提高，而不是每走一次循环，都得重新计算数组长度
l 使用let声明循环序列号i
4. Vue编码规范
4.1. 组件命名
组件名命名符合语义化，组件名统一使用大驼峰式命名法，例如CommonDialog
4.2. 组件数据
除根组件之外，组件的data必须是一个函数
4.3. 组件传参props定义
props命名统一使用小驼峰式命名法，例如globalData
4.4. 循环v-for使用
l 为v-for设置key，并且尽量避免使用index作为key值
l 避免v-if和v-for一起使用
4.5. 样式
为组件样式设置作用域，使用scoped属性
4.6. 私有property命名
推荐使用$前缀，作为一个用户定义的私有property的约定，以确保不会和Vue自身相冲突
4.7. 模板中的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法
4.8. 计算属性
应该把复杂计算属性分割为尽可能多的更简单的property，计算属性不能产生副作用
4.9. 指令
指令缩写 (用:表示 v-bind:、用@表示 v-on: 、用#表示 v-slot:)
4.10. 组件通信
应该优先通过props和事件parent或变更props
4.11. 事件和定时器
定义的定时器或者事件监听必须清除
4.12. 代码文件
单个文件不允许超过600行，特别复杂的功能，文件不允许超过1000行
5. CSS代码规范
5.1. BEM命名原则
l block：模块，名字单词间用-连接
l element：元素，模块的子元素，以__与block连接
l modifier：修饰，模块的变体，定义特殊模块，以--与block连接
5.2. CSS选择器
l 保持简单，不要使用嵌套过多过于复杂的选择器，选择器嵌套应少于3级
l 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用
l 避免使用CSS表达式
l 慎重选择高消耗的样式（高消耗属性在绘制前需要浏览器进行大量计算），避免重绘重排
l css选择器中避免使用标签名
l 尽量使用缩写属性
l 使用子选择器
l 0后面不带单位
l id和class命名名称语义化，不要过于简单，防止模块之间样式互相影响
l 合理的使用id，一般情况下id不应该被用于样式，并且id的权重很高，所以不使用id解决样式的问题，而是使用class
