Multi-terminal code repetition detection and component reconstruction method and device, equipment and medium

Abstract

The invention relates to the technical field of code analysis, and discloses a multi-terminal code repetition detection and component reconstruction method, device, equipment and medium, and the method comprises the steps: carrying out code analysis on a pre-acquired project code file, and identifying a code mapping relation to obtain an abstract syntax tree and a cross-platform code mapping relation, and according to the abstract syntax tree and the cross-platform code mapping relationship, carrying out repetition logic detection on the project code file to obtain a repetition detection result, according to the repetition detection result, confirming a repetition code in the project code file, carrying out cross-platform code optimization on the repetition code to obtain an optimized code, and carrying out cross-platform code optimization on the optimized code. The method comprises the steps of obtaining duplicated codes, extracting reusable components on the basis of the duplicated codes, generating a multi-end adaptive component template according to a preset condition compiling logic, and reconstructing the optimized codes according to the reusable components and the multi-end adaptive component template to obtain reconstructed codes, so that the code duplicating detection and reconstruction efficiency is improved.

Description

Technical Field

[0001] This invention relates to the field of code analysis technology, and in particular to a method, apparatus, device and medium for multi-terminal code duplication detection and component reconstruction. Background Technology

[0002] With the widespread use of the Vue framework in front-end development and the increasing demand for cross-platform development, multi-platform code duplication detection and component-based refactoring have become key challenges in improving development efficiency and code quality.

[0003] Regarding Vue code duplication detection, traditional tools (such as ESLint) can only perform text-level duplication detection and cannot identify logically similar but structurally scattered code within Vue single-file components, such as duplicate methods or computed properties. Furthermore, existing technologies lack in-depth analysis capabilities of the Vue3 Composition API, making it difficult to accurately identify reactive variables and logic reuse points in setup functions. This results in the inability to effectively detect logic duplication issues between the Vue2 Options API and the Vue3 Composition API. In handling cross-platform code redundancy, Taro mini-program development involves a large amount of multi-platform adaptation code containing duplicate conditional branching logic. However, traditional tools struggle to aggregate and analyze this cross-platform conditional code, failing to propose a unified abstraction solution, leading to severe code redundancy and high maintenance costs. Regarding component-based refactoring, existing Vue plugins (such as Vetur) rely on developers manually extracting components, resulting in low automation and difficulty meeting the refactoring needs of large-scale projects. Moreover, manual refactoring can easily break reactive dependencies or cross-platform compatibility, causing abnormal operation of the refactored code on different platforms, affecting application functionality consistency and user experience. Summary of the Invention

[0004] This invention provides a method, apparatus, computer equipment, and medium for multi-terminal code duplication detection and component reconstruction, in order to solve the problems of low monitoring efficiency and poor reconstruction effect of existing code duplication detection and reconstruction methods on the market.

[0005] Firstly, a method for multi-platform code duplication detection and component refactoring is provided, including: The code files of the pre-acquired project are parsed and the code mapping relationship is identified to obtain the abstract syntax tree and cross-platform code mapping relationship; The duplicate detection results are confirmed by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationship. Based on the duplicate detection results, duplicate code in the project code file is identified. Common logic is extracted and duplicate styles are merged from the duplicate code to obtain optimized code. By identifying repetitive logic blocks in the repetitive code, reusable components are extracted. Based on Taro's conditional compilation logic, implementation templates for different platforms are generated for cross-platform components, resulting in multi-platform adapted component templates. The multi-terminal adaptation component template is integrated into the optimized code, and the reusable component is used to replace the duplicate code in the optimized code to obtain the refactored code.

[0006] Secondly, a multi-terminal code duplication detection and component refactoring device is provided, including: The relation mapping module is used to parse the pre-acquired project code files and identify code mapping relationships to obtain an abstract syntax tree and cross-platform code mapping relationships. The logic detection module is used to confirm the duplicate detection results by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationship, and to obtain the duplicate detection results. The code optimization module is used to identify duplicate code in the project code file based on the duplicate detection results, extract common logic and merge duplicate styles in the duplicate code to obtain optimized code. The template generation module is used to extract reusable components by identifying repetitive logic blocks in the repetitive code, and generate implementation templates for different platforms for cross-platform components based on Taro's conditional compilation logic, thus obtaining multi-platform adapted component templates. The code refactoring module is used to integrate the multi-terminal adaptation component template into the optimized code, and use the reusable components to replace the duplicate code in the optimized code to obtain the refactored code.

