前端代码review检查清单

前端小刘仔
1,878 阅读5分钟

1. 代码规范

  1. 使用 eslint 工具对 JS代码进行检查
  2. 无任何lint警告和错误。
  3. 无 console.log()

2. 常规检查

2.1. 代码风格

  1. 无写死数据(hardcoded)，使用常量(const)。
❎ if(code === 10){} 
✅ const status = 10; if(code === status){}。
  1.  避免过多if else，尝试使用map映射或者三元表达式
// 示例1
❎ if (brand === 'oppo') {
  
boss = 'Tony'
  
} else if (brand === 'vivo') {
boss = 'Leo'
  
}
✅ let map = {
  
oppo: 'Tony',
vivo: 'Leo'
}
boss = map['oppo']


// 示例2
❎ if (status) {
  
a = 1
} else {
  
a = 2
}
✅ a = status ? 1 : 2
  1. 删除无用注释代码。
  2. 删除不必要的注释。
  3. 添加必要注释。必要注释说明代码功能和原因。
  4. 代码是否符合编程规范？（大括号的位置，变量名和函数名，行的长度，缩进，格式和注释）
  5. 循环是否设置了长度和正确的终止条件？
  6. 数组索引是否在允许范围内？
  7. HTML 标签是否书写正确，是否嵌套正确，闭合是否正确？
  8. 变量是否设置初始值
  9. 尽量少使用watch和this.$forceUpdate()
  10. 项目目录/api接口/路由尽量模块化且命名语义化

2.2. ES6|7 ...

  1. 使用ES6+。
  2. 使用箭头函数。避免let that|self = this。
  3. 使用函数参数默认值。
  4. 使用...
  5. 使用 const let。
  6. 使用import export。
  7. 使用``字符串模板。
  8. 使用arrays | objects 解构赋值。
  9. 使用Promise | Async/Await。
  10. 使用optional chaining 作为判断条件
// 常规写法
user.a && user.a.b
// 推荐ES写法
user.a?.b

2.3. 第三方库

  1. 使用lodash等functions(按需引入)，而不是自我实现。
  2. 尽量使用项目已引用UI库，而不是重新写组件。
  3. 是否引入CookUI，去除ElementUI
  4. 是否使用安全前端脚手架、组件库、公共包

2.4. CSS

  1. 命名规范。符合团队命名规则。
  2. 使用SCSS
  3. 使用flexbox。
  4. 避免使用!important
  5. 避免使用内联样式。将内容与设计分开，维护更加简单。
  6. 定义一些全局样式方便使用

2.5. 注释

  1. 是否在重要功能附近添加合适的注释？
  2. 重要函数注释是否包含了相关功能说明？（入参、出参、功能等）
  3. 能否根据注释推断出下面代码的功能？
  4. 代码里是否还存在 TODO ？是否可以删掉或者完善功能？
  5. 可能产生意外情况的地方是否留下说明

3. 代码质量

  1. 代码是否能正常运行？
  2. 是否有无用的调试代码？
  3. 控制台是否有明显的报错
  4. 代码是否简单易懂，逻辑清晰？是否冗余
  5. 代码是否尽可能的模块化了？
  6. 是否尽可能组件化了
  7. 定时器是否随生命周期消除
  8. 组件销毁是否删除了监听器
  9. 是否从npm删除未使用的安装包
  10. 接口请求必须使用async await
  11. 两个参数以上时，可转化为对象传参，否则一个方法的参数要加大代码的可维护性
  12. 有没有错误处理，如网络异常时发送请求数据
  13. 使用async/await异步请求时搭配try/catch同步使用
  14. JSON.parse()转换时搭配try/catch同步使用
  15. 多使用环境配置文件和全局常量
  16. 条件判断时使用隐式转换
  17. 获取数据后先处理完成再赋值
  18. 如果一个值不能为空，是否提前设置了默认值
data: {
  
name: '未登录'
}
person?.name && (name = person.name)

4. 安全检查

  1. 所有的用户可以在页面中输入信息的地方，是否做了防 XSS 以及特殊字符的过滤处理？（XSS攻击防范）
  2. 所有的数据输入是否都进行了检查（检测正确的类型，长度，格式和范围）并且进行了编码？（表单校验）
  3. 前端要判断接口是否返回合法、正确。
  4. 开发与 DOM 操作有关的代码时，是否对 DOM 不存在或者被人为修改的情况做处理？
  5. 获取数据和信息时，是否对类型做过处理和转换并设置为空时的默认值？
  6. 在所有会发生错误的地方，是否编写了错误处理逻辑？比如：阻止继续执行、显示错误信息、记录错误日志和信息等。
  7. 代码里获取 window.location 相关属性的地方，是否对里面的 XSS 字符做了过滤处理？
  8. 输出的值是否进行了检查并且编码？
  9. 无效的参数值是否能够处理？
  10. 无权限或访问错误是访问404？（后期统一404页面）

5. 性能检查

  1. localstorage的使用问题（待补充）
  2. 按钮有无节流或防抖
  3. JS 代码是否尽量放在底部？CSS 代码是否尽量放在了顶部？
  4. 是否部署 CDN 或者开启了缓存功能？
  5. 上线或者发布前，是否对静态资源进行打包、压缩处理？（webpack）
  6. 正确使用预加载、懒加载等技术手段提高性能。
  7. 是否对图片等资源进行压缩等处理？
  8. 循环长度提前缓存
const a = [1,2,3,4,5]
❎ for (let i = 0; i < a.length; i++) {}
  
✅ const len = a.length
for (let i = 0; i < len; i++) {}
  1. 循环尽可能提前结束
  2. 列表需要轮询时用setInterval搭配setTimeout一起使用
  3. 接口尽量都在created里面调用

PS：以上仅为个人总结，覆盖不全，欢迎各位大佬指正补充~~~~~~~~

avatar
文章
阅读
粉丝