程序结构可视化方法、设备、存储介质及装置与流程

本发明涉及计算机信息技术领域，尤其涉及一种程序结构可视化方法、设备、存储介质及装置。

背景技术：

大多数开发文档使用文字的方式表述系统的逻辑结构，虽然逻辑严谨易于证明，但是可理解性比较差，前端程序结构的复杂性和逻辑关系繁多，导致系统的维护和改进需要耗费很多时间进行逻辑关系的整理，因此，如何让前端程序结构易于理解是亟待解决的技术问题。

上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。

技术实现要素：

本发明的主要目的在于提供一种程序结构可视化方法、设备、存储介质及装置，旨在解决现有技术中前端程序结构复杂，难于理解的技术问题。

为实现上述目的，本发明提供一种程序结构可视化方法，所述程序结构可视化方法包括以下步骤：

遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据；

通过预设可视化工具建立实例化对象；

从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点；

根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络；

通过所述预设可视化工具将所述关系网络进行展示。

优选地，所述根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络，包括：

对所有的页面元素进行遍历，将遍历到的页面元素作为第一元素，所述当前页面对象包括多种类型的页面元素；

对所述第一元素进行类型识别，获得所述第一元素的第一类型；

查找与所述第一类型对应的第一调用规则；

根据所述第一调用规则对所述第一元素进行内容分析，获得所述第一元素与第二元素之间的关系；

根据所述第一元素与所述第二元素之间的关系建立所述第一元素对应的节点与所述第二元素对应的节点之间的连线；

所述节点和所述节点之间的连线构成所述页面元素之间的关系网络。

优选地，所述通过所述预设可视化工具将所述关系网络进行展示之后，所述程序结构可视化方法还包括：

根据所述关系网络计算各页面元素的使用频度；

将所述使用频度超过预设频度阈值的页面元素作为目标页面元素，对所述目标页面元素进行优化。

优选地，所述遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据之后，所述程序结构可视化方法还包括：

调用服务器接口，通过所述服务器接口将所述关系描述数据发送至服务器进行存储。

优选地，所述调用服务器接口，通过所述服务器接口将所述关系描述数据发送至服务器进行存储之后，所述程序结构可视化方法还包括：

接收查询指令，从所述查询指令中提取出待查询页面对象；

从所述服务器中查询所述待查询页面对象对应的关系描述数据。

优选地，所述遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据，包括：

遍历页面对象列表，将遍历到的页面对象作为当前页面对象，判断所述当前页面对象是否处理完成；

若否，则记录所述当前页面对象中的页面元素之间的关系描述数据。

优选地，所述预设可视化工具包括：数据驱动文档。

此外，为实现上述目的，本发明还提出一种程序结构可视化设备，所述程序结构可视化设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的程序结构可视化程序，所述程序结构可视化程序配置为实现如上文所述的程序结构可视化方法的步骤。

此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有程序结构可视化程序，所述程序结构可视化程序被处理器执行时实现如上文所述的程序结构可视化方法的步骤。

此外，为实现上述目的，本发明还提出一种程序结构可视化装置，所述程序结构可视化装置包括：遍历模块，用于遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据；

建立模块，用于通过预设可视化工具建立实例化对象；

提取模块，用于从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点；

建立模块，用于根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络；

展示模块，用于通过所述预设可视化工具将所述关系网络进行展示。

本发明中，遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据，通过预设可视化工具建立实例化对象，结合所述预设可视化工具将页面元素之间的关系描述数据进行可视化，提高数据可视化效率；从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点，根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络，通过所述预设可视化工具将所述关系网络进行展示，直观的将前端开发的逻辑性进行展示，使得系统的逻辑结构易于理解，为系统优化提供基础数据，提高系统优化效率。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的程序结构可视化设备的结构示意图；

图2为本发明程序结构可视化方法第一实施例的流程示意图；

图3为本发明程序结构可视化方法第二实施例的流程示意图；

图4为本发明程序结构可视化方法第三实施例的流程示意图；

图5为本发明程序结构可视化装置第一实施例的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的程序结构可视化设备结构示意图。