[0007] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described multi-end code duplication detection and component reconstruction method.

[0008] Fourthly, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, it implements the steps of the above-described multi-platform code duplication detection and component refactoring method. In the scheme implemented by the above-described multi-platform code duplication detection and component refactoring method, apparatus, computer device, and storage medium, code parsing is performed on pre-acquired project code files to identify code mapping relationships, resulting in an abstract syntax tree and cross-platform code mapping relationships. The duplication detection result is confirmed by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationships. The duplication detection result is obtained. The duplicate code in the project code files is identified based on the duplication detection result. The duplicate code is subjected to common logic extraction and duplicate style merging to obtain optimized code. Reusable components are extracted by identifying duplicate logic blocks in the duplicate code. Based on Taro's conditional compilation logic, implementation templates for different platforms are generated for the cross-platform components to obtain multi-platform adaptation component templates. The multi-platform adaptation component templates are integrated into the optimized code, and the reusable components are used to replace the duplicate code in the optimized code to obtain refactored code, thereby improving the efficiency of code duplication detection and refactoring. Attached Figure Description

[0009] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0010] Figure 1 This is a schematic diagram of an application environment for a multi-terminal code duplication detection and component reconstruction method according to an embodiment of the present invention; Figure 2 This is a flowchart illustrating a method for multi-terminal code duplication detection and component reconstruction in one embodiment of the present invention; Figure 3 This is a schematic diagram of a multi-terminal code duplication detection and component reconstruction device according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention; Figure 5 This is another structural schematic diagram of a computer device according to one embodiment of the present invention. Detailed Implementation

[0011] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0012] The multi-terminal code duplication detection and component refactoring method provided in this invention can be applied to, for example... Figure 1 In this application environment, the client communicates with the server via a network. The server can use the client to parse the pre-acquired project code files and identify code mapping relationships, obtaining an abstract syntax tree and cross-platform code mapping relationships. It then calculates the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationships to confirm the duplication detection results. Based on these results, it identifies duplicate code in the project code files, extracts common logic and merges duplicate styles to obtain optimized code. It extracts reusable components from the duplicate logic blocks in the duplicate code, generates implementation templates for different platforms based on Taro's conditional compilation logic, and integrates these templates into the optimized code. Finally, it replaces the duplicate code in the optimized code with the reusable components, resulting in refactored code, thus improving the efficiency of code duplication detection and refactoring. The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a standalone server or a server cluster consisting of multiple servers. The following detailed description of specific embodiments further illustrates this invention.

[0013] Please see Figure 2 As shown, Figure 2 A flowchart illustrating the multi-terminal code duplication detection and component refactoring method provided in this embodiment of the invention includes the following steps: S1. Parse the pre-acquired project code files and identify the code mapping relationships to obtain the abstract syntax tree and cross-platform code mapping relationships.

[0014] In this embodiment of the invention, the project code file may refer to the code file of the Taro project.

[0015] In detail, Taro is an open-source cross-platform solution that supports front-end frameworks such as React, Vue, and Nerv, allowing developers to use a single codebase to develop multiple applications.

[0016] In this embodiment of the invention, the step of parsing the pre-acquired project code file and identifying the code mapping relationship between logic and structure in the project code file to obtain the cross-platform code mapping relationship between the abstract syntax tree of Vue single-file components and multi-platform adaptation rules in the project code file includes: Identify platform compilation tags in the project code files; Identify the corresponding Vue single-file component in the project code file based on the platform compilation tags; The code of the Vue single-file component is parsed to obtain an abstract syntax tree; Identify code logic units in Vue single-file components that do not depend on a preset runtime platform and can be used in multiple platform environments to obtain common logic; Identify code logic units in Vue single-file components that depend on a preset runtime platform and are only applicable to a preset terminal environment, and obtain specific logic corresponding to the preset terminal environment; Based on the abstract syntax tree, establish the reference relationship between the abstract syntax tree nodes of the common logic and the specific logic and the abstract syntax tree nodes of the Vue single-file component, and obtain the cross-platform code mapping relationship.

