前端代码审查清单-阿里云开发者社区

开发者社区> 游魂Andy> 正文

前端代码审查清单

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

是什么?为什么?

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

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

前端

前端安全

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

测试

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

故障处理

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

贡献

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
​ P4到P9,那位在马云家写代码的前端 ​
在阿里这些年的成长经历做一个总结和分享,希望你能在他的故事中得到些许启发。
1182 0
什么是低代码?低代码能做什么?
低代码开发是为开发人员设计的一种开发工具和开发体系
2589 0
asp.net常用javascript封装代码
using System;using System.Text;using System.Data;using System.Configuration;using System.Web;using System.
815 0
【晒出你的第83行代码】社区用户@尼古拉斯雷的代码故事,和现在比起来以前的代码都是垃圾!
在五四青年节之际,社区发起了来晒晒属于你的“第83行”的活动,活动中邀请业界的大牛、大神们来晒代码或者Review代码!本轮我们晒晒社区用户@尼古拉斯雷的代码故事,和以前比起来现在的代码进步太多了。
1472 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7758 0
谈谈低代码在前后端开发的应用领域
从一个从事过前后端大数据AI开发的角度谈下低代码的应用
231 0
前端文本多行省略的完美解决方案
在前端中单行显示可以很简单的用css完成;但是在实际的开发中会存在很多的多行省略,在网上找了很多方式都不能很好的解决问题。主要的问题是:
1139 0
Web前端,让你代码整洁的原则
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒。同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗?我们一起来看一张图片:   上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢?一看就是糟糕的代码的代码,让人讨厌的代码。
883 0
插入FLASH的HTML代码
注:把红色部分改成Flash文件存放的地址即可。
521 0
+关注
游魂Andy
尚未佩剑,已是江湖
13
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载