07-10 36252人
是什么?为什么?
前端代码审查清单是一个保证前端代码质量的审查清单。当我们在开发写代码的时候,总会各种各样的问题,自测的时候由于太熟悉自己的代码逻辑往往测试不够充分,无法发现问题。
前端代码审查清单就是为了解决这个问题!清单存放了一些常见的问题,当我们开发完成之后,对照清单思考一下这些问题在代码中是否遇到或者妥善处理,从而提高代码质量。
前端
前端安全
- 所有的用户可以在页面中输入信息的地方,是否做了防 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 ?是否可以删掉或者完善功能?
- 可能产生意外情况的地方是否留下说明?
测试
- 代码逻辑是否正确、可用、符合需求?
- 在进行各种操作的时候,是否有报错出现?
- 是否有资源加载出错或者失败?
- 是否按照项目要求,使用相关设备以及浏览器进行测试和体验?
- 是否对边界条件以及看起来比较极端的情况做过测试?
故障处理
- 是否考虑过如果发生线上故障,如何做回滚处理?处理什么文件?
- 功能与功能之间是否足够独立?是否设置开关?当某个功能发生故障是否可以通过开关关掉?
贡献
由于本人才疏学浅,部分场景没有覆盖,欢迎大家补充更多审查点,提高前端代码质量!
谢谢分享,写的不错
Windows 10 x64 Firefox 79.0收藏了
GNU/Linux x64 Firefox 61.0文章写的不错,加油~
Windows 10 x64 Firefox 79.0学习了,文章不错,谢谢
Windows 10 x64 Google Chrome 78.0.3904.108Thanks for finally talking about
Mac OS X 10.13 WaterFox 56.0.4已阅,感谢站长分享!
Windows 7 x64 Sogou ExplorerI believe what you said made a great deal of sense.
Windows 7 x64 Internet Explorer 9.0But, consider this, suppose you added a little information?
I ain't suggesting your content isn't solid., however what if you added a post
title that makes people want more? I mean 前端代码审查清单 - 游魂博客-分享技术,资源共享 is kinda
vanilla. You ought to peek at Yahoo's home page and note how they create
article headlines to get viewers to open the links. You might add a related video or a related picture or two to get readers excited about everything've
written. In my opinion, it could make your posts a little livelier.
收藏了
Ubuntu x64 Chromium 65.0.3325.181Thanks for finally writing about >前端代码审查清单 - 游魂博客-分享技术,资源共享 <Loved it!
Mac OS X 10.11.6 Google Chrome 66.0.3359.66web page
Tһankѕ fοr finally writing аbout >前端代码审查清单 - 游魂博客-分享技术,资源共享 <Loved it!
GNU/Linux x64 Pale Moon 27.9.3