[0017] In detail, the Vue single-file component is a code file with the .vue extension.

[0018] In detail, the platform conditional compilation tags are special code comments or preprocessing directives used to selectively retain or exclude platform-specific code blocks during compilation on different platforms. These tags are a key mechanism for achieving "one set of code, multiple platforms running," allowing developers to write platform-differentiated logic within the same codebase.

[0019] In detail, the step of parsing the code of the Vue single-file component to obtain an abstract syntax tree refers to splitting the Vue file into... <template>(template), <script>（脚本）、<style>（样式）三部分，分别生成 AST（抽象语法树），用于后续逻辑分析。

[0020] 本发明实施例中，通过对预先获取的项目代码文件进行代码解析并识别代码映射关系，得到抽象语法树和跨平台代码映射关系，为后续的重复逻辑检测后跨平台优化提供了结构化数据基础。

[0021] S2、通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果。

[0022] 本发明实施例中，所述通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果，包括：识别所述项目代码文件中的Vue2代码文件以及Vue3代码文件；基于所述抽象语法树识别所述Vue2代码文件中的重复代码块，得到重复代码块识别结果；分析所述Vue3代码文件中setup函数中通过ref、reactive声明的响应式状态的变量，得到响应式变量，并基于响应式变量识别Vue3代码文件中的数据请求逻辑、状态管理逻辑以及自定义钩子函数，得到逻辑复用点 ；利用预设的图注意力网络基于所述重复代码块识别结果及所述逻辑复用计算所有代码文件之间的逻辑相似度；汇总所有代码文件之间的逻辑相似度，得到重复检测结果。

[0023] 详细地，所述识别所述项目代码文件中的Vue2代码文件以及Vue3代码文件，可以是通过AST解析识别<script>标签中的options API特征（如data、methods、computed关键字）判断是否为Vue2代码；以及检测setup函数声明、<script setup>语法糖（Vue3 特有的单文件组件语法）或ref / reactive响应式 API 引用来判断是否为Vue3代码。

[0024] 详细地，所述基于所述抽象语法树识别所述Vue2代码文件中的重复代码块，可以是识别所述Vue2代码文件中重复的data、methods、computed块 。

[0025] 详细地，所述图注意力网络是图神经网络（GNN）的一种，其核心思想是通过注意力机制动态计算图中节点之间的关联权重，适用于处理非欧几里得数据（如代码AST的图结构）。

[0026] 详细地，所述利用预设的图注意力网络基于所述重复代码块识别结果及所述逻辑复用计算所有代码文件之间的逻辑相似度，可以是对任意两个代码块的图结构，计算匹配节点数与总节点数的比例，或重复代码块与总代码块的比例，乘以权重系数。

[0027] S3、根据所述重复检测结果确认所述项目代码文件中的重复代码，对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码。

[0028] 本发明实施例中，所述根据所述重复检测结果确认所述项目代码文件中的重复代码，包括：获取所述重复检测结果中任意两份代码文件之间的逻辑相似度；判断任意两份代码文件之间的逻辑相似度是否大于或等于预设的相似度阈值；若大于或等于所述相似度阈值，则判定为重复；若小于所述相似度阈值，则判定为不重复。

[0029] 本发明实施例中，所述获取所述重复检测结果中任意两份代码文件之间的逻辑相似度，包括：基于词法分析器将所述重复检测结果中的所有代码文件进行关键词符转化，得到转化结果；对所述转化结果进行占位符替换处理，得到替换结果；将所述替换结果分割为多个基本块；根据跳转语句构建基本块之间的控制流关系，得到控制流图；对所述控制流图进行节点合并处理，得到合并流图；计算所有合并流图之间的图相似度，得到所述逻辑相似度。

[0030] 详细地，所述基于词法分析器将所述重复检测结果中的所有代码文件进行关键词符转化，是指借助词法分析器把代码分解成一系列的 token，关键字、标识符、运算符等都包含在内。

[0031] 详细地，所述对所述转化结果进行占位符替换处理，是指把变量名、函数名替换成统一的占位符，例如将所有变量都用var表示，所有函数都用func表示。

