[发明专利]前端代码可视化方法、装置、设备及存储介质

说明书

本发明涉及性能测试技术，揭露了一种前端代码可视化方法，包括：获取前端项目的待检测代码；根据待检测代码中的代码类别标签，将所述待检测代码切分成多个代码块；对每个所述代码块进行代码质量检测，得到代码质量检测结果；利用预构建的代码规则检测规范，对每个所述代码块进行代码规则检测，得到代码规则检测结果；利用预构建的可视化工具将所述代码质量检测结果和所述代码规则检测结果进行可视化。本发明还提出一种前端代码可视化装置、设备以及存储介质。本发明可以解决前端代码质量检测结果可视化的问题。

技术领域

本发明涉及性能测试技术领域，尤其涉及一种前端代码可视化方法、装置、电子设备及计算机可读存储介质。

背景技术

在互联网发展的大背景下，随着前端项目复杂度的增加，项目中的代码量呈现出线性增加的趋势，项目中代码量增加会产生项目进程缓慢、代码维护成本增多以及代码质量的把控上较为艰难的问题，并且大多数的前端代码开发只关注项目需求的完成度，没有关注开发出的前端代码的整体性能问题，前端项目代码的质量检测是对代码编写的质量和性能执行规范化检测过程。

目前，前端项目的代码质量通常是利用预定义的代码规范来框定代码质量，但使用此种方法只需要代码开发的格式满足规范要求，即可通过代码规范，并不能保证开发的代码的整体质量，当前，代码的质量检测，通常是通过检测人员根据代码的运行结果，对代码质量问题进行排除，而且，代码质量检测的检测结果，并不能够简洁地呈现给检测人员，因此，亟需一种可以实现前端项目代码的质量检测结果可视化的方法。

发明内容

本发明提供一种前端代码可视化方法、装置、设备及存储介质，其主要目的在于解决前端代码质量检测结果可视化的问题。

为实现上述目的，本发明提供的一种前端代码可视化方法，包括：

获取前端项目的待检测代码；

根据待检测代码中的代码类别标签，将所述待检测代码切分成多个代码块；

对每个所述代码块进行代码质量检测，得到代码质量检测结果；

利用预构建的代码规则检测规范，对每个所述代码块进行代码规则检测，得到代码规则检测结果；

利用预构建的可视化工具将所述代码质量检测结果和所述代码规则检测结果进行可视化。

可选地，所述对每个所述代码块进行代码质量检测，得到代码质量检测结果，包括：

利用预构建的样式检测工具，对每个所述代码块包括的样式内容执行样式检测，得到样式检测结果；

利用每个所述代码块构建语法解析树，并计算所述语法解析树中代码语句的代码重复率以及代码依赖率；

根据预设的代码重复率评分查询表，查询每个所述代码块的代码重复率评分，及根据预设的代码依赖率评分查询表，查询每个所述代码块的代码依赖率评分；

汇总所述代码重复率评分和所述代码依赖率评分，得到代码语句评分结果；

汇总所述样式检测结果和所述代码语句评分结果，得到代码质量检测结果。

可选地，所述利用每个所述代码块构建语法解析树，包括：

去除每个所述代码语句中的空白符和注释语句，得到多个标准代码语句；识别每个所述标准代码语句的代码标识；

利用代码语句之间的嵌套关系及所述代码标识，构建所述多个标准代码语句的语法解析树。

可选地，所述利用预构建的可视化工具将所述代码质量检测结果和所述代码规则检测结果进行可视化，包括：

获取所述前端项目中代码的文件格式和所述文件格式对应的文件数量；

查询所述前端项目中的重复文件数量；