前言：本人工作中总结的常用代码规范，欢迎补充和指出问题，转载请注明出处
一.通用规范原则
1.js部分
1.1 命名规范
常量 使用大写字母命名
避免直接写魔法数字
vue data命名
vue method命名
vue 组件命名
1.2 代码注释
增加代码注释
标明特殊业务使用场景
1.3 减少内存使用
避免不必要的变量
vue非渲染数据不要放在data里面
vue离开页面清除定时器，监听事件
清除不必要的浏览器存储
1.4 减少http请求个数
* 接口设计
在考虑单一使用原则的情境下，接口设计尽可能考虑返回多有所需数据
* 数据分页拼接
合理设计存储对象，避免再次请求前一页所需的数据
* 防抖节流
进行input输入和其他监听页面事件，进行接口请求增加防抖动作
按钮点击请求未执行完毕，再次点击执行
* 同一动作多次请求
vue父子组件通讯，子组件区分绑定数据变化是自发还是父组件触发，如果是父组件触发，避免再次emit父组件请求接口
* 使用vuex存储接口数据
页面多处使用的全局统一变量，使用vuex统一管理，避免多个页面同时发送同一请求
1.5 减少重复代码
组件化
组建尽量脱离业务，根据props来传入数据，减少业务逻辑判断
多处使用的组建考虑抽离为全局组件
抽离公共函数
使用频率高的函数，可挂载在vue原型上，或者写在全局mixin
常用业务函数，如对数组，对象，字符串的处理函数，考虑抽离为公共函数
1.6 代码简洁
使用es6新语法减少代码量
避免多个if判断
使用switch
vue不同类型组件使用component的is
1.7 提高代码执行效率
将O(n^2)提高到将O(n)
多重判断执行顺序
将大概率判断放在前面，过滤掉大多数场景，跳出后面逻辑判断
先判断时间复杂度低的场景，如过滤对象，先判断基本类型的属性，再判断引用类型的属性
vue中减少dom操作
vue为数据驱动，将更新放在一个优化的任务队列
2.css部分
2.1 命名规范
命名直观
按照层级划分
嵌套层级
2.2 减少样式污染
vue使用scope
减少全局更改组件库样式
2.3 抽离公共样式
抽离常用样式，如点击效果、多行打点、
scss使用mixin，extend等
2.4 尽量统一网站风格
颜色统一
字体统一
按钮大小，状态展示
间隔
2.5 交互效果
可点击的链接，增加浮标悬浮效果
点击进行一步操作时，按钮增加禁用或者loading效果
3.其他
3.1 代码结构清晰
合理使用编辑器的插件
预先规划代码结构，划分组建，避免单个文件过大，代码可读性差
代码目录结构整洁
3.2 html标签使用原则
避免行内元素嵌入块级元素
避免使用td，tr
3.3 首屏渲染效果
数据请求中增加loading效果，避免白屏或数据加载中提示暂无数据
大量图片使用懒加载
3.4 前端增加数据校验
减少接口数据类型校验
减少xss攻击
3.5 数据集中管理
api集中管理
状态码集中管理
枚举列表集中管理
3.6 vue使用注意
使用v-if和v-show
避免同层同时使用v-if和v-for
computed和watch使用场景
keep-alive使用场景
