一、命名规范
文件命名：
- 所有文件名统一使用小写，首页命名为index.xxx，文件名禁止特殊字符比如空格、$等。统一使用英文单词或拼音缩写，必须小写。
- 文件名包含多个单词时，单词之间建议使用半角的连词线 ( - ) 分隔。
- 文件目录结构嵌套层级不要过深
变量命名：
采用小驼峰式命名规范，类型+对象描述的方式，如果没有明确的类型，就可以使前缀为名词。
| array | a |
| boolean | b |
| function | fn |
| int | i |
| object | o |
| regular | r |
| string | s |
函数命名：
采用小驼峰式命名（构造函数大驼峰式），前缀为动词
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 ( 权限 ) |
| has | 判断是否含有某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
常量命名：
全部大写命名规范，使用大写字母和下划线来组合命名，下划线用以分割单词
类命名：
- 公共属性和方法 : 同变量命名方式
- 私有属性和方法 : 前缀为下划线(_或#)后面跟公共属性和方法一样的命名方式
文件目录结构：
同功能放在同一个文件目录下，目录结构不要嵌套过深，文件名语义化一些，方便后续维护
- 文件夹名称全部采用小写+”-“ 来隔开；
- 避免多层嵌套，单个项目中的目录嵌套控制在最多三到四个层级内；
二、代码规范
JS：
JS/TS主流的大致有这几种
| 名称 | 说明 |
|---|---|
| 命名规范 | 1. 普通命名采用小驼峰式命名 2. 命名是复数的时候需要加s 3. 命名需要符合语义化，尽量减少缩写的情况发生，做到见名知意，如果函数命名，可以采用加上动词前缀 |
| 变量规范 | 1. 变量定义尽量使用const、let 2. 变量兜底 |
| 字符串 | 1. 统一使用单引号而不是双引号，配置安装eslint后，保存会自动格式化处理 2. 用字符串模板而不是’+’来拼接字符串 3. 不要使用不必要的转义字符 4. 不要在字符串中用eval()，漏洞太多 |
| 数组 | 1.用扩展运算符（…）做数组浅拷贝2.使用数组解构 |
| 对象 | 1. ES6 使用属性值缩写，将属性的缩写放在对象声明的开头 2. 对象浅拷贝时，更推荐使用扩展运算符 …使用对象解构 |
| 函数 | 1. 函数参数使用默认值替代使用条件语句进行赋值 2. 函数参数越少越好，如果参数超过两个，要使用 ES6 的解构语法，不用考虑参数的顺序。把默认参数赋值放在最后 3. 尽量使用箭头函数 4. 用命名函数表达式而不是函数声明,函数声明作用域会提升，降低了代码可读性和可维护性 5. 不要改参数，不要对参数重新赋值 6. 功能函数使用纯函数，输入一致，输出结果永远唯一 7. 优先使用函数式编程 |
| for循环 | 使用for循环过程中，数组的长度，使用一个变量来接收, 有利于代码执行效率得到提高，而不是每走一次循环，都得重新计算数组长度 |
VUE：
遵循vue.js官方风格指南：https://vuejs.bootcss.com/style-guide/
组件：
| 名称 | 说明 |
|---|---|
| 组件命名 | 1. 组件名为多个单词，命名为组件用途，完整单词的组件名（倾向于完整单词而不是缩写） 2. 文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)，例如：todo-item或TodoItem 3. 基础组件名, 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如Base、App或V 4. 单例组件名，只应该拥有单个活跃实例的组件应该以The前缀命名，以示其唯一性 5. 紧密耦合的组件名, 和父组件紧密耦合的子组件应该以父组件名作为前缀命名 6. 组件名中的单词顺序, 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾 7.模板中的组件名大小写，对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是PascalCase的——但是在DOM模板中总是kebab-case的 8. JS/JSX中的组件名大小写,JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用Vue.component进行全局组件注册时，可以使用kebab-case字符串 |
| 组件数据 | 组件的data必须是一个函数 |
| props定义 | 1. prop定义应该尽量详细 2. prop名大小写,在声明prop的时候，其命名应该始终使用camelCase，而在模板和JSX中应该始终使用kebab-case |
| v-for使用 | 1. 为v-for设置键值，尽量避免使用index作为key 2. 避免v-if和v-for用在一起 |
| 样式 | 为组件样式设置作用域，使用scoped属性，使用BEM约定 |
| 私有property名 | 1. Vue使用前缀来定义其自身的私有 property 2. 推荐使用$ ，作为一个用户定义的私有property的约定，以确保不会和Vue自身相冲突 |
| 自闭合组件 | 在单文件组件、字符串模板和JSX中没有内容的组件应该是自闭合的——但在DOM模板里永远不要这样做 |
| attribute | 1. 多个attribute的元素应该分多行撰写，每个attribute一行 2. 带引号的attribute值 |
| 模板中简单的表达式 | 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法 |
| 简单的计算属性 | 应该把复杂计算属性分割为尽可能多的更简单的property，计算属性不能产生副作用 |
| 指令 | 指令缩写 (用:表示 v-bind:、用@表示 v-on: 和用#表示 v-slot:) |
| 组件通信 | 应该优先通过prop和事件进行父子组件之间的通信，而不是this.$parent或变更prop |
| 事件、定时器 | 清除定时器或者事件监听 |
| 代码文件 | 开发过程中单个文件不允许超过600行，特别复杂的功能，文件不允许超过1000行 |
CSS
stylelint插件，规范则推荐使用stylelint-config-standard
BEM命名规则
- block：模块，名字单词间用-连接
- element：元素，模块的子元素，以__与block连接
- modifier：修饰，模块的变体，定义特殊模块，以–与block连接
有效使用css选择器，需遵循以下原则：
- 保持简单，不要使用嵌套过多过于复杂的选择器，选择器嵌套应少于3级；
- 通配符和属性选择器效率最低，需要匹配的元素最多，尽量避免使用；
- 避免使用CSS表达式；
- 慎重选择高消耗的样式（高消耗属性在绘制前需要浏览器进行大量计算），避免重绘重排；
- css选择器中避免使用标签名；
- 尽量使用缩写属性；
- 使用子选择器；
- 0后面不带单位；
- id和class，命名名称语义化，不要过于简单，防止模块之间样式互相影响；合理的使用id，一般情况下id不应该被用于样式，并且id的权重很高，所以不使用id解决样式的问题，而是使用class；