[0032] 详细地，所述根据跳转语句构建基本块之间的控制流关系，可以是指识别调整语句（如if、for、return等）前后的基本块来构建控制流关系。

[0033] 详细地，所述对所述控制流图进行节点合并处理，是将连续的赋值语句合并成一个节点。

[0034] 详细地，所述计算所有合并流图之间的图相似度，可以是计算使两个图相同所需的最少编辑操作（如节点插入、删除、替换）次数，以及查找最大公共子图，以此作为相似度的度量。

[0035] 本发明实施例中，所述对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码，包括：提取所述重复代码的公共逻辑，将所述公共逻辑封装为Taro跨平台Hooks；识别所述重复代码的重复样式文件，将所述重复样式文件合并为跨平台样式变量；基于所述Taro 跨平台Hooks以及所述跨平台样式变量对所述重复代码进行代码替换，得到优化后代码。

[0036] 详细地，所述提取所述重复代码的公共逻辑，将所述公共逻辑封装为Taro跨平台Hooks，是通过AST(抽象语法树)解析和GAT模型分析重复代码块的AST结构，识别无平台依赖的通用逻辑（如参数校验、状态管理、数据转换），将公共逻辑封装为独立的跨平台 Hook，使用Vue3 Composition API规范导出可复用的函数或状态。

[0037] 详细地，Hook是一个在多种编程领域和框架中都使用的概念，用于在特定的事件或时机插入自定义代码或逻辑。

[0038] 详细地，所述识别所述重复代码的重复样式文件，是使用 CSS AST 解析器分析各平台样式文件（如.wxss、.acss、.css）。

[0039] 详细地，所述基于所述Taro 跨平台Hooks以及所述跨平台样式变量对所述重复代码进行代码替换。是使用组件化重构生成器遍历项目中的重复代码块，将公共逻辑替换为对应的 Hook 调用。

[0040] S4、通过识别所述重复代码中的重复逻辑块提取出可复用组件，根据Taro的条件编译逻辑，为跨平台组件生成不同平台的实现模板，得到多端适配组件模板。

[0041] 本发明实施例中，所述通过识别所述重复代码中的重复逻辑块提取出可复用组件，可以是从重复的Vue逻辑块中提取通用组件或 Composition 函数（如将重复的表单组件封装为BaseForm组件，或提取校验逻辑为useFormValidation函数），并自动生成组件的Props定义、事件发射逻辑（如emit('submit')）及响应式依赖（如ref变量绑定）。

[0042] 本发明实施例中，所述根据Taro的条件编译逻辑，为跨平台组件生成不同平台的实现模板，得到多端适配组件模板，可以是根据 Taro 的条件编译逻辑，为跨平台组件生成不同平台的实现模板，例如生成BaseButton.weapp.tsx（微信小程序版本）和BaseButton.h5.tsx（H5 版本），通过条件编译引用对应模板，确保不同平台的渲染和交互一致性。

[0043] S5、将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码。

[0044] 本发明实施例中，所述将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码，是利用可复用组件或 Composition 函数替换原重复代码块，更新组件引用路径及参数传递逻辑。例如，将多个页面中重复的搜索栏逻辑替换为<SearchComponent / >组件调用；以及将生成的多端组件模板整合到项目中，通过 Taro 的条件编译指令（如#ifdef）引用对应平台代码，确保打包时生成各平台专属产物；并且自动检查重构后的代码中ref / reactive的依赖关系，修正可能的响应式中断（如遗漏的watch监听），最后生成符合 Vue3 Composition API 规范或Vue2 Mixin 模式的重构代码，兼容多端平台，且通过 响应式数据流完整性校验。

[0045] 本发明实施例中，所述将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码之后，所述方法还包括：将所述重构代码跨平台部署到各小程序平台的开发者工具沙箱；利用所述开发者工具沙箱基于所述重构代码运行自动化测试用例，得到重构运行结果；利用所述开发者工具沙箱基于所述项目代码文件运行所述自动化测试用例，得到原始运行结果；判断所述重构运行结果与所述原始运行结果是否一致；若一致，则确认代码重构完成；若不一致，则向预设的开发人员客户端发送错误信息。

