Awesome

front-end-code-checklist

前端代码审查清单。

是什么？为什么？

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

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

前端

前端安全

• 所有的用户可以在页面中输入信息的地方，是否做了防 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 ？是否可以删掉或者完善功能？
• 可能产生意外情况的地方是否留下说明？

测试

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

故障处理

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

贡献

由于本人才疏学浅，部分场景没有覆盖，欢迎大家补充更多审查点，提高前端代码质量！