当前位置: 首页 > 专利查询>天津大学专利>正文

一种Web前端代码依赖关系可视化方法技术

技术编号:23557777 阅读:57 留言:0更新日期:2020-03-25 03:30
本发明专利技术公开了一种Web前端代码依赖关系可视化方法,该方法利用分析项目代码得到包含代码信息及引用关系的原始数据,对其增强得到强化数据,再将强化数据映射到可视化模型上,最后使用ECharts进行渲染得到代码依赖关系的可视化图形,可视化图形可支持人机交互,可通过筛选原始数据,重新得到新渲染的可视化图形。与现有技术相比,原本需要人工检查才能分析得到的依赖关系,本发明专利技术提出的一种Web前端代码依赖关系可视化方法可以自动化地分析并渲染成可视化的图形,有助于减少不必要的依赖,优化代码结构。

A visualization method of Web front-end code dependency

【技术实现步骤摘要】
一种Web前端代码依赖关系可视化方法
本专利技术涉及Web前端开发
,特别涉及代码依赖关系的分析方法。
技术介绍
在现代软件项目的开发中,无论使用过程式、函数式还是面向对象的软件组织方式,最终程序的执行必然包括对一系列方法的调用,这意味着代码之间的依赖关系广泛存在软件项目中,在面向对象的开发方式中,继承和方法调用是比较常见的对象之间产生依赖的原因,代码依赖不可避免,但在软件项目代码量越来越庞大的今天,代码间的依赖关系日趋复杂,冗余的和高度耦合的代码依赖会增加代码理解和维护的难度。传统的依靠开发人员经验进行代码依赖检查的方式效率较低,对于代码依赖的自动化检查已经成为大型软件项目研发的常见手段。软件开发过程传统上主要基于开发人员的经验进行。为了改进开发效率,需要引入数据驱动的方式,首要任务是充分利用开发过程中产生的各种数据,包括代码依赖数据,运用可视化分析的方法,结合人类视觉和计算机结构化信息处理的优势,使用人机交互的方式从数据中得出结论。现代软件项目代码量的膨胀使得代码间的依赖关系日趋复杂,传统的依靠开发人员经验进行代码依赖本文档来自技高网...

【技术保护点】
1.一种Web前端代码依赖关系可视化方法,其特征在于,该方法包括以下步骤:/n步骤1、基于ECMAScript6的模块化语法获取原始数据包括项目关联的所有代码文件以及相关信息、依赖关系的数据,即得到此文件的引用信息;/n步骤2、对原始数据进行增强,进而得到强化数据,即计算depth、deepen、depth_range、max_size、max_nums_as_source等信息从项目目录中筛选并且去除不相关文件的无效数据,depth表示文件的相对根目录的深度,由文件信息对象的id即文件的相对目录计算得到;deepen表示文件是否被同级的其他文件引用;depth_range表示每层目录中的文件...

【技术特征摘要】
1.一种Web前端代码依赖关系可视化方法,其特征在于,该方法包括以下步骤:
步骤1、基于ECMAScript6的模块化语法获取原始数据包括项目关联的所有代码文件以及相关信息、依赖关系的数据,即得到此文件的引用信息;
步骤2、对原始数据进行增强,进而得到强化数据,即计算depth、deepen、depth_range、max_size、max_nums_as_source等信息从项目目录中筛选并且去除不相关文件的无效数据,depth表示文件的相对根目录的深度,由文件信息对象的id即文件的相对目录计算得到;deepen表示文件是否被同级的其他文件引用;depth_range表示每层目录中的文件总数;max_size表示所有文件中的文件大小的最大值;max_nums_as_source表示所有文件中文件引用数量的最大值;
步骤3、由强化数据映射到可视化模型;每个文件表示按被引次数表示为不同灰度、不同大小的圆圈;可视化模型显示为同心圆结构,同一级目录下的文件根据id按字典序均匀分布在同一个圆上,第一级目录为半径最小的圆,随半径增大依次为第二级、第三级等目录;在同一级目录中,如果某文件是被同级的其他文件引用,它将被向外移动到本目...

【专利技术属性】
技术研发人员:周圆张岳金明磊赵恩伟邓守峰
申请(专利权)人:天津大学
类型:发明
国别省市:天津;12

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1