CN115016782A - vue组件生成方法及装置 - Google Patents

Abstract

本发明提供一种vue组件生成方法及装置，该方法包括：检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树；检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。该方法通过抽象语法树结构进行代码片段的切分对比，降低了操作的复杂度，生成的组件经过抽象处理以及参数化替换后，在满足现有代码片段需求的基础上，最大程度的增加了组件的复用性，在后续有类似代码时通过触发提示，让开发者直接使用已生成的组件，从而提升开发者的工作效率。

Description

vue组件生成方法及装置

技术领域

本发明涉及互联网领域，尤其涉及一种vue组件生成方法及装置。

背景技术

vue组件化开发在前端开发过程中已经非常普遍。在日常开发过程中，经常会对相似的功能代码直接复制、粘贴，加以修改完成新功能，在多人协作时有些代码别人已经写过一遍了，其他人员并不知道，当后续出现相似的需求时又重新写了一份代码。如此，长期积攒下来项目中重复代码越来越多，修改成本也逐步上升。随着时间积累，项目维护成本逐渐增加，代码的臃肿导致运行效率降低等一系列问题凸显。

当前比较好的操作是在写代码的过程中人工识别哪些可以提取为公共组件，在识别到需要提取为公共组件之后通过编写公共组件来实现当前功能，这依赖于开发者的开发习惯以及开发能力，或者可在成熟的项目中预先封装好非常丰富的组件，开发时就从已有的组件库中选择组件实现功能，这种方法需要预先封装丰富的组件，对于一些新的项目、年轻的开发团队来说成本太高，而且预先封装组件会缺少灵活性，还是会存在一定的代码重复。

发明内容

针对现有技术存在的问题，本发明提供一种vue组件生成方法及装置。

本发明提供一种vue组件生成方法，包括：检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

根据本发明提供的一种vue组件生成方法，所述检测到工程目录下任意vue文件发生修改，包括：检测到任意vue文件中的代码出现新增、删除以及替换。

根据本发明提供的一种vue组件生成方法，所述对所有目标vue文件进行抽象化，包括：将整个目标vue文件作为根节点，将根节点下并列的代码段作为子节点；循环遍历每个子节点中的并列代码段，作为对应子节点的下级子节点，直至遍历整个目标vue文件的所有层级的代码段。

根据本发明提供的一种vue组件生成方法，所述检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件，包括：对于所有抽象树，从相同层级的最低层节点开始，检测代码段的相似度；在有预设数量抽象树的节点相似度达到预设阈值的情况下，逐级检测上一层级节点相似度，直至达到根节点；确定预设数量抽象树的节点相似度达到预设阈值的最高层节点，并根据最高层节点中相同部分的代码段，确定公共组件。

根据本发明提供的一种vue组件生成方法，所述检测所有抽象树的相似度之前，还包括：接收用户设置的预设数量和预设阈值的设置参数，并生成配置文件；相应地，检测所有抽象树的相似度时，根据所述配置文件，提取所述预设数量和所述预设阈值。

根据本发明提供的一种vue组件生成方法，所述提取相似节点中相同部分的代码段作为公共组件之后，还包括：根据所述公共组件生成vue模板文件，并生成每个代码段对应的导航路径；接收用户新建vue文件后，根据所述导航路径执行的确认操作，并对用户新建的vue文件进行相应代码段的替换，生成用户vue文件。

本发明还提供一种vue组件生成装置，包括：监听模块，用于检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；抽象模块，用于对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；对比模块，用于检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

本发明还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上述任一种所述vue组件生成方法。

本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述任一种所述vue组件生成方法。

本发明还提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上述任一种所述vue组件生成方法。

本发明提供的vue组件生成方法及装置，通过抽象语法树结构进行代码片段的切分对比，降低了操作的复杂度，生成的组件经过抽象处理以及参数化替换后，在满足现有代码片段需求的基础上，最大程度的增加了组件的复用性，在后续有类似代码时通过触发提示，让开发者直接使用已生成的组件，从而提升开发者的工作效率。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明提供的vue组件生成方法的流程示意图；

图2是本发明提供的抽象树结构示意图；

图3是本发明提供的vue组件生成装置的结构示意图；

图4是本发明提供的电子设备的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明中的附图，对本发明中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

下面结合图1-图4描述本发明的vue组件生成方法及装置。图1是本发明提供的vue组件生成方法的流程示意图，如图1所示，本发明提供vue组件生成方法，包括：

101、检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件。

首先，在开发者本地监听目录下每个.vue文件的修改，记录文件最新内容。

在一个实施例中，所述检测到工程目录下任意vue文件发生修改，包括：检测到任意vue文件中的代码出现新增、删除以及替换。

具体而言，一旦有新的vue文件生成，无论是重写编写的还是复制后修改得到的，均作为一个目标vue文件，进行后续的抽象树和相似度对比的处理。其中，修改包括代码的新增、删除以及替换。新建后重新编写的vue文件也属于代码新增的情况。

102、对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段。