如图1所示，该程序结构可视化设备可以包括：处理器1001，例如中央处理器(centralprocessingunit，cpu)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(display)，可选用户接口1003还可以包括标准的有线接口、无线接口，对于用户接口1003的有线接口在本发明中可为usb接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(wireless-fidelity，wi-fi)接口)。存储器1005可以是高速的随机存取存储器(randomaccessmemory，ram)存储器，也可以是稳定的存储器(non-volatilememory，nvm)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的结构并不构成对程序结构可视化设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，认定为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及程序结构可视化程序。

在图1所示的程序结构可视化设备中，网络接口1004主要用于连接后台服务器，与所述后台服务器进行数据通信；用户接口1003主要用于连接用户设备；所述程序结构可视化设备通过处理器1001调用存储器1005中存储的程序结构可视化程序，并执行本发明实施例提供的程序结构可视化方法。

基于上述硬件结构，提出本发明程序结构可视化方法的实施例。

参照图2，图2为本发明程序结构可视化方法第一实施例的流程示意图，提出本发明程序结构可视化方法第一实施例。

在第一实施例中，所述程序结构可视化方法包括以下步骤：

步骤s10：遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据。

应理解的是，本实施例的执行主体是所述程序结构可视化设备，其中，所述程序结构可视化设备可为个人电脑或服务器等电子设备。所述页面列表包括：事件、页面、过程和变量四种类型的页面对象；所述事件包括：点击标签(tab)页，展示订单详情和跳转面签页面等；所述页面包括：标签页，订单详情页和面核页等；所述过程包括：获取面核丢订单和获取面核假数据等；所述变量包括：标签(tab)已选中样式，已放款订单，未通过订单，处理中订单，全部订单和待处理订单等。

可理解的是，为了构建所有页面对象中各页面元素之间的关系网络，则对所有的页面对象进行遍历，所述页面对象列表中包括所有的页面对象，将遍历到的页面对象作为当前页面对象。需对所述当前页面对象的状态进行判断，若所述当前页面对象处理完成，则不存在所述当前页面对象中的页面元素之间的关系描述数据，无需记录；若所述当前页面对象未处理完成，则需记录所述当前页面对象中的页面元素之间的关系描述数据，所述关系描述数据包括：以对象-属性的方式保存的事件和变量，以键-值的方式保存的事件和过程之间的映射关系。本实施例中，所述步骤s10，包括：遍历页面对象列表，将遍历到的页面对象作为当前页面对象，判断所述当前页面对象是否处理完成；若否，则记录所述当前页面对象中的页面元素之间的关系描述数据。

步骤s20：通过预设可视化工具建立实例化对象。

应理解的是，所述预设可视化工具包括数据驱动文档(data-drivendocuments，简称d3)，d3是一个数据可视化的javascript库，d3适合做大数据处理的可视化，通过所述d3建立实施例化对象，则只需对所述实施例化对应添加节点，添加点与点之间的关系，将实施例化对象进行展示，则实现了数据可视化。

步骤s30：从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点。

应理解的是，为了直观的将所有页面的所有页面元素之间的关系进行可视化展示，可从所述关系描述数据中提取出所有的页面元素，再根据所述关系描述数据建立所有的页面元素之间的关系网络。所有的页面元素的类型包括：页面、事件和过程。首先构建节点，获取所有的页面元素，将所述页面元素转化为d3的节点(nodes)，同时为每个nodes设置对应的下标ix。

步骤s40：根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络。

需要说明的是，为了通过所述预设可视化工具展示各页面元素之间的关系网络，首先，添加所述实施例化对象的节点；其次，构建所述关系网络中的边(lines)，也就是两个nodes之间的关系，能够清晰的展示来源(source)和目的(target)，建立好所有的nodes之后，再对所有的页面元素进行遍历，从而理清楚页面、变量、过程和事件之间的关系。一个页面中可能含有变量和事件，事件中可能含有过程和页面(例如弹窗页面)，过程中可能含有另外的过程和页面，所述页面的过程也就是调用的公共函数，所述事件是页面组件元素触发的，页面层级含有事件，但是过程里面是不会含有事件的。

步骤s50：通过所述预设可视化工具将所述关系网络进行展示。

在具体实现中，在各节点和各节点之间的关系都整理好之后，则可调用所述预设可视化工具构建所述关系网络，将构建的所述关系网络进行展示，则可直观的通过展示的所述关系网络对复杂的前端程序结构进行理解，降低理解难度，从而提高优化系统的效率，以便后续进行模块化开发。在进行展示时，可对不同类型的页面元素设置不同的颜色进行展示，使得不同的类型一目了然。本实施例中，所述预设可视化工具包括：数据驱动文档；所述步骤s20，包括：通过所述数据驱动文档建立实例化对象；所述步骤s50，包括：通过所述数据驱动文档将所述关系网络进行展示。