[0046] 可见，在上述方案中，先对 Taro 项目代码文件开展解析工作，识别其中的平台编译标记，以此确定对应的 Vue 单文件组件。接着，把 Vue 文件拆分成模板、脚本、样式这三部分，分别生成抽象语法树（AST）。随后，识别组件间的公共逻辑与特定逻辑，进而构建跨平台代码映射关系。针对 Vue2 和 Vue3 代码文件，采用不同的策略进行处理。对于 Vue2 代码，识别其中重复的 data、methods、computed 块；对于 Vue3 代码，则分析 setup 函数中的响应式变量，识别逻辑复用点。然后，运用图注意力网络计算所有代码文件间的逻辑相似度，汇总得到重复检测结果。依据重复检测结果，当代码文件间的逻辑相似度大于或等于预设阈值时，判定为重复代码。对这些重复代码进行处理，提取公共逻辑封装成 Taro 跨平台Hooks，合并重复的样式文件为跨平台样式变量，最后进行代码替换，得到优化后的代码。从重复代码里提取可复用组件，像将重复的表单组件封装成 BaseForm 组件，或者把校验逻辑提取为 useFormValidation 函数等。同时，依据 Taro 的条件编译逻辑，生成多端适配组件模板，利用提取出的可复用组件和生成的多端适配组件模板对优化后的代码进行重构。重构完成后，将重构代码跨平台部署到各小程序平台的开发者工具沙箱中运行自动化测试用例，把得到的重构运行结果与基于原始项目代码文件运行测试用例得到的原始运行结果进行对比。若两者一致，就确认代码重构完成；若不一致，则向预设的开发人员客户端发送错误信息，提高了代码重复检测及组件化重构的效率。

[0047] 应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

[0048] 在一实施例中，提供一种多端代码重复检测及组件重构装置，该多端代码重复检测及组件重构装置与上述实施例中多端代码重复检测及组件重构方法一一对应。如图3所示，该多端代码重复检测及组件重构装置包括关系映射模块101、逻辑检测模块102、代码优化模块103、模板生成模块104、代码重构模块105。各功能模块详细说明如下：关系映射模块101，用于对预先获取的项目代码文件进行代码解析并识别代码映射关系，得到抽象语法树和跨平台代码映射关系；逻辑检测模块102，用于通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果；代码优化模块103，用于根据所述重复检测结果确认所述项目代码文件中的重复代码，对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码；模板生成模块104，用于通过识别所述重复代码中的重复逻辑块提取出可复用组件，根据Taro的条件编译逻辑，为跨平台组件生成不同平台的实现模板，得到多端适配组件模板；代码重构模块105，用于将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码。

[0049] 在一实施例中，关系映射模块101，在执行所述对预先获取的项目代码文件进行代码解析并识别代码映射关系，得到抽象语法树和跨平台代码映射关系时，具体用于：识别所述项目代码文件中的平台编译标记；根据所述平台编译标记识别所述项目代码文件中对应的Vue单文件组件；对所述Vue单文件组件进行代码解析，得到抽象语法树；识别Vue单文件组件中不依赖预设运行平台、可在多端环境通用的代码逻辑单元，得到公共逻辑；识别Vue单文件组件中依赖于预设运行平台、仅适用于预设终端环境的代码逻辑单元，得到与所述预设终端环境对应的特定逻辑；根据所述抽象语法树建立所述公共逻辑以及所述特定逻辑的抽象语法树节点与所述Vue单文件组件的抽象语法树节点的引用关系，得到跨平台代码映射关系。

[0050] 在一实施例中，逻辑检测模块102，在执行所述通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果时，具体用于：识别所述项目代码文件中的Vue2代码文件以及Vue3代码文件；基于所述抽象语法树识别所述Vue2代码文件中的重复代码块，得到重复代码块识别结果；分析所述Vue3代码文件中setup函数中通过ref、reactive声明的响应式状态的变量，得到响应式变量，并基于响应式变量识别Vue3代码文件中的数据请求逻辑、状态管理逻辑以及自定义钩子函数，得到逻辑复用点 ；利用预设的图注意力网络基于所述重复代码块识别结果及所述逻辑复用计算所有代码文件之间的逻辑相似度；汇总所有代码文件之间的逻辑相似度，得到重复检测结果。