组件(Component)是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型应用的界面都可以抽象为一个组件树。

具体而言，图2是本发明提供的抽象树结构示意图，可参见图2，每个目标vue文件可抽象为如图2所示的抽象树，左边的每个方框表示一个代码段，代码段与右边的节点一一对应，整棵树即为一个.vue文件。

103、检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

给定任意两段或者多段代码，借助于已有技术可输出代码相似度，以及标注异同片段。每次对比时，对于所有目标vue文件的抽象树，对其中的代码片段进行相似度统计、汇总等计算操作。以相似度预设阈值为80％，预设数量为3进行说明。当存在3个抽象树其中有节点的代码段相似度达到80％以上时，触发提取公共组件操作。对于这三个抽象树，将相似度达到80％以上的代码段，提取相同部分，进行处理后得到公共组件。

具体而言，本发明针对多个重复片段，通过差异化复制生成新的能涵盖所有片段内容的组件文件，之后对其中的不同处进行修剪，以及参数化处理形成最终可复用的组件。提取的公共组件可进行代码的复用，避免多次进行编写。

本发明的vue组件生成方法，通过抽象语法树结构进行代码片段的切分对比，降低了操作的复杂度，生成的组件经过抽象处理以及参数化替换后，在满足现有代码片段需求的基础上，最大程度的增加了组件的复用性，在后续有类似代码时通过触发提示，让开发者直接使用已生成的组件，从而提升开发者的工作效率。

在一个实施例中，所述对所有目标vue文件进行抽象化，包括：将整个目标vue文件作为根节点，将根节点下并列的代码段作为子节点；循环遍历每个子节点中的并列代码段，作为对应子节点的下级子节点，直至遍历整个目标vue文件的所有层级的代码段。

如图2所示，将整个目标vue文件作为根节点，目标vue文件中有并列的三个代码段，从而得到三个子节点，即图中的从上至下的第二层节点。二层节点的这三个代码段又分别包括1、2和3个子代码段，从而可根据抽象树结构得到三个子节点的数量分别为1、2和3的下级子节点，即三层节点。如果下级子节点还存在并列的代码段，则重复上述过程，得到多个层级的抽象树结构。

本发明实施例的vue组件生成方法，代码通过抽象树的形式切分后再进行对比，更加符合组件提取的现实逻辑，使提取到的组件更加具有通用性。

在一个实施例中，所述检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件，包括：对于所有抽象树，从相同层级的最低层节点开始，检测代码段的相似度；在有预设数量抽象树的节点相似度达到预设阈值的情况下，逐级检测上一层级节点相似度，直至达到根节点；确定预设数量抽象树的节点相似度达到预设阈值的最高层节点，并根据最高层节点中相同部分的代码段，确定公共组件。

具体而言，如图2所示，以三个层级的抽象树，且预设数量为三个，预设阈值为80％为例。对所有抽象树，从最低层的子节点，即第三层节点开始计算每个代码段或者子节点的相似度。当存在三个抽象树的某个三层节点代码段相似度大于80％时，比较这三个三层节点的上层节点，也就是二层节点，计算二层节点代码段的相似度是否大于80％，若大于，则比较根节点。若二层节点代码段的相似度大于80％，但根节点相似度小于80％，则二层节点为所述最高层节点，根据二层节点中相同部分的代码段，确定公共组件。

本发明实施例的vue组件生成方法，通过遍历每个层级的抽象树相似度，确定预设数量抽象树的节点相似度达到预设阈值的最高层节点，提高公共组件的可复用程度，最大化减少开发人员的工作量。

在一个实施例中，所述检测所有抽象树的相似度之前，还包括：接收用户设置的预设数量和预设阈值的设置参数，并生成配置文件；相应地，检测所有抽象树的相似度时，根据所述配置文件，提取所述预设数量和所述预设阈值。

具体而言，上述相似度阈值80％及预设数量3为默认配置，可以通过修改配置文件的形式修改当前值。

本发明实施例的vue组件生成方法，通过提取阈值参数的本地化配置，增加了系统的灵活性。

在一个实施例中，所述提取相似节点中相同部分的代码段作为公共组件之后，还包括：根据所述公共组件生成vue模板文件，并生成每个代码段对应的导航路径；接收用户新建vue文件后，根据所述导航路径执行的确认操作，并对用户新建的vue文件进行相应代码段的替换，生成用户vue文件。

新组件可根据具体的差异类型进行精简及参数化操作。组件生成时，可在独立路径下生成新的文件，完全避免对项目代码的污染，在未使用之前不会对现有功能造成任何影响。组件生成后可提供相似代码导航功能，可一键替换用户确认选中的代码片段，从而进一步降低开发者工作量，提升工作效率。

下面对本发明提供的vue组件生成装置进行描述，下文描述的vue组件生成装置与上文描述的vue组件生成方法可相互对应参照。

图3是本发明提供的vue组件生成装置的结构示意图，如图3所示，该vue组件生成装置包括：监听模块301、抽象模块302和对比模块303。其中，监听模块301用于检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；抽象模块302用于对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；对比模块303用于检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