在第一实施例中，遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据，通过预设可视化工具建立实例化对象，结合所述预设可视化工具将页面元素之间的关系描述数据进行可视化，提高数据可视化效率；从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点，根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络，通过所述预设可视化工具将所述关系网络进行展示，直观的将前端开发的逻辑性进行展示，使得系统的逻辑结构易于理解，为系统优化提供基础数据，提高系统优化效率。

参照图3，图3为本发明程序结构可视化方法第二实施例的流程示意图，基于上述图2所示的第一实施例，提出本发明程序结构可视化方法的第二实施例。

在第二实施例中，所述步骤s40，包括：

步骤s401：对所有的页面元素进行遍历，将遍历到的页面元素作为第一元素，所述当前页面对象包括多种类型的页面元素。

可理解的是，为了直观的将所有页面的所有页面元素之间的关系进行可视化展示，可从所述关系描述数据中提取出所有的页面元素，再根据所述关系面述数据建立所有的页面元素之间的关系网络。所有的页面元素的类型包括：页面、变量、事件和过程。不同的类型有对应的调用关系，可根据各页面元素的类型，根据对应的调用关系，可以分析出各页面元素可能包含的其他类型的页面元素，从而确定出各页面元素之间的调用关系。对所有的页面元素都需进行分析，查找出各页面元素之间的关系，为了将所有的页面元素都分析到，可对所有的页面元素进行遍历，将遍历到的页面元素作为所述第一元素，再对所述第一元素进行分析，获得所述第一元素和各类型的页面元素之间的关系。

步骤s402：对所述第一元素进行类型识别，获得所述第一元素的第一类型。

应理解的是，为了理清所述第一元素与其他页面元素之间的关系，可先分析所述第一元素的类型，所述第一类型为页面、变量、事件或过程中的任一种，若所述第一类型为页面，所述页面可能含有变量，含有关键字(params),如果遇到那么就建立这个页面与这个变量的联系，也就是边，由于之前已经建立好了所有的nodes，以及下标，则可以知道source和target，从而建立页面和对应的变量之间的联系。

步骤s403：查找与所述第一类型对应的第一调用规则。

可理解的是，不同的类型对应不同的调用规则，比如，所述第一类型为页面，则与页面对应的第一调用规则为判断页面是否包括变量和/或事件；所述第一类型为事件，则与事件对应的第一调用规则为判断事件是否包括过程和/或页面；所述第一类型为过程，则与过程对应的第一调用规则为判断过程中是否包括页面和/或其他过程。可预先建立不同类型与对应的调用规则之间的对应关系表，从所述对应关系表中查找与所述第一类型对应的第一调用规则。

步骤s404：根据所述第一调用规则对所述第一元素进行内容分析，获得所述第一元素与第二元素之间的关系。

需要说明的是，可根据查找的第一调用规则对属于第一类型的第一元素进行针对性分析，根据所述第一元素的所述第一类型从而查找所述第一元素和其他页面元素之间的关系。比如，若所述第一类型为页面，则对应的第一调用规则为判断事件是否包括过程或页面，也就是说，所述第一元素可能包括类型为变量或事件的页面元素，则可对所述第一元素进行分析，判断所述第一元素是否包括类型为事件和/或者变量的第二元素，从而建立所述第一元素和所述第二元素之间的关系。若所述第一类型为过程，则对应的第一调用规则为判断过程中是否包括页面和/或其他过程，也就是说，所述第一元素可能包括类型为页面和/或过程的页面元素，则可对所述第一元素进行分析，判断所述第一元素是否包括类型为页面和/或过程的第二元素，但是过程里面是不会包含事件的，则无需对所述第一元素进行判断是否包含事件。根据所述第一调用规则能够快速分析出所述第一元素包括的所述第二元素，从而快速建立所述第一元素和所述第二元素之间的关系。

在具体实现中，当所述第一类型为事件(event)，根据规则提取并建立事件和过程、变量或页面之间的关系。对于事件，通常与之建立联系的是过程和页面，根据规则判断出来，建立事件、过程和页面之间的关系，也就是节点和节点之间的联系，也就是边。对于过程，通常与所述过程建立联系的是事件和页面，根据规则判断出来，建立过程、事件和页面之间的关系。

