CN110908710B - 一种Web前端代码依赖关系可视化方法 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及Web前端开发技术领域，特别涉及代码依赖关系的分析方法。

背景技术

在现代软件项目的开发中，无论使用过程式、函数式还是面向对象的软件组织方式，最终程序的执行必然包括对一系列方法的调用，这意味着代码之间的依赖关系广泛存在软件项目中，在面向对象的开发方式中，继承和方法调用是比较常见的对象之间产生依赖的原因，代码依赖不可避免，但在软件项目代码量越来越庞大的今天，代码间的依赖关系日趋复杂，冗余的和高度耦合的代码依赖会增加代码理解和维护的难度。传统的依靠开发人员经验进行代码依赖检查的方式效率较低，对于代码依赖的自动化检查已经成为大型软件项目研发的常见手段。

软件开发过程传统上主要基于开发人员的经验进行。为了改进开发效率，需要引入数据驱动的方式，首要任务是充分利用开发过程中产生的各种数据，包括代码依赖数据，运用可视化分析的方法，结合人类视觉和计算机结构化信息处理的优势，使用人机交互的方式从数据中得出结论。

现代软件项目代码量的膨胀使得代码间的依赖关系日趋复杂，传统的依靠开发人员经验进行代码依赖检查的方式效率不仅低，分析结果还有不一定准确。使用可视化的代码依赖分析方法充分利用软件项目开发过程中产生的代码依赖数据，自动化地分析数据，运用可视化分析的方法，展示可视化的图形。对代码依赖分析有助于降低不必要和不合理的依赖，加以适时的重构，可以维护软件架构的稳定性，减少程序错误，提高开发效率和降低维护成本。

发明内容

本发明旨在提出一种Web前端代码依赖关系可视化方法，该方法利用分析项目代码得到包含代码信息及引用关系的原始数据，对其增强得到强化数据，再将强化数据映射到可视化模型上，最后使用ECharts进行渲染得到代码依赖关系的可视化图形，可视化图形可支持人机交互，可通过筛选原始数据，重新得到新渲染的可视化图形。

本发明的一种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按字典序均匀分布在同一个圆上，第一级目录为半径最小的圆，随半径增大依次为第二级、第三级等目录；在同一级目录中，如果某文件是被同级的其他文件引用，它将被向外移动到本目录和下一级目录之间的位置；模型建立过程如下：

(1)对大小规模不一的文件进行归一化处理，建立文件的半径模型，公式如下：

其中，r表示归一化的半径，file_size表示文件的大小，max_size表示最大的文件的大小。半径与文件的大小成正比关系；

(2)对文件引用数量进行归一化处理，建立文件的颜色模型，表达式如下：

其中，c表示归一化的引用数量，file_nums_as_source表示文件的引用数量，max_nums_as_source表示所有文件中引用数量的最大值；

(3)计算文件所在坐标：首先计算文件在极坐标系中的位置(ρ,θ)，公式如下：

其中，m，t，w，b为用于调试显示效果的超参数；n表示代码文件在其所在层级目录中的顺序号；

获得极坐标(ρ,θ)后，再将极坐标转换成直角坐标(x,y)，转换公式如下：

步骤4、借助ECharts工具渲染依赖关系的可视化图形；

步骤5、通过正则表达式参与对原始数据的筛选，渲染出一幅新的仅针对特定的文件的依赖关系的可视化图形。

与现有技术相比，原本需要人工检查才能分析得到的依赖关系，本发明提出的一种Web前端代码依赖关系可视化方法可以自动化地分析并渲染成可视化的图形，有助于减少不必要的依赖，优化代码结构。

附图说明

图1为本发明的一种Web前端代码依赖关系可视化方法流程图；

图2为本发明的实例示意图；

图3为实例的整体依赖关系可视化结果示意图；

图4为实例的引用数量最多的代码文件可视化结果示意图；

图5为实例的某类代码文档引用情况可视化结果示意图；

图6为实例的某类代码文档被引用情况可视化结果示意图。

具体实施方式

下面结合附图和实施例对本发明技术方案进行详细描述。

如图1所示，为本发明的一种Web前端代码依赖关系可视化方法流程图。该流程具体包括以下步骤

步骤1、获取原始数据：基于ECMAScript6的模块化语法得到项目关联的所有代码文件以及相关信息，依赖关系的数据也源于项目代码文件，具体地，首先读取相应JavaScript文件，去除代码中的注释，然后使用正则表达式匹配，提取出导入语句的部分，即可得到此文件的引用信息，以及文件的名称、大小、位置等信息；

步骤2、对原始数据进行增强，进而得到强化数据：根据需要计算depth、deepen、depth_range、max_size、max_nums_as_source等信息从项目目录中筛选并且去除不相关文件的无效数据，depth表示文件的相对根目录的深度，由文件信息对象的id即文件的相对目录计算得到；deepen表示文件是否被同级的其他文件引用；depth_range表示每层目录中的文件总数；max_size表示所有文件中的文件大小的最大值；max_nums_as_source表示所有文件中文件引用数量的最大值；

步骤3、由强化数据映射到可视化模型。如图2所示，为可视化实例示意图。图中，每个文件表示按被引次数表示为不同灰度、不同大小的圆圈。可视化模型显示为同心圆结构，同一级目录下的文件根据id按字典序均匀分布在同一个圆上，第一级目录为半径最小的圆，随半径增大依次为第二级、第三级等目录。在同一级目录中，如果某文件是被同级的其他文件引用，它将被向外移动到本目录和下一级目录之间的位置。模型建立过程如下：

