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、默认展示/默认处理
如错误提示、错误图片应该加载的默认图等；
网友评论