步骤s405：根据所述第一元素与所述第二元素之间的关系建立所述第一元素对应的节点与所述第二元素对应的节点之间的连线。

应理解的是，各页面元素之间的关系可构建成各节点之间的连线，每个页面元素对应一个节点，获得所述第一元素和所述第二元素之间的关系，即可获得对应的各节点之间的连线。

步骤s406：所述节点和所述节点之间的连线构成所述页面元素之间的关系网络。

可理解的是，整理出所述节点和所述节点之间的连线，即获得各页面元素之间的关系网络，通过所述关系网络将复杂的系统清晰的展示出来，利于后续模块化开发。可将不同类型的页面对象设置不同的颜色进行展示，以使不同的类型一目了然。比如：浅绿色表示页面pages，橘色表示事件events,蓝色表示过程procedure,粉色表示变量；还可对初始化系统的默认选项设置相应的颜色进行展示，比如用黑色表示初始化系统的默认选项。

例如，展示的效果图上可展示出：项目菜单包括绿色的几个服务协议、订单列表等，订单列表关联触发事件展示订单详情，展示订单详情这个事件又关联调用的过程获取面核订单，同时获取面核订单这个过程又被初始化系统的默认选项视图(veiw)切换后调用。

在第二实施例中，对所有的页面元素进行遍历，将遍历到的页面元素作为第一元素，所述当前页面对象包括多种类型的页面元素，对所述第一元素进行类型识别，获得所述第一元素的第一类型，查找与所述第一类型对应的第一调用规则，所述第一调用规则包括第一类型与其他类型之间的调用关系，根据所述第一调用规则对所述第一元素进行内容分析，获得所述第一元素与第二元素之间的关系，根据所述第一元素与所述第二元素之间的关系建立所述第一元素对应的节点与所述第二元素对应的节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络，通过根据各页面元素的类型，根据与类型对应的调用关系对页面元素进行分析，从而快速建立各页面元素之间的关系网络，通过所述关系网络将复杂的系统清晰的展示出来，利于后续模块化开发。

参照图4，图4为本发明程序结构可视化方法第三实施例的流程示意图，基于上述图3所示的第二实施例，提出本发明程序结构可视化方法的第三实施例。

在第三实施例中，所述步骤s50之后，还包括：

步骤s60：根据所述关系网络计算各页面元素的使用频度。

可理解的是，所述关系网络直观的将各页面元素之间的关系进行展示，可通过统计各页面元素存在的边的数量，即各页面元素之间的连线的数量，计算出各页面元素对应的使用频度。比如，在所述关系网络中，跳转面签页面对应的节点与其他节点之间的连线的数量为2，则所述跳转面签页面的使用频度为2。

步骤s70：将所述使用频度超过预设频度阈值的页面元素作为目标页面元素，对所述目标页面元素进行优化。

应理解的是，使用频度越高的页面元素，越需要维护，一旦出现问题，与其相关联的页面元素都会受到影响。可根据历史数据进行分析，设置所述预设频度阈值，将所述使用频度超过预设频度阈值的页面元素作为目标页面元素，所述目标页面元素相关联的页面元素较多，为了使得页面、事件、变量和过程在执行过程中更加流畅，可对使用频度较高的所述目标页面元素进行重点优化。

在具体实现中，对所述目标页面元素的优化，可对所述目标页面元素进行分析操作，从多方面进行优化操作，包括：判断所述目标页面元素是否包括图片，在所述目标页面元素包括图片时，接收图片加载指令，将图片的第一屏进行展示。比如，在所述目标页面元素包括图片时，所述目标页面元素在加载时只加载第一屏，当用户继续往后滚屏的时候才加载后续图片，如此，当用户只对所述第一屏的内容有需求时，那剩余的图片请求就节省了。所述优化操作还包括：根据预设合并规则判断是否存在多个脚本或样式可以进行合并，若存在，将该多个脚本或样式进行合并。比如，将外部的脚本或样式进行合并，多个合并成一个，在可进行压缩时，通过压缩工具进行压缩，压缩后能省下不少空间。还可以是其他方面的优化，本实施例对此不加以限制。

在第三实施例中，所述步骤s10之后，还包括：