[0051] 在一实施例中，代码优化模块102，在执行所述根据所述重复检测结果确认所述项目代码文件中的重复代码时，具体用于：获取所述重复检测结果中任意两份代码文件之间的逻辑相似度；判断任意两份代码文件之间的逻辑相似度是否大于或等于预设的相似度阈值；若大于或等于所述相似度阈值，则判定为重复；若小于所述相似度阈值，则判定为不重复。

[0052] 在一实施例中，代码优化模块102，在执行所述获取所述重复检测结果中任意两份代码文件之间的逻辑相似度时，具体用于：基于词法分析器将所述重复检测结果中的所有代码文件进行关键词符转化，得到转化结果；对所述转化结果进行占位符替换处理，得到替换结果；将所述替换结果分割为多个基本块；根据跳转语句构建基本块之间的控制流关系，得到控制流图；对所述控制流图进行节点合并处理，得到合并流图；计算所有合并流图之间的图相似度，得到所述逻辑相似度。

[0053] 在一实施例中，代码优化模块105，在执行所述对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码时，具体用于：提取所述重复代码的公共逻辑，将所述公共逻辑封装为Taro跨平台Hooks；识别所述重复代码的重复样式文件，将所述重复样式文件合并为跨平台样式变量；基于所述Taro 跨平台Hooks以及所述跨平台样式变量对所述重复代码进行代码替换，得到优化后代码。

[0054] 在一实施例中，代码优化模块105，在执行所述将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码之后，还用于：将所述重构代码跨平台部署到各小程序平台的开发者工具沙箱；利用所述开发者工具沙箱基于所述重构代码运行自动化测试用例，得到重构运行结果；利用所述开发者工具沙箱基于所述项目代码文件运行所述自动化测试用例，得到原始运行结果；判断所述重构运行结果与所述原始运行结果是否一致；若一致，则确认代码重构完成；若不一致，则向预设的开发人员客户端发送错误信息。

[0055] 本发明提供了一种多端代码重复检测及组件重构装置，先对 Taro 项目代码文件开展解析工作，识别其中的平台编译标记，以此确定对应的 Vue 单文件组件。接着，把 Vue文件拆分成模板、脚本、样式这三部分，分别生成抽象语法树（AST）。随后，识别组件间的公共逻辑与特定逻辑，进而构建跨平台代码映射关系。针对 Vue2 和 Vue3 代码文件，采用不同的策略进行处理。对于 Vue2 代码，识别其中重复的 data、methods、computed 块；对于Vue3 代码，则分析 setup 函数中的响应式变量，识别逻辑复用点。然后，运用图注意力网络计算所有代码文件间的逻辑相似度，汇总得到重复检测结果。依据重复检测结果，当代码文件间的逻辑相似度大于或等于预设阈值时，判定为重复代码。对这些重复代码进行处理，提取公共逻辑封装成 Taro 跨平台 Hooks，合并重复的样式文件为跨平台样式变量，最后进行代码替换，得到优化后的代码。从重复代码里提取可复用组件，像将重复的表单组件封装成 BaseForm 组件，或者把校验逻辑提取为 useFormValidation 函数等。同时，依据Taro 的条件编译逻辑，生成多端适配组件模板，利用提取出的可复用组件和生成的多端适配组件模板对优化后的代码进行重构。重构完成后，将重构代码跨平台部署到各小程序平台的开发者工具沙箱中运行自动化测试用例，把得到的重构运行结果与基于原始项目代码文件运行测试用例得到的原始运行结果进行对比。若两者一致，就确认代码重构完成；若不一致，则向预设的开发人员客户端发送错误信息，提高了代码重复检测及组件化重构的效率。

[0056] 关于多端代码重复检测及组件重构装置的具体限定可以参见上文中对于多端代码重复检测及组件重构处方法的限定，在此不再赘述。上述多端代码重复检测及组件重构装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

[0057] 在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务端，其内部结构图可以如图4所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性和 / 或易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的客户端通过网络连接通信。该计算机程序被处理器执行时以实现一种多端代码重复检测及组件重构方法服务端侧的功能或步骤。

