前端代码审查清单

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

是什么?为什么?

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

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

前端

前端安全

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

测试

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

故障处理

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

贡献

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

目录
相关文章
|
前端开发 JavaScript 持续交付
前端代码审查规范
前端代码审查规范
411 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1792 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
1180 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
969 6
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
1555 1
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
1275 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
前端开发 JavaScript 数据库
如何实现前后端分离-----前端笔记
如何实现前后端分离-----前端笔记
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
685 2

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1460
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    726
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    592
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    598
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    679
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    862
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1716
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    410
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1418
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    720