调用服务器接口，通过所述服务器接口将所述关系描述数据发送至服务器进行存储。

需要说明的是，为了便于后续方便调用所述关系描述数据，可通过服务器接口将所述关系貌似数据上传至所述服务器，将所述关系描述数据存储在所述服务器的数据库中。所述关系描述数据包括：以对象-属性的方式保存的事件和变量，以键-值的方式保存的事件和过程之间的映射关系。

在第三实施例中，所述调用服务器接口，通过所述服务器接口将所述关系描述数据发送至服务器进行存储之后，还包括：

接收查询指令，从所述查询指令中提取出待查询页面对象；

从所述服务器中查询所述待查询页面对象对应的关系描述数据。

在具体实现中，将所述关系描述数据存储在所述服务器的数据库中，可随时对所述关系描述数据进行查询，所述查询指令可指定查询任意一个页面对象的页面元素以及页面元素之间的关系，所述待查询页面可以是任意一个页面对象，为了方便查询，所述服务器中将各页面对象与对应的关系描述数据建立对应关系并存储。则可从所述服务器的所述对应关系中查询到所述待查询页面对象对应的关系描述数据。从所述查询指令中提取出待查询页面对象，判断所述待查询页面对象是否处理完成，若处理完成，则不存在关系描述数据，若未处理完成，则可从所述服务器的数据库总查找到与所述待查询页面对象对应的关系描述数据。对于查询到的所述待查询页面对象对应的关系描述数据，也可从所述关系网络中找到所述待查询页面对象对应的关系描述数据的位置，将其进行高亮展示，以便于开发人员更好的掌握所述所述待查询页面对象对应的页面元素之间的关系。

在第三实施例中，根据所述关系网络计算各页面元素的使用频度，将所述使用频度超过预设频度阈值的页面元素作为目标页面元素，对所述目标页面元素进行优化，使得页面、事件、变量和过程在执行过程中更加流畅。

此外，本发明实施例还提出一种存储介质，所述存储介质上存储有程序结构可视化程序，所述程序结构可视化程序被处理器执行时实现如上文所述的程序结构可视化方法的步骤。

此外，参照图5，本发明实施例还提出一种程序结构可视化装置，所述程序结构可视化装置包括：遍历模块10，用于遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据；

建立模块20，用于通过预设可视化工具建立实例化对象；

提取模块30，用于从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点；

建立模块20，还用于根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络；

展示模块40，用于通过所述预设可视化工具将所述关系网络进行展示。

应理解的是，所述页面列表包括：事件、页面、过程和变量三种类型的页面对象；所述事件包括：点击标签(tab)页，展示订单详情和跳转面签页面等；所述页面包括：标签页，订单详情页和面核页等；所述过程包括：获取面核丢订单和获取面核假数据等；所述变量包括：标签(tab)已选中样式，已放款订单，未通过订单，处理中订单，全部订单和待处理订单等。

可理解的是，为了构建所有页面对象中各页面元素之间的关系网络，则对所有的页面对象进行遍历，所述页面对象列表中包括所有的页面对象，将遍历到的页面对象作为当前页面对象。需对所述当前页面对象的状态进行判断，若所述当前页面对象处理完成，则不存在所述当前页面对象中的页面元素之间的关系描述数据，无需记录；若所述当前页面对象未处理完成，则需记录所述当前页面对象中的页面元素之间的关系描述数据，所述关系描述数据包括：以对象-属性的方式保存的事件和变量，以键-值的方式保存的事件和过程之间的映射关系。本实施例中，所述步骤s10，包括：遍历页面对象列表，将遍历到的页面对象作为当前页面对象，判断所述当前页面对象是否处理完成；若否，则记录所述当前页面对象中的页面元素之间的关系描述数据。

应理解的是，所述预设可视化工具包括数据驱动文档(data-drivendocuments，简称d3)，d3是一个数据可视化的javascript库，d3适合做大数据处理的可视化，通过所述d3建立实施例化对象，则只需对所述实施例化对应添加节点，添加点与点之间的关系，将实施例化对象进行展示，则实现了数据可视化。

应理解的是，为了直观的将所有页面的所有页面元素之间的关系进行可视化展示，可从所述关系描述数据中提取出所有的页面元素，再根据所述关系描述数据建立所有的页面元素之间的关系网络。所有的页面元素的类型包括：页面、事件和过程。首先构建节点，获取所有的页面元素，将所述页面元素转化为d3的节点(nodes)，同时为每个nodes设置对应的下标ix。

