整理下最近做的产品里 比较典型的代码规范问题
前言
最近负责了一个产品的前端代码Code Review的工作，90%代码是从之前做过的一个项目merge过来的，由于当时开发周期紧张，没有做好足够的Code Review流程，导致代码质量很差，而产品的代码质量要求就很高。
前端开发30个左右，技术经验高的10年左右，低的2-3年，经过几轮的code review，整理几个比较常见，比较典型的例子，简单的总结下。
ESLint
首先，可以引入 ESLint 静态代码检测工具，它可以保证高质量的代码，尽量减少和提早发现一些错误。同时也支持IDE自动检查提示。
具体可以参考之前的文章：
ESLint配合VSCode 统一团队前端代码规范
IDE Format
当然也离不开Code Format格式化，需要配置一套固定的Format格式，保证团队内所有代码格式化统一。
我不太喜欢 Prettier 的换行机制，弄得大片大片的换行，可读性也差。团队大多用的VSCode，所以就用VSCode内置的Format功能，再加下可配置项，这样只要用VSCode开发，就会默认使用统一的代码格式化。
具体可以参考之前的文章：只用VSCode自带的Format功能，满足可配置的代码格式化需求
代码规范及习惯
下面介绍一些团队内经常遇到的代码规范、质量问题，还有一些很不好的开发习惯。
大小写
- 常量名：都大写或首字母大写；
- 变量：首字母小写，驼峰；
- dom id：全小写
- class name：全小写
- React router path：全小写，路由跳转的url一样。
- React 组件名（类\函数）：大写开头，驼峰，尽量与文件名一致（除了index.jsx）
catch
这里一般是指请求后台api的catch，而且common已经封装好了fetch方法，并处理了公共异常，比如根据status提示不一样的提示语弹框：
- 由于common有封装，大多情况下不需要业务加catch处理；
- 如果有catch，必须要求throw，原因：
- throw会让程序中断，就是说不会再继续执行后续代码；
- F12 console里会打浏览器默认的error log，非常必要。
- 如果加了catch或finally，一定要测下程序走到这里的case，并想想是否有必要加。
减少非必要的可选链操作符 (?.)
产品里经常用到的操作符，用的很无脑，经常遇到这种代码：
// 1
const a = obj?.a?.b?.c?.d;
// 2
<div>{this.state?.name}</div>
// 3
const arr = list.filter(item=> ...);
if (arr?.length) { ... }
// 4
if(item.a) { ... }
fn(item?.b);
// 5
if (item) {
fn(item?.b);
}
- 如果变量或属性不能是空，不要加问号；
- 假如一个后台返回的值，不能是空，空就是bug了，这个时候前台加了问号，如果真有bug，就不容易发现了（反之会直接console抛错，很容易发现）
- 理解其原理用法，想想如果真是空，对后续是否有影响？这个值是否可能是空？
- 不要盲目加，有个点儿就加问号。
- 另一个目的：增加代码可读性，维护性。
common 控件属性
在使用common或第三方控件时：
- 一定要理解每个属性的作用，以及默认值；
- 不必须要设置的属性，不要设置；
- 如果属性有默认值，而且你用到的也是默认值，有些情况是不要设置的；
- 目的：方便维护，增加可读性。
sessionStorage 和 localStorage
思考两个问题：
- 是否真的了解两者的区别以及作用？
- 你是否真的需要它们？
async await
这里对于新手，会有很多不正确的用法，但代码运行没问题，只是用法不规范：
- 使用之前，一定要弄懂
async await是做啥用的，不要滥用、乱用。 - 很多地方是不需要用的。
- 下面举例几个错误用法：
fn = async () => {
// 整个方法内部都没有用到await
}
fn = async () => {
return await request(); // 不需要加async await
}
fn = async () => {
const result = await request();
return Promise.resolve(result); // 可以直接return
}
深拷贝
- 例如：
JSON.parse(JSON.stringify(obj\array)) - 有些开发会用的很频繁，很无脑，有很多情况下，浅拷贝就可以满足、或者根本不需要拷贝的情况下就使用了，造成了很多额外开销。
- 需要理解 引用类型、浅拷贝、深拷贝 三个概念。
React Hooks
这里指React官方提供的Hooks，比如 useEffect useCallback useMemo memo 这几个“常用”的。
发现业务中使用的很频繁，这里简单说下我的理解：
useEffect：注意第二个参数deps，有些情况下，不是所有用到的参数都加到deps里，会导致bug。useCallback、memo：大多数地方都是不需要的使用的（90%以上）。useMemo：复杂逻辑可以用，其它情况不需要。- 以上，如果用的不对，反而会导致 业务bug，负优化，甚至 反向优化
- 这里说的比较浅，总结一个大致结论，详细说明网上很多。
如果提升代码经验和意识
简单总结几点:
- 写代码时要多问、多想、多调，不要功能好事了就完事了。
- 多看别人写的代码，比如团队内级别高的开发、网上大佬写的、第三方源码。
- 多review自己写过的代码，并优化。
总结
本文写的比较杂、也都比较浅，因为涉及到的知识点、经验太多了，不是三言两语就能说明白，详细的重要的点，也会在后续文章中详细讲解。
来源：juejin.cn/post/7235109911780311101