[0058] 在一个实施例中，提供了一种计算机设备，该计算机设备可以是客户端，其内部结构图可以如图5所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机程序被处理器执行时以实现一种多端代码重复检测及组件重构方法客户端侧的功能或步骤在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：对预先获取的项目代码文件进行代码解析并识别代码映射关系，得到抽象语法树和跨平台代码映射关系；通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果；根据所述重复检测结果确认所述项目代码文件中的重复代码，对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码；通过识别所述重复代码中的重复逻辑块提取出可复用组件，根据Taro的条件编译逻辑，为跨平台组件生成不同平台的实现模板，得到多端适配组件模板；将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码。

[0059] 在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：对预先获取的项目代码文件进行代码解析并识别代码映射关系，得到抽象语法树和跨平台代码映射关系；通过根据所述抽象语法树以及所述跨平台代码映射关系计算所述项目代码文件之间的代码逻辑相似度来确认重复检测结果，得到重复检测结果；根据所述重复检测结果确认所述项目代码文件中的重复代码，对所述重复代码进行公共逻辑提取和重复样式合并，得到优化后代码；通过识别所述重复代码中的重复逻辑块提取出可复用组件，根据Taro的条件编译逻辑，为跨平台组件生成不同平台的实现模板，得到多端适配组件模板；将所述多端适配组件模板整合到所述优化后代码中，并利用所述可复用组件替换所述优化后代码中的重复代码，得到重构代码。

[0060] 需要说明的是，上述关于计算机可读存储介质或计算机设备所能实现的功能或步骤，可对应参阅前述方法实施例中，服务端侧以及客户端侧的相关描述，为避免重复，这里不再一一描述。

[0061] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和 / 或易失性存储器。非易失性存储器可包括只读存储器（ROM）、可编程ROM（PROM）、电可编程ROM（EPROM）、电可擦除可编程ROM（EEPROM）或闪存。易失性存储器可包括随机存取存储器（RAM）或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM（SRAM）、动态RAM（DRAM）、同步DRAM（SDRAM）、双数据率SDRAM（DDRSDRAM）、增强型SDRAM（ESDRAM）、同步链路（Synchlink） DRAM（SLDRAM）、存储器总线（Rambus）直接RAM（RDRAM）、直接存储器总线动态RAM（DRDRAM）、以及存储器总线动态RAM（RDRAM）等。

[0062] 所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

[0063] 最后应说明的是，申请实施例中若出现了非本公司的软件工具或组件，仅仅是用于举例介绍，并不代表实际使用。以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。< / script> < / template>

Claims

1. A method for multi-terminal code duplication detection and component refactoring, characterized in that, include: The code is parsed from the pre-acquired project code files, and the code mapping relationship between logic and structure in the project code files is identified. This yields the cross-platform code mapping relationship between the abstract syntax tree of Vue single-file components and multi-platform adaptation rules in the project code files. The duplicate detection results are obtained by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationship. Based on the duplicate detection results, duplicate code in the project code file is identified. Common logic is extracted and duplicate styles are merged from the duplicate code to obtain optimized code. By identifying repetitive logic blocks in the repetitive code, reusable components are extracted. Based on Taro's conditional compilation logic, implementation templates for different platforms are generated for cross-platform components, resulting in multi-platform adapted component templates. The multi-terminal adaptation component template is integrated into the optimized code, and the reusable component is used to replace the duplicate code in the optimized code to obtain the refactored code.

2. The multi-terminal code duplication detection and component reconstruction method as described in claim 1, characterized in that, The step of parsing the pre-acquired project code files and identifying the code mapping relationship between logic and structure in the project code files to obtain the cross-platform code mapping relationship between the abstract syntax tree of Vue single-file components and multi-platform adaptation rules in the project code files includes: Identify platform compilation tags in the project code files; Identify the corresponding Vue single-file component in the project code file based on the platform compilation tags; The code of the Vue single-file component is parsed to obtain an abstract syntax tree; Identify code logic units in Vue single-file components that do not depend on a preset runtime platform and can be used in multiple platform environments to obtain common logic; Identify code logic units in Vue single-file components that depend on a preset runtime platform and are only applicable to a preset terminal environment, and obtain specific logic corresponding to the preset terminal environment; Based on the abstract syntax tree, establish the reference relationship between the abstract syntax tree nodes of the common logic and the specific logic and the abstract syntax tree nodes of the Vue single-file component, and obtain the cross-platform code mapping relationship.