需要说明的是，为了通过所述预设可视化工具展示各页面元素之间的关系网络，首先，添加所述实施例化对象的节点；其次，构建所述关系网络中的边(lines)，也就是两个nodes之间的关系，能够清晰的展示来源(source)和目的(target)，建立好所有的nodes之后，再对所有的页面元素进行遍历，从而理清楚页面、变量、过程和事件之间的关系。一个页面中可能含有变量和事件，事件中可能含有过程和页面(例如弹窗页面)，过程中可能含有另外的过程和页面，所述页面的过程也就是调用的公共函数，所述事件是页面组件元素触发的，页面层级含有事件，但是过程里面是不会含有事件的。

在具体实现中，在各节点和各节点之间的关系都整理好之后，则可调用所述预设可视化工具构建所述关系网络，将构建的所述关系网络进行展示，则可直观的通过展示的所述关系网络对复杂的前端程序结构进行理解，降低理解难度，从而提高优化系统的效率，以便后续进行模块化开发。在进行展示时，可对不同类型的页面元素设置不同的颜色进行展示，使得不同的类型一目了然。本实施例中，所述预设可视化工具包括：数据驱动文档；所述通过预设可视化工具建立实例化对象，包括：通过所述数据驱动文档建立实例化对象；所述通过所述预设可视化工具将所述关系网络进行展示，包括：通过所述数据驱动文档将所述关系网络进行展示。

在本实施例中，遍历页面对象列表，将遍历到的页面对象作为当前页面对象，记录所述当前页面对象中的页面元素之间的关系描述数据，通过预设可视化工具建立实例化对象，结合所述预设可视化工具将页面元素之间的关系描述数据进行可视化，提高数据可视化效率；从所述关系描述数据中提取出所有的页面元素，将所有的页面元素作为所述实例化对象的节点，根据所述关系描述数据建立所述节点之间的连线，所述节点和所述节点之间的连线构成所述页面元素之间的关系网络，通过所述预设可视化工具将所述关系网络进行展示，直观的将前端开发的逻辑性进行展示，使得系统的逻辑结构易于理解，为系统优化提供基础数据，提高系统优化效率。

在一实施例中，所述遍历模块10，还用于对所有的页面元素进行遍历，将遍历到的页面元素作为第一元素，所述当前页面对象包括多种类型的页面元素；

所述程序结构可视化装置还包括：识别模块，用于对所述第一元素进行类型识别，获得所述第一元素的第一类型；

查找模块，用于查找与所述第一类型对应的第一调用规则；

分析模块，用于根据所述第一调用规则对所述第一元素进行内容分析，获得所述第一元素与第二元素之间的关系；

所述建立模块20，还用于根据所述第一元素与所述第二元素之间的关系建立所述第一元素对应的节点与所述第二元素对应的节点之间的连线；

所述建立模块20，还用于所述节点和所述节点之间的连线构成所述页面元素之间的关系网络。

在一实施例中，所述程序结构可视化装置还包括：计算模块，用于根据所述关系网络计算各页面元素的使用频度；

优化模块，用于将所述使用频度超过预设频度阈值的页面元素作为目标页面元素，对所述目标页面元素进行优化。

在一实施例中，所述程序结构可视化装置还包括：调用模块，用于调用服务器接口，通过所述服务器接口将所述关系描述数据发送至服务器进行存储。

在一实施例中，提取模块30，还用于接收查询指令，从所述查询指令中提取出待查询页面对象；

所述程序结构可视化装置还包括：查询模块，用于从所述服务器中查询所述待查询页面对象对应的关系描述数据。

在一实施例中，所述遍历模块10，还用于遍历页面对象列表，将遍历到的页面对象作为当前页面对象，判断所述当前页面对象是否处理完成；

所述程序结构可视化装置还包括：记录模块，用于若否，则记录所述当前页面对象中的页面元素之间的关系描述数据。

在一实施例中，所述预设可视化工具包括：数据驱动文档。

本发明所述程序结构可视化装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。词语第一、第二、以及第三等的使用不表示任何顺序，可将这些词语解释为名称。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器镜像(readonlymemoryimage，rom)/随机存取存储器(randomaccessmemory，ram)、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。