在一个实施例中，所述监听模块301具体用于：检测任意vue文件中的代码出现新增、删除以及替换。

在一个实施例中，所述抽象模块302具体用于：将整个目标vue文件作为根节点，将根节点下并列的代码段作为子节点；循环遍历每个子节点中的并列代码段，作为对应子节点的下级子节点，直至遍历整个目标vue文件的所有层级的代码段。

在一个实施例中，所述对比模块303具体用于：对于所有抽象树，从相同层级的最低层节点开始，检测代码段的相似度；在有预设数量抽象树的节点相似度达到预设阈值的情况下，逐级检测上一层级节点相似度，直至达到根节点；确定预设数量抽象树的节点相似度达到预设阈值的最高层节点，并根据最高层节点中相同部分的代码段，确定公共组件。

在一个实施例中，还包括配置模块，用于：接收用户设置的预设数量和预设阈值的设置参数，并生成配置文件；相应地，对比模块303还用于，根据所述配置文件，提取所述预设数量和所述预设阈值。

在一个实施例中，还包括处理模块，用于：根据所述公共组件生成vue模板文件，并生成每个代码段对应的导航路径；接收用户新建vue文件后，根据所述导航路径执行的确认操作，并对用户新建的vue文件进行相应代码段的替换，生成用户vue文件。

本发明实施例提供的装置实施例是为了实现上述各方法实施例的，具体流程和详细内容请参照上述方法实施例，此处不再赘述。

本发明实施例所提供的vue组件生成装置，其实现原理及产生的技术效果和前述vue组件生成方法实施例相同，为简要描述，vue组件生成装置实施例部分未提及之处，可参考前述vue组件生成方法实施例中相应内容。

图4是本发明提供的电子设备的结构示意图，如图4所示，该电子设备可以包括：处理器(processor)401、通信接口(Communications Interface)402、存储器(memory)403和通信总线404，其中，处理器401，通信接口402，存储器403通过通信总线404完成相互间的通信。处理器401可以调用存储器403中的逻辑指令，以执行vue组件生成方法，该方法包括：检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

此外，上述的存储器403中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

另一方面，本发明还提供一种计算机程序产品，所述计算机程序产品包括计算机程序，计算机程序可存储在非暂态计算机可读存储介质上，所述计算机程序被处理器执行时，计算机能够执行上述各方法所提供的vue组件生成方法，该方法包括：检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

又一方面，本发明还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现以执行上述各方法提供的vue组件生成方法，该方法包括：检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种vue组件生成方法，其特征在于，包括：

检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；

对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；

检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

2.根据权利要求1所述的vue组件生成方法，其特征在于，所述检测到工程目录下任意vue文件发生修改，包括：

检测到任意vue文件中的代码出现新增、删除以及替换。

3.根据权利要求1所述的vue组件生成方法，其特征在于，所述对所有目标vue文件进行抽象化，包括：

将整个目标vue文件作为根节点，将根节点下并列的代码段作为子节点；

循环遍历每个子节点中的并列代码段，作为对应子节点的下级子节点，直至遍历整个目标vue文件的所有层级的代码段。

4.根据权利要求3所述的vue组件生成方法，其特征在于，所述检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件，包括：

对于所有抽象树，从相同层级的最低层节点开始，检测代码段的相似度；

在有预设数量抽象树的节点相似度达到预设阈值的情况下，逐级检测上一层级节点相似度，直至达到根节点；

确定预设数量抽象树的节点相似度达到预设阈值的最高层节点，并根据最高层节点中相同部分的代码段，确定公共组件。

5.根据权利要求1所述的vue组件生成方法，其特征在于，所述检测所有抽象树的相似度之前，还包括：

接收用户设置的预设数量和预设阈值的设置参数，并生成配置文件；

相应地，检测所有抽象树的相似度时，根据所述配置文件，提取所述预设数量和所述预设阈值。

6.根据权利要求1所述的vue组件生成方法，其特征在于，所述提取相似节点中相同部分的代码段作为公共组件之后，还包括：

根据所述公共组件生成vue模板文件，并生成每个代码段对应的导航路径；

接收用户新建vue文件后，根据所述导航路径执行的确认操作，并对用户新建的vue文件进行相应代码段的替换，生成用户vue文件。

7.一种vue组件生成装置，其特征在于，包括：

监听模块，用于检测到工程目录下任意vue文件发生修改的情况下，将修改后的vue文件作为一个目标vue文件；

抽象模块，用于对所有目标vue文件进行抽象化，得到每个目标vue文件对应的抽象树，其中，每个抽象树包括一个根节点和多个叶子节点，所述根节点和每个叶子节点均表示一个代码段；

对比模块，用于检测所有抽象树的相似度，在有预设数量抽象树的节点相似度达到预设阈值的情况下，提取相似节点中相同部分的代码段作为公共组件。

8.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述vue组件生成方法。

9.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述vue组件生成方法。

10.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述vue组件生成方法。

Images