(1)对大小规模不一的文件进行归一化处理，建立文件的半径模型，公式如下：

其中，r表示归一化的半径，file_size表示文件的大小，max_size表示最大的文件的大小。半径与文件的大小成正比关系。计算半径是归一化的半径，其值范围在0到1之间，为防止某些小文件的半径过小，无法分辨，实验中统一将小于0.1的值设置为0.1，归一化的半径需要放大合适的倍数才可正常显示，实验中放大的倍数为55。

(2)对文件引用数量进行归一化处理，建立文件的颜色模型，表达式如下：

其中，c表示归一化的引用数量，file_nums_as_source表示文件的引用数量，max_nums_as_source表示所有文件中引用数量的最大值。颜色与文件引用数量成正比，设计引用数量多的用深色(红色)表示，引用数量少的用浅色(绿色)表示。

上述的颜色表示利用HSL色彩模式自动实现。HSL色彩模式是一种常见的颜色标准，是通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。色相H从0到120表示了从红到绿的颜色变化，饱和度S取100％表示纯色，亮度L取50％表示亮度适中，所以使用HSL色彩模式表示颜色的公式为

H＝120*(1-c)

S＝100％

L＝50％

(3)计算文件所在坐标。同心圆模型非常适合使用极坐标系，但实际渲染需要直角坐标，所以首先计算文件在极坐标系中的位置(ρ,θ)，再将极坐标转换成直角坐标。ρ随着目录深度的增加而增大，同时deepen为1的值要比deepen为0的大，具体值由下述公式确定：

其中，m，t，w，b为用于调试显示效果的超参数，n表示代码文件在其所在层级目录中的顺序号。根据实验中调试取得最优值。经反复调试，实验最终采取的参数为：m＝1.5,t＝0.3,w＝100,b＝40，此时可以达到最佳的显示效果。

同一级目录下的文件从0°到360°平均分布，由depth_range计算每层中每个文件可占的角度θ大小。

获得极坐标(ρ,θ)后，使用以下公式转换成直角坐标(x,y)：

步骤4、借助ECharts工具渲染图表；

步骤5、人机交互。在可视化图形渲染完成之后，还需要实现交互性功能以便于可视分析。由于在实际依赖代码可视化分析的时候节点往往非常密集，高亮鼠标覆盖的节点是交互性的基本要求，此外还需要实现仅对特定的文件进行依赖关系分析，通过正则表达式参与对原始数据的筛选，即可渲染出一幅新的仅针对特定的文件的依赖关系可视化图形。

上述流程中，原始数据即步骤1中的原始数据。步骤1到步骤4所用的原始数据包含所有代码文件，其中文件的唯一标识(即id)由文件路径与文件名表示(其数据类型为字符串)。正则表达式是一种描述字符串匹配模式的表达式，可以用来检查一个字符串是否匹配给定的表达式(在一些流行的编程语言如python、JavaScript中均有实现正则表达式的功能)。步骤5中所用的正则表达式根据需要编写而成，然后依次与所有代码文件的唯一标识进行匹配，筛选结果是与正则表达式匹配的代码文件，或是不含与正则表达式匹配的代码文件，总之，筛选结果是原始数据的子集。然后筛选结果继续步骤2至步骤4。

如图3所示，为实例的整体依赖关系可视化结果示意图。选用含有约350个代码文档的前端项目进行可视化分析，可以看出所有文件的引用关系、大小、颜色均直观的展示在图上。所有文件大小清晰可见，且由内向外、分层逐级展示出来。

如图4所示，为实例的引用数量最多的代码文件可视化结果示意图。选择图3中显示为深色(红色)的文件得到的可视化关系图，可以清楚的看到红色文件是引用文件数量最多的文件。

如图5所示，为实例的某类代码文档引用情况可视化结果示意图。如图6所示，为实例的某类代码文档被引用情况可视化结果示意图。分别是针对某一类文件分析的引用和被引用的关系，可以看出文件的引用关系十分清晰的展现出来。原本需要人工检查才能分析得到的依赖关系，本发明提出的方法可以自动化的分析并渲染成可视化的图形，有助于减少不必要的依赖，优化代码结构。

Claims (1)

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按字典序均匀分布在同一个圆上，第一级目录为半径最小的圆，随半径增大依次为第二级、第三级目录；在同一级目录中，如果某文件是被同级的其他文件引用，它将被向外移动到本目录和下一级目录之间的位置；模型建立过程如下：

（1）对大小规模不一的文件进行归一化处理，建立文件的半径模型，公式如下：

；

其中，r表示归一化的半径，file_size表示文件的大小，max_size表示最大的文件的大小，半径与文件的大小成正比关系；

（2）对文件引用数量进行归一化处理，建立文件的颜色模型，表达式如下：

；

其中，c表示归一化的引用数量，file_nums_as_source表示文件的引用数量，max_nums_as_source表示所有文件中引用数量的最大值；

（3）计算文件所在坐标：首先计算文件在极坐标系中的位置（ρ,θ），公式如下：

，

；

其中，m，t，w，b为用于调试显示效果的超参数，n表示代码文件在其所在层级目录中的顺序号；

获得极坐标（ρ,θ）后，再将极坐标转换成直角坐标（x,y），转换公式如下：

；

步骤4、借助ECharts工具渲染依赖关系的可视化图形；

步骤5、通过正则表达式参与对原始数据的筛选，渲染出一幅新的仅针对特定的文件的依赖关系的可视化图形。