3. The multi-terminal code duplication detection and component reconstruction method as described in claim 1, characterized in that, The process of determining duplicate detection results by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationship, and obtaining duplicate detection results, includes: Identify Vue2 and Vue3 code files within the project's code files; Based on the abstract syntax tree, duplicate code blocks in the Vue2 code file are identified to obtain the duplicate code block identification result; Analyze the reactive state variables declared by ref and reactive in the setup function of the Vue3 code file to obtain reactive variables, and identify the data request logic, state management logic and custom hook functions in the Vue3 code file based on the reactive variables to obtain logic reuse points; The logical similarity between all code files is calculated using a pre-defined graph attention network based on the results of the duplicate code block identification and the logical reuse. The logical similarity between all code files is summarized to obtain the duplicate detection results.

4. The multi-terminal code duplication detection and component reconstruction method as described in claim 1, characterized in that, The step of confirming duplicate code in the project code file based on the duplicate detection result includes: Obtain the logical similarity between any two code files in the duplicate detection results; Determine whether the logical similarity between any two code files is greater than or equal to a preset similarity threshold; If the similarity is greater than or equal to the similarity threshold, it is determined to be a duplicate; If the similarity is less than the threshold, it is determined to be non-repeating.

5. The multi-terminal code duplication detection and component reconstruction method as described in claim 4, characterized in that, The step of obtaining the logical similarity between any two code files in the duplicate detection results includes: The lexical analyzer is used to transform the keywords in all the code files in the duplicate detection results to obtain the transformation results. The conversion result is processed by replacing placeholders to obtain the replacement result; The replacement result is divided into multiple basic blocks; The control flow graph is obtained by constructing the control flow relationships between basic blocks based on jump statements; The control flow graph is then subjected to node merging processing to obtain a merged flow graph; Calculate the graph similarity between all merged flow graphs to obtain the logical similarity.

6. The multi-terminal code duplication detection and component reconstruction method as described in claim 1, characterized in that, The process of extracting common logic and merging repetitive patterns from the duplicated code to obtain optimized code includes: Extract the common logic from the repeated code and encapsulate it into Taro cross-platform Hooks; Identify duplicate style files containing the duplicate code and merge the duplicate style files into cross-platform style variables; Based on the Taro cross-platform Hooks and the cross-platform style variables, the duplicate code is replaced to obtain optimized code.

7. The multi-terminal code duplication detection and component refactoring method as described in claim 6, characterized in that, After integrating the multi-terminal adaptation component template into the optimized code and replacing duplicate code in the optimized code with the reusable component to obtain the refactored code, the method further includes: Deploy the refactored code across platforms to the developer tool sandbox of various mini-program platforms; The developer tool sandbox is used to run automated test cases based on the refactored code to obtain the refactoring results; The automated test cases are run using the developer tool sandbox based on the project code files to obtain the raw execution results. Determine whether the reconstructed result is consistent with the original result; If they match, then the code refactoring is confirmed to be complete; If there is a discrepancy, an error message is sent to the default developer client.

8. A multi-terminal code duplication detection and component reconstruction device, characterized in that, include: The relation mapping module is used to parse the pre-acquired project code files and identify code mapping relationships to obtain an abstract syntax tree and cross-platform code mapping relationships. The logic detection module is used to confirm the duplicate detection results by calculating the code logic similarity between the project code files based on the abstract syntax tree and the cross-platform code mapping relationship, and to obtain the duplicate detection results. The code optimization module is used to identify duplicate code in the project code file based on the duplicate detection results, extract common logic and merge duplicate styles in the duplicate code to obtain optimized code. The template generation module is used to extract reusable components by identifying repetitive logic blocks in the repetitive code, and generate implementation templates for different platforms for cross-platform components based on Taro's conditional compilation logic, thus obtaining multi-platform adapted component templates. The code refactoring module is used to integrate the multi-terminal adaptation component template into the optimized code, and use the reusable components to replace the duplicate code in the optimized code to obtain the refactored code.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the multi-terminal code duplication detection and component reconstruction method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the steps of the multi-terminal code duplication detection and component reconstruction method as described in any one of claims 1 to 7.

Images