前端代码检查

刺骨的言语ヽ痛彻心扉 2022-05-25 09:54 566阅读 0赞

# 前端代码检查 #

参考自：

*  [说一说前端代码检查][Link 1]
 *  [前端代码检查front-end-code-checklist][front-end-code-checklist]
 *  [程序员必备的代码审查（Code Review）清单][Code Review]

代码检查很重要，原因有三：

1.  **避免低级bug**：一些常见代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行时错误，影响开发效率和代码质量；
2.  **统一代码习惯**：每一个团队或个人都会有一些代码规范或者代码习惯，为了便于后期维护和阅读，我们编写的代码也需要符合一定的格式规范；
3.  **保证线上代码质量**：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终版本要求。

前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候，总会各种各样的问题，自测的时候由于太熟悉自己的代码逻辑往往测试不够充分，无法发现问题。

前端代码审查清单就是为了解决这个问题！清单存放了一些常见的问题，当我们开发完成之后，对照清单思考一下这些问题在代码中是否遇到或者妥善处理，从而提高代码质量。

## 前端 ##

### 前端安全 ###

*  所有的用户可以在页面中输入信息的地方，是否做了防 XSS 以及特殊字符的过滤处理（检测正确的类型，长度，格式和范围）？
 *  与后端接口交互，获取信息使用 GET 方式，传送信息使用 POST 方式。后端接口应对各项参数做校验。前端也要判断接口是否返回合法、正确。
 *  开发与 DOM 操作有关的代码时，是否对 DOM 不存在或者被人为修改的情况做处理？
 *  获取数据和信息时，是否对类型做过处理和转换并设置为空时的默认值？比如：var num = parseInt(Str);
 *  在所有会发生错误的地方，是否编写了错误处理逻辑？比如：阻止继续执行、显示错误信息、记录错误日志和信息等。
 *  代码里获取 window.location 相关属性的地方，是否对里面的 XSS 字符做了过滤处理？

### 前端性能 ###

*  JS 代码是否尽量放在底部？CSS 代码是否尽量放在了顶部？
 *  是否部署 CDN 或者开启了缓存功能？
 *  上线或者发布前，是否对静态资源进行打包、压缩处理？
 *  正确使用预加载、懒加载等技术手段提高性能。
 *  是否对图片等资源进行压缩以及 CSS Sprite 处理？

## 代码质量 ##

*  你的代码是否遵循团队要求的代码规范(大括号的位置，变量名和函数名，行的长度，缩进，格式和注释)？
 *  是否有冗余代码没有注释掉或者删掉？例如：删除或者注释 console.log 避免低端 IE 报错等。
 *  关键功能是否还有优化的空间？
 *  代码是否简单易懂，逻辑清晰，模块化？
 *  变量名是否简单易懂？是否拼写正确？
 *  CSS 属性是否有拼写错误？
 *  HTML 标签是否书写正确，是否嵌套正确？
 *  JS 代码是否经过 JSLint 或者 ESLint 等工具校验？
 *  是否将核心功能尽可能独立，从而避免其他功能出现问题影响到核心功能？

## 注释 ##

*  是否在重要功能附近添加合适的注释？
 *  注释是否包含了开发人员信息、开发时间、开发者联系方式以及相关功能说明？
 *  换位思考，你能根据你的注释推断出下面代码的功能吗？
 *  代码里是否还存在 TODO ？是否可以删掉或者完善功能？
 *  可能产生意外情况的地方是否留下说明？

## 测试 ##

*  代码逻辑是否正确、可用、符合需求？
 *  在进行各种操作的时候，是否有报错出现？
 *  是否有资源加载出错或者失败？
 *  是否按照项目要求，使用相关设备以及浏览器进行测试和体验？
 *  是否对边界条件以及看起来比较极端的情况做过测试？

## 故障处理 ##

*  是否考虑过如果发生线上故障，如何做回滚处理？处理什么文件？
 *  功能与功能之间是否足够独立？是否设置开关？当某个功能发生故障是否可以通过开关关掉？

[Link 1]: http://www.imweb.io/topic/59a3fd4a79c5294e26eb6001
[front-end-code-checklist]: https://blog.csdn.net/xuefeiliuyuxiu/article/details/79088466
[Code Review]: http://blog.jobbole.com/83595/