组件文件的定位方法、装置、电子设备及存储介质与流程

1.本技术涉及互联网技术领域，具体涉及一种组件文件的定位方法、装置、电子设备及存储介质。


背景技术：

2.随着互联网技术的发展，现今多是前后端分离的架构，由前端接管路由层。由于数据与视图进一步解耦，前端项目的复杂度不断提升，现已迎来组件化与前端路由的时代，随之而来的是定位路由与组件文件路径的问题。
3.随着前端页面的不断迭代，项目的体量与复杂度不断上升，定位前端文件的难度与成本也随之上升。当前还是采用人力对组件文件进行全局搜索，人力搜索不仅耗时耗力，且有时出现无法精确定位等问题。


技术实现要素：

4.本技术的目的在于提供一种组件文件的定位方法、装置、电子设备及存储介质，能够使简单方便地获取页面上多级路由对应的多个组件的文件地址，实现一键定位，提升了开发者的开发体验。
5.本技术实施例第一方面提供了一种组件文件的定位方法，包括：
6.显示交互页面对应的功能窗口；
7.响应于对所述功能窗口中指定组件的触发操作，在预设组件关联表中查找与所述指定组件对应的关联表项；其中，所述关联表项包括组件与文件地址的映射关系；
8.在所述功能窗口显示所述指定组件的文件地址。
9.于一实施例中，所述显示交互页面对应的功能窗口，包括：
10.响应于针对所述交互页面的组件定位指令，显示所述功能窗口；或，当检测到位于针对所述交互页面的开发环境，显示所述功能窗口。
11.于一实施例中，所述关联表项包括组件与挂载点的映射关系，所述方法还包括：
12.以预设渲染方式对所述指定组件进行渲染；
13.在所述交互页面中，依据与所述指定组件对应的挂载点，展示渲染后的所述指定组件。
14.于一实施例中，在所述在预设组件关联表中查找与所述指定组件对应的文件地址之前，所述方法还包括：
15.获取所述交互页面内的多个组件；
16.获取每一组件对应的文件地址，以及在所述交互页面的挂载点；
17.根据每一组件、所述组件对应的文件地址和挂载点之间的映射关系，构建所述组件关联表。
18.于一实施例中，所述获取所述交互页面内的多个组件，包括：
19.获取所述交互页面的所有组件；
20.对所有组件中满足预设组件筛选条件的组件进行滤除，得到所述多个组件。
21.于一实施例中，所述功能窗口包括若干路由以及每一路由对应的组件列表；
22.在所述响应于对所述功能窗口中指定组件的触发操作之前，包括：
23.响应于针对所述功能窗口中任一路由的第一选择操作，在所述功能窗口展示所述路由对应的组件列表；
24.响应于针对所述组件列表中任一组件的第二选择操作，确定所述第二选择操作指示组件为所述指定组件，所述第二选择操作为所述指定组件的触发操作。
25.于一实施例中，在所述获取所述交互页面内的多个组件之后，所述方法还包括：
26.根据每一组件对应的路由，确定每一路由对应的若干组件；
27.针对每一路由，根据其对应的若干组件生成与所述路由对应的组件列表。
28.本技术实施例第二方面提供了一种组件文件的定位装置，包括：
29.窗口显示模块，用于显示交互页面对应的功能窗口；
30.触发响应模块，用于响应于对所述功能窗口中指定组件的触发操作，在预设组件关联表中查找与所述指定组件对应的关联表项；其中，所述关联表项包括组件与文件地址的映射关系；
31.地址显示模块，用于在所述功能窗口显示所述指定组件的文件地址。
32.本技术实施例第三方面提供了一种电子设备，包括：
33.处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行本技术第一方面所述的组件文件的定位方法。
34.本技术实施例第四方面提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序可由处理器执行以完成本技术第一方面所述的组件文件的定位方法。
35.本技术提供的组件文件的定位方法、装置、电子设备及存储介质，用于为开发人员提供一种方便定位组件文件路径的插件，且可根据开发人员的需求自定义设置不需要的组件，使得开发人员能够简单方便地获取组件文件的地址，从而进行相应的修改，真正实现一键定位。插件机制具有即插即用特性，能够做到不影响项目代码，不仅节省了公司的开发人力成本，且极大提升了开发人员的开发体验。
附图说明
36.为了更清楚地说明本技术实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍。
37.图1为本技术实施例提供的电子设备的结构示意图；
38.图2为本技术实施例提供的组件文件的定位方法的流程示意图；
39.图3为本技术实施例提供的组件文件的定位方法的效果示意图；
40.图4为本技术实施例提供的构建组件关联表的流程示意图；
41.图5为本技术实施例提供的构建组件关联表的关系示意图；
42.图6为本技术实施例提供组件文件的定位装置的结构示意图。
具体实施方式
43.在本技术的描述中，术语“第一”、“第二”等仅用于区分描述，并不表示排列序号，也不能理解为指示或暗示相对重要性。
44.在本技术的描述中，术语“包括”、“包含”等表示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其他特征、步骤、操作、元素、组件和/或其集合的存在或添加。
45.除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。
46.下面将结合附图对本技术的技术方案进行清楚、完整地描述。
47.请参照图1，其为本技术一实施例提供的电子设备100的结构示意图，该电子设备100可以用于执行本技术实施例提供的组件文件的定位方法。电子设备100包括：至少一个处理器103、至少一个存储器102和总线101，总线101用于实现这些组件的连接通信。
48.电子设备100可以是主机、平板电脑、智能手机等，用于执行组件文件的定位方法。
49.存储器102可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，包括但不限于，随机存取存储器(random access memory，ram)，只读存储器(read only memory，rom)，静态随机存取存储器(static random access memory，sram)，可编程只读存储器(programmable read-only memory，prom)，可擦除只读存储器(erasable programmable read-only memory，eprom)，电可擦除只读存储器(electric erasable programmable read-only memory，eeprom)。
50.处理器103可以是通用处理器，包括但不限于中央处理器(central processing unit，cpu)、网络处理器(network processor，np)等，还可以是数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field programmable gate array，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器103也可以是任何常规的处理器等，处理器103是电子设备100的控制中心，利用各种接口和线路连接整个电子设备100的各个部分。处理器103可以实现或者执行本技术实施例中公开的各方法、步骤及逻辑框图。
51.于一实施例中，图1以一个处理器103和一个存储器102为例，处理器103和存储器102通过总线101连接，存储器102存储有可被处理器103执行的指令，指令被处理器103执行，以使电子设备100可执行下述的实施例中方法的全部流程或部分流程，以实现对组件文件的定位。
52.请参照图2，其为本技术实施例提供的组件文件的定位方法的流程示意图，该方法可由图1所示的电子设备100执行，该方法包括s210-s230。
53.s210：显示交互页面对应的功能窗口。
54.交互页面可以是网页页面，也可以是移动终端的app页面。在任一交互页面通常存在一个或多个路由，每个路由包含多个组件。交互页面对应的功能窗口包含该交互页面下的若干路由以及每一路由对应的组件列表。
55.于一实施例中，响应于针对交互页面的组件定位指令，显示功能窗口；或，当检测
s430。
69.s410：获取交互页面内的多个组件。
70.页面中包含多个路由，以一个页面为单元，页面的路由具有嵌套关系。首先收集当前页面内的父组件。在全局混入中注入钩子函数，钩子函数的第一个参数即当前要获取的父组件，即可实现在钩子函数中收集所有父组件。
71.将收集到的父组件存储在一个全局对象中，组件信息包括组件名、组件文件地址，将父组件对应的路由维护在全局对象的属性中。$children用于获取组件的子组件，将收集到的子组件存储在一个对象中。经过遍历不断重复上述操作，直到收集完所有组件。
72.另外还增加了筛选功能，可以对所有组件中满足预设组件筛选条件的组件进行滤除，从而得到需要的组件。方便开发人员在定位组件文件时，减少功能窗口中的组件数量，减轻插件体量。
73.s420：获取每一组件对应的文件地址，以及在交互页面的挂载点。
74.针对本实施例的vue项目，借助vue开发模式下会记录编译期信息的特点，获取组件的文件地址，通过组件文件的对象属性获取组件对应的文件地址。首先判断组件是否存在组件文件的对象属性，若存在，可以将组件与其对应的文件地址进行绑定；若不存在，则返回“未查询到路径”的提示。当开发人员在功能窗口点击某组件，但该组件若未进行文件地址的绑定，将无法获取对应的文件地址，界面显示“未查询到路径”。非vue项目可采用一种自动化导入模块获取组件的文件地址。
75.挂载点即dom节点，页面由dom节点组成，每一个组件都存在一个挂载点。vue中，组件的挂载点存在于组件实例的$el属性上，$el用于获取vue组件关联的挂载点，因此挂载点与组件存在映射关系。
76.s430：根据每一组件、组件对应的文件地址和挂载点之间的映射关系，构建组件关联表。
77.通过s420，将组件与其对应文件地址、组件与其对应挂载点进行了绑定，将这些绑定关系存于核心路由类中。通过组件分别与其对应文件地址与其对应挂载点之间的映射关系，构建组建关联表，如图5所示。通过页面上的挂载点可关联到对应组件，再关联到该组件对应的文件地址，从而实现本vue插件的定位组件文件的功能。
78.请参照图6，其为本技术实施例提供组件文件的定位方法的结构示意图，该组件文件的定位装置600包括：
79.窗口显示模块610，用于显示交互页面对应的功能窗口。
80.触发响应模块620，用于响应于对功能窗口中指定组件的触发操作，在预设组件关联表中查找与指定组件对应的关联表项；其中，关联表项包括组件与文件地址的映射关系。
81.地址显示模块630，用于在功能窗口显示指定组件的文件地址。
82.本技术实施例还提供了一种存储介质，包括：程序，当其藉由电子设备100运行时，使得电子设备100可执行上述实施例中方法的全部或部分流程。其中，存储介质可为磁盘、光盘、只读存储记忆体(read-only memory，rom)、随机存储记忆体(random access memory，ram)、快闪存储器102(flash memory)、硬盘(hard disk drive，缩写：hdd)或固态硬盘(solid-state drive，ssd)等。存储介质还可以包括上述种类的存储器102的组合。
83.功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储
在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。
84.在本技术所提供的几个实施例中，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本技术的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
85.另外，在本技术各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
86.以上所述仅为本技术的优选实施例而已，并不用于限制本技术，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。