前端日常规范

To Be A Better Coder

无规矩不成方圆，一套规范良好的代码，起码可以有两方面的好处：
（1）.提高团队开发效率。
（2）.有利于项目的后期维护。

一、规范

1、代码注释

注释！注释！注释！想想自己接手一个没有注释的项目去维护的情景就能理解了。

2、代码格式化

代码提交前都应该执行格式化，并且统一格式化插件，如统一使用prettier/Eslint/Tslint等；

3、命名

如文件夹/文件命名、组件命名、函数命名等，都应该尽量执行对应的如大小驼峰命名、常量全大写等命名规则；

4、代码引入顺序

划分类库、component、本地 utils、本文件 const 声明/处理等，规则尽可能统一；

5、页面 export

应该通过当前目录 index.js 适当组织代码，统一 export，减少 import 次数；

6、路由表模块化

路由表应该按需分成模块拆分引入，而不应该统一写在一个文件内

7、组件封装强内聚

组件内部应尽可能的不含有业务逻辑，除非是多用性的业务类组件；

8、git 分支提交代码规范

比如·Fixd：修复 xxxxbug--41234·，测试提交对应的 bug，后面是 bug 对应的 id；

9、产品/后端接口不规范

前端应该主动推动，如产品需求文档不明确、后端接口字段语义不明/多个关联的接口同个类目返回的字段数目已经名称不一/表单使用 get 请求等，前端 er 们应该主动提出建议，并让对应负责人沟通，统一规范；

二、代码

很多小问题尽管产品不要求，前端也应该自主的实现。

1、日期/时间

日期/时间选择应该禁用小于当前的日期/时间；

2、防抖 debounce

如搜索/提交等按钮事件，输入框 onchange 等，都应该要做防抖 debounce 处理；

3、页面/组件

不管是自用还是公用，都尽可能添加注释，且逻辑函数体内应该简洁高效；

4、数据处理

数据请求回来，都应该自己先截流一层，最后才返回自己想要的数据去触发渲染，这样可以避免两个问题：

• 避免后端接口少字段或者改字段名称引起的错误，前端在拦截的时候要兼容对应错误；
• 数据返回量可能会极大，拦截一层可以避免引起不必要的计算，提高性能；

5、多个异步事件

应该确保执行的顺序问题，如页面初始化需要同时进行两个请求，如有关联，应使用 promise 等方法同步处理；

6、接口请求

成功提示可以按需反馈，但失败提示不应该遗漏，可以通过如 axios 拦截器或者请求做catch 处理；

7、对象/数组

对如对象字段引用、数组遍历等，使用前必须先判断值是否存在，如obj && obj.name && ... 和 arr && arr.length >0 && arr.map(...)；如果不做对应处理尤其后端接口返回值为 null 的时候很容易引起 js 报错；

8、默认展示/默认处理

如错误提示、错误图片应该加载的默认图等；