CN114860250A

Movatterモバイル変換

Info

Publication number: CN114860250A
Application number: CN202210446918.3A
Authority: CN
Inventors: 黄康
Original assignee: Ping An Puhui Enterprise Management Co Ltd
Current assignee: Ping An Puhui Enterprise Management Co Ltd
Priority date: 2022-04-26
Filing date: 2022-04-26
Publication date: 2022-08-05

Abstract

Translated fromChinese

本发明涉及人工智能技术，揭露了一种组件拆分方法，包括：构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件，基于展示关系从所述待拆分组件中拆分出至少两个互斥内容，将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件，对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。此外，本发明还涉及区块链技术，所述前端项目可从区块链的节点中获取。本发明还提出一种组件拆分装置、电子设备以及可读存储介质。本发明可以解决组件拆分困难的问题。

The invention relates to artificial intelligence technology, and discloses a component splitting method, which includes: constructing a component splitting project of a front-end project, finding out a component to be split from the front-end project according to the component splitting project, and based on the display relationship Split at least two mutually exclusive contents from the component to be split, migrate the code logic in the at least two mutually exclusive contents to a preset file, and obtain at least two independent subcomponents. A reference operation is performed on an independent subcomponent to obtain a front-end project containing a reference relationship. In addition, the present invention also relates to blockchain technology, and the front-end items can be obtained from the nodes of the blockchain. The present invention also provides a component splitting device, an electronic device and a readable storage medium. The present invention can solve the problem of difficulty in disassembling components.

Description

Translated fromChinese

组件拆分方法、装置、电子设备及可读存储介质Component disassembly method, device, electronic device and readable storage medium

技术领域technical field

本发明涉及人工智能技术领域，尤其涉及一种组件拆分方法、装置、电子设备及可读存储介质。The present invention relates to the technical field of artificial intelligence, and in particular, to a component splitting method, apparatus, electronic device and readable storage medium.

背景技术Background technique

目前在国内前端行业内，广泛使用前端框架进行前端项目开发，例如vue框架，一个前端项目从开始搭建，到后期不断迭代增加功能维护，通常会在原来定义好的组件内，不断添加新的功能，使得原先开发者定义好的组件，原本只是一个非常单一的功能，到了后期变得非常复杂和难以维护。而后面的开发者，由于只是在原来的组件内新增一些功能，所以往往很少会去考虑将现有的庞大的单个组件进行拆分，因为这个工作，不仅需要开发者重新梳理现有的组件逻辑，找到可以拆分的部分，进行组件的二次拆分工作，效率底下的同时还可能影响到原有的功能，所以大部分后续的开发者都不愿意对现有的庞大组件做二次拆分的工作。而对于测试人员来说，开发进行大规模的组件二次拆分改造，这就意味着当前版本的测试工作，从功能的新增测试，变成了原有功能+新增功能的测试，测试案例可能翻几倍不止，且人为拆分就避免不了出现一些如语法、业务场景不熟悉，最终导致功能异常的问题发生，使得前端项目的可维护性越来越差。At present, in the domestic front-end industry, front-end frameworks are widely used for front-end project development, such as the vue framework. A front-end project is built from the beginning, and iteratively increases the function maintenance in the later stage. Usually, new functions are continuously added to the originally defined components. , so that the component defined by the original developer was originally a very single function, but it became very complex and difficult to maintain in the later stage. The latter developers, because they only add some functions to the original components, often seldom consider splitting the existing huge single components, because this work not only requires developers to reorganize the existing Component logic, find the parts that can be split, and perform secondary splitting of components, which may affect the original functions while being inefficient. Therefore, most subsequent developers are unwilling to do secondary work on existing huge components. subdivided work. For testers, the development of large-scale secondary splitting and transformation of components means that the testing work of the current version has changed from the new function test to the original function + new function test, test The case may be more than doubled, and artificial division will inevitably lead to some unfamiliar grammar and business scenarios, which will eventually lead to abnormal functions, making the maintainability of front-end projects worse and worse.

综上所述，现有技术中，存在项目中单个组件代码变得越发庞大且维护性较差，组件拆分效率低下的问题，同时后期开发新的功能、排查问题、代码的可阅读性都会是一个大的问题。因此亟需一种可以对组件进行拆分的方法。To sum up, in the existing technology, there are problems that the code of a single component in the project becomes more and more large and the maintainability is poor, and the efficiency of component splitting is low. At the same time, the later development of new functions, troubleshooting, and code readability will is a big problem. Therefore, there is an urgent need for a method that can split components.

发明内容SUMMARY OF THE INVENTION

本发明提供一种组件拆分方法、装置、电子设备及可读存储介质，其主要目的在于解决组件拆分困难的问题。The present invention provides a component disassembly method, device, electronic device and readable storage medium, the main purpose of which is to solve the problem of difficulty in component disassembly.

为实现上述目的，本发明提供的一种组件拆分方法，包括：To achieve the above object, a component splitting method provided by the present invention includes:

构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件；constructing a component splitting project of the front-end project, and finding the component to be split from the front-end project according to the component splitting project;

基于展示关系从所述待拆分组件中拆分出至少两个互斥内容；Splitting at least two mutually exclusive contents from the component to be split based on the display relationship;

将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件；Migrating the code logic in the at least two mutually exclusive contents to a preset file to obtain at least two independent subcomponents;

对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。A reference operation is performed on the at least two independent subcomponents to obtain a front-end project including a reference relationship.

可选地，所述构建前端项目的组件拆分项目，包括：Optionally, the component splitting project for constructing the front-end project includes:

定位所述前端项目的根目录，在所述根目录中添加组件拆分工具；Locate the root directory of the front-end project, and add a component splitting tool in the root directory;

在所述组件拆分工具中设置拆分配置文件，并在添加完拆分配置文件的根目录中添加组件拆分命令，执行所述组件拆分命令，得到所述组件拆分项目。A splitting configuration file is set in the component splitting tool, and a component splitting command is added in the root directory where the splitting configuration file is added, and the component splitting command is executed to obtain the component splitting item.

可选地，所述根据所述组件拆分项目从所述前端项目中查找出待拆分组件，包括：Optionally, finding out the component to be split from the front-end project according to the component splitting project, including:

根据所述组件拆分项目遍历所述前端项目的项目目录；Traverse the project directory of the front-end project according to the component split project;

从遍历到的项目目录中查找出包含预设后缀地址的组件作为所述待拆分组件。Find the component containing the preset suffix address from the traversed project directory as the component to be split.

可选地，所述基于展示关系从所述待拆分组件中拆分出至少两个互斥内容，包括：Optionally, the at least two mutually exclusive contents are split from the component to be split based on the display relationship, including:

查找所述待拆分组件中的展示互斥标签；Find the display mutually exclusive label in the component to be split;

将所述展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容。The content in the display mutually exclusive tag is split to obtain the at least two mutually exclusive contents.

可选地，所述将所述展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容，包括：Optionally, splitting the content in the display mutually exclusive label to obtain the at least two mutually exclusive contents, including:

判断所述展示互斥标签中层级标签的数量是否大于预设的层级数；judging whether the number of level labels in the display mutually exclusive labels is greater than a preset number of levels;

若所述展示互斥标签中层级标签的数量不大于所述预设的层级数，则将每个展示互斥标签内的所有内容作为互斥内容，得到所述至少两个互斥内容；If the number of level labels in the display mutually exclusive labels is not greater than the preset number of levels, then all contents in each display mutually exclusive label are regarded as mutually exclusive contents to obtain the at least two mutually exclusive contents;

若所述展示互斥标签中层级标签的数量大于所述预设的层级数，则按照所述预设的层级数对每个展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容。If the number of level labels in the display mutually exclusive labels is greater than the preset number of levels, the content in each display mutually exclusive label is split according to the preset number of levels to obtain the at least two Mutually exclusive content.

可选地，所述将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件，包括：Optionally, the code logic in the at least two mutually exclusive contents is migrated to a preset file to obtain at least two independent subcomponents, including:

查找所述互斥内容中的事件关键词，并提取查找到的事件关键词对应的事件函数；Find the event keyword in the mutually exclusive content, and extract the event function corresponding to the found event keyword;

查找所述互斥内容中的全局变量关键词，并提取查找到的全局变量关键词对应的全局变量；Searching for the global variable keyword in the mutually exclusive content, and extracting the global variable corresponding to the found global variable keyword;

查找所述互斥内容中的插值关键词，并提取查找到的插值关键词对应的插值表达式；Searching for interpolation keywords in the mutually exclusive content, and extracting interpolation expressions corresponding to the found interpolation keywords;

查找所述互斥内容中的样式代码，并提取查找到的样式代码；Find the style code in the mutually exclusive content, and extract the found style code;

将不同互斥内容中的所述事件函数、所述全局变量、所述插值表达式及所述样式代码迁移至不同互斥内容对应的预设文件中，得到所述至少两个独立子组件。The at least two independent subcomponents are obtained by migrating the event function, the global variable, the interpolation expression and the style code in different mutually exclusive contents to preset files corresponding to different mutually exclusive contents.

可选地，所述对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目，包括：Optionally, performing a reference operation on the at least two independent subcomponents to obtain a front-end project containing a reference relationship, including:

通过引入语法将所述至少两个独立子组件引入到所述前端项目的根目录中，并对所述前端项目进行注册声明，得到标准前端项目；The at least two independent subcomponents are introduced into the root directory of the front-end project by introducing syntax, and the front-end project is registered and declared to obtain a standard front-end project;

在所述标准前端项目中添加子组件标签，并建立所述子组件标签与所述至少两个独立子组件的跳转连接，得到包含引用关系的前端项目。A sub-component label is added to the standard front-end project, and a jump connection between the sub-component label and the at least two independent sub-components is established to obtain a front-end project including a reference relationship.

为了解决上述问题，本发明还提供一种组件拆分装置，所述装置包括：In order to solve the above problems, the present invention also provides a component disassembly device, the device includes:

组件拆分项目构建模块，用于构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件；a component splitting project building module, used for constructing a component splitting project of a front-end project, and finding the component to be split from the front-end project according to the component splitting project;

互斥内容拆分模块，用于基于展示关系从所述待拆分组件中拆分出至少两个互斥内容；A mutually exclusive content splitting module, configured to split at least two mutually exclusive contents from the components to be split based on the display relationship;

代码迁移模块，用于将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件；a code migration module, configured to migrate the code logic in the at least two mutually exclusive contents to a preset file to obtain at least two independent subcomponents;

子组件引用模块，用于对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。The subcomponent reference module is configured to perform a reference operation on the at least two independent subcomponents to obtain a front-end project including a reference relationship.

为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：In order to solve the above problems, the present invention also provides an electronic device, the electronic device includes:

存储器，存储至少一个计算机程序；及a memory that stores at least one computer program; and

处理器，执行所述存储器中存储的计算机程序以实现上述所述的组件拆分方法。The processor executes the computer program stored in the memory to implement the component splitting method described above.

为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的组件拆分方法。In order to solve the above problems, the present invention also provides a computer-readable storage medium, where at least one computer program is stored in the computer-readable storage medium, and the at least one computer program is executed by a processor in an electronic device to realize the above-mentioned The component splitting method described above.

本发明通过直接在前端项目中构建组件拆分项目，基于展示关系从待拆分组件中拆分出至少两个互斥内容，将至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件，并通过对至少两个独立子组件进行引用操作，无需人工梳理逻辑进行组件拆分，大大提高了组件拆分的效率。同时，对待拆分组件中不同内容的组件进行拆分，可以将庞大的单个组件中的内容独立成有引用关系的子组件，大大提高了开发的可维护性及可扩展性。因此本发明提出的组件拆分方法、装置、电子设备及计算机可读存储介质，可以解决组件拆分困难的问题。The present invention directly constructs the component splitting project in the front-end project, splits at least two mutually exclusive contents from the components to be split based on the display relationship, and migrates the code logic in the at least two mutually exclusive contents to the preset file, At least two independent sub-components are obtained, and by performing a reference operation on the at least two independent sub-components, there is no need to manually sort out the logic for component splitting, which greatly improves the efficiency of component splitting. At the same time, by splitting the components with different contents in the components to be split, the contents in a huge single component can be separated into subcomponents with reference relationship, which greatly improves the maintainability and scalability of development. Therefore, the component splitting method, device, electronic device and computer-readable storage medium proposed by the present invention can solve the problem of difficult component splitting.

附图说明Description of drawings

图1为本发明一实施例提供的组件拆分方法的流程示意图；1 is a schematic flowchart of a component splitting method provided by an embodiment of the present invention;

图2为图1中其中一个步骤的详细实施流程示意图；Fig. 2 is a detailed implementation flow diagram of one of the steps in Fig. 1;

图3为图1中另一个步骤的详细实施流程示意图；Fig. 3 is the detailed implementation flow schematic diagram of another step in Fig. 1;

图4为图3中其中一个步骤的详细实施流程示意图；Fig. 4 is a detailed implementation flow diagram of one of the steps in Fig. 3;

图5为图1中另一个步骤的详细实施流程示意图；Fig. 5 is the detailed implementation flow schematic diagram of another step in Fig. 1;

图6为图1中另一个步骤的详细实施流程示意图；Fig. 6 is the detailed implementation flow schematic diagram of another step in Fig. 1;

图7为本发明一实施例提供的组件拆分装置的功能模块图；7 is a functional block diagram of a component splitting device provided by an embodiment of the present invention;

图8为本发明一实施例提供的实现所述组件拆分方法的电子设备的结构示意图。FIG. 8 is a schematic structural diagram of an electronic device implementing the component splitting method according to an embodiment of the present invention.

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。The realization, functional characteristics and advantages of the present invention will be further described with reference to the accompanying drawings in conjunction with the embodiments.

具体实施方式Detailed ways

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。It should be understood that the specific embodiments described herein are only used to explain the present invention, but not to limit the present invention.

本发明实施例提供一种组件拆分方法。所述组件拆分方法的执行主体包括但不限于服务端、终端等能够被配置为执行本发明实施例提供的该方法的电子设备中的至少一种。换言之，所述组件拆分方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。所述服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(ContentDelivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。Embodiments of the present invention provide a component splitting method. The execution subject of the component splitting method includes, but is not limited to, at least one of electronic devices that can be configured to execute the method provided by the embodiment of the present invention, such as a server and a terminal. In other words, the component splitting method can be executed by software or hardware installed in a terminal device or a server device, and the software can be a blockchain platform. The server includes but is not limited to: a single server, a server cluster, a cloud server or a cloud server cluster, and the like. The server can be an independent server, or can provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery network (Content Delivery Network) , CDN), and cloud servers for basic cloud computing services such as big data and artificial intelligence platforms.

参照图1所示，为本发明一实施例提供的组件拆分方法的流程示意图。Referring to FIG. 1 , it is a schematic flowchart of a component splitting method provided by an embodiment of the present invention.

在本实施例中，所述组件拆分方法包括以下步骤S1-S5：In this embodiment, the component splitting method includes the following steps S1-S5:

S1、构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件。S1. Construct a component splitting project of a front-end project, and find a component to be split from the front-end project according to the component splitting project.

本发明实施例中，所述前端项目是指通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的项目，例如，XXapp开发项目、XX公司官网开发项目、XX产品页面开发项目、XX小程序开发项目等。In the embodiment of the present invention, the front-end project refers to a project that realizes the user interface interaction of Internet products through HTML, CSS, JavaScript and various derived technologies, frameworks, and solutions, for example, XXapp development project, XX company Official website development project, XX product page development project, XX applet development project, etc.

详细地，参照图2所示，所述构建前端项目的组件拆分项目，包括以下步骤S10-S11：In detail, as shown in FIG. 2 , the component splitting project for constructing the front-end project includes the following steps S10-S11:

S10、定位所述前端项目的根目录，在所述根目录中添加组件拆分工具；S10, locate the root directory of the front-end project, and add a component splitting tool in the root directory;

S11、在所述组件拆分工具中设置拆分配置文件，并在添加完拆分配置文件的根目录中添加组件拆分命令，执行所述组件拆分命令，得到所述组件拆分项目。S11. Set a split configuration file in the component split tool, add a component split command in the root directory where the split configuration file is added, and execute the component split command to obtain the component split item.

本发明实施例中，所述组件拆分项目用来在前端页面中执行下述S2至S4的步骤来将组件进行拆分。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmivue-component-mini-tool-D，则可以添加组件拆分工具到当前框架项目中，设置拆分配置文件config.js，在拆分配置文件中添加组件拆分命令：npm run component-mini并执行，得到组件拆分项目，其中，拆分配置文件中的配置内容包括：需要进行精细化拆分组件的vue组件地址等。In the embodiment of the present invention, the component splitting item is used to perform the following steps S2 to S4 in the front-end page to split the components. For example, on the command line (the mac system is the terminal), locate the root directory of the current front-end project, and execute the command: npmivue-component-mini-tool-D, you can add the component splitting tool to the current framework project and set the split configuration file config.js, add the component splitting command in the split configuration file: npm run component-mini and execute it to get the component split project, where the configuration content in the split configuration file includes: vue component address, etc.

本发明一可选实施例中，通过组件拆分项目可以对前端项目中代码庞大的单个组件进行二次拆分。In an optional embodiment of the present invention, a single component with huge code in the front-end project can be split twice by splitting the project by components.

详细地，所述根据所述组件拆分项目从所述前端项目中查找出待拆分组件，包括：In detail, finding the component to be split from the front-end project according to the component splitting project includes:

本发明一可选实施例中，根据组件拆分项目中拆分配置文件config.js中所配置的配置项：需要进行精细化拆分组件的vue组件的地址，遍历前端项目的项目目录，从项目开发文件所在目录中查找组件地址，将包括后缀vue的地址的组件作为所述待拆分组件。In an optional embodiment of the present invention, the configuration items configured in the configuration file config.js are split according to the component splitting project: the address of the vue component that needs to be refined and split, traverse the project directory of the front-end project, and start from Find the component address in the directory where the project development file is located, and use the component including the address of the suffix vue as the component to be split.

S2、基于展示关系从所述待拆分组件中拆分出至少两个互斥内容。S2. Split at least two mutually exclusive contents from the component to be split based on the display relationship.

本发明实施例中，由于vue组件内部，通常存在需要选择性展示一些内容的功能，即互斥内容，比如A、B两段内容是互斥的展示关系，当展示A内容的时候，就不可以展示B内容；当展示B内容的时候，A内容就必须隐藏。对于这种情况，在template模板标签内，通过vue的指令将v-if及v-else成对配合使用，当v-if成立时，将需要展示的A内容编写在v-if所在的标签内部，用于A内容的展示；否则走v-else，将需要展示的B内容编写在v-else所在的标签内部，用于B内容的展示。In the embodiment of the present invention, because of the internal vue component, there is usually a function that needs to selectively display some content, that is, mutually exclusive content. For example, two pieces of content A and B have a mutually exclusive display relationship. When the content A is displayed, it is not B content can be displayed; when B content is displayed, A content must be hidden. In this case, in the template template tag, the v-if and v-else are used in pairs through the vue instruction. When the v-if is established, the A content that needs to be displayed is written inside the tag where the v-if is located. , used for the display of A content; otherwise, go to v-else, and write the B content that needs to be displayed inside the tag where the v-else is located for the display of B content.

具体地，参照图3所示，所述基于展示关系从所述待拆分组件中拆分出至少两个互斥内容，包括以下步骤S20-S21：Specifically, referring to FIG. 3 , splitting at least two mutually exclusive contents from the component to be split based on the display relationship includes the following steps S20-S21:

S20、查找所述待拆分组件中的展示互斥标签；S20, searching for the display mutually exclusive label in the component to be split;

S21、将所述展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容。S21. Split the content in the display mutually exclusive tags to obtain the at least two mutually exclusive contents.

本发明实施例中，对于v-if及v-else两个互斥标签，里面的内容没有交集，里面所有事件如点击、输入框失去焦点等等，都是各自独立的使用方法，所以当两块内容比较庞大的时候，可以将两个互斥标签中的内容拆分成两个独立的互斥内容。In the embodiment of the present invention, for the two mutually exclusive tags v-if and v-else, the contents in them do not intersect, and all events in them, such as clicks, input boxes losing focus, etc., are independent methods of use, so when the two When the block content is relatively large, the content in the two mutually exclusive tags can be split into two independent mutually exclusive contents.

本发明实施例中，例如，首先查找在当前vue组件的template标签中，是否包含使用关键字标签v-html，如果没有，则说明该组件不存在使用父级动态传入html字符串展示内容的场景，如果有，则取出v-html属性的对应值，判断其取值是否来自于与父级组件传递，判断方式为，该变量是否包含在vue组件中props属性内部，如果在其内部，则说明是来自于父级组件的传递变量。如果成立，则说明是通过父级传递的方式，确定当前目标组件为所述待编译文件，如果不成立，则说明该v-html使用的场景，并不是通过父级传递的方式实现。In the embodiment of the present invention, for example, firstly, check whether the template tag of the current vue component contains the use of the keyword tag v-html, if not, it means that the component does not have the use of the parent to dynamically pass in the html string to display the content. In the scenario, if there is, take out the corresponding value of the v-html attribute, and judge whether its value comes from the transmission with the parent component. The judgment method is whether the variable is contained in the props attribute of the vue component. If it is inside, then The description is a passed variable from the parent component. If it is true, it means that the current target component is determined as the to-be-compiled file by means of parent transmission. If it is not true, it means that the scene used by the v-html is not implemented by means of parent transmission.

详细地，参照图4所示，所述将所述展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容，包括以下步骤S210-S212：In detail, referring to FIG. 4 , the splitting of the content in the display mutually exclusive label to obtain the at least two mutually exclusive contents includes the following steps S210-S212:

S210、判断所述展示互斥标签中层级标签的数量是否大于预设的层级数；S210, judging whether the number of level labels in the display mutually exclusive labels is greater than a preset number of levels;

若所述展示互斥标签中层级标签的数量不大于所述预设的层级数，则执行S211、将每个展示互斥标签内的所有内容作为互斥内容，得到所述至少两个互斥内容；If the number of level labels in the display mutually exclusive labels is not greater than the preset number of levels, then execute S211, take all the contents in each display mutually exclusive label as mutually exclusive content, and obtain the at least two mutually exclusive labels content;

若所述展示互斥标签中层级标签的数量大于所述预设的层级数，则执行S212、按照所述预设的层级数对每个展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容。If the number of level labels in the display mutually exclusive labels is greater than the preset number of levels, then perform S212 to split the content in each display mutually exclusive label according to the preset number of levels to obtain the At least two mutually exclusive content.

本发明一可选实施例中，通过查找当前.vue文件(即待拆分组件)中template标签内成对使用的v-if/v-else两种属性的标签，并判断v-if和v-else所在标签内，一共包含了多少层级的标签，若包含的层级标签不大于10个层级时，则直接将v-if/v-else两种属性的标签内的所有内容作为互斥内容，若包含的层级标签大于10个层级时，按照10个层级进行标签内容的抽取，得到互斥内容。In an optional embodiment of the present invention, the tags of the two attributes v-if/v-else used in pairs in the template tag in the current .vue file (ie the component to be split) are searched, and v-if and v are determined. How many levels of labels are included in the label where the -else is located. If the level of labels contained is not greater than 10 levels, all the content in the labels of the two attributes of v-if/v-else will be directly regarded as mutually exclusive content. If the included level labels are greater than 10 levels, the label content is extracted according to the 10 levels to obtain mutually exclusive content.

S3、将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件。S3. Migrate the code logic in the at least two mutually exclusive contents to a preset file to obtain at least two independent subcomponents.

本发明实施例中，所述预设文件可以为新的vue文件。例如，所述预设文件命名规则可以为：原.vue文件名称+下划线+component+当前抽离出组件的序号(如当前是抽离出的第一个，则为1)。In this embodiment of the present invention, the preset file may be a new vue file. For example, the preset file naming rule may be: original .vue file name + underscore + component + the serial number of the currently extracted component (if it is currently the first extracted component, it is 1).

详细地，参照图5所示，所述将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件，包括以下步骤S30-S34：In detail, referring to FIG. 5 , the code logic in the at least two mutually exclusive contents is migrated to a preset file to obtain at least two independent subcomponents, including the following steps S30-S34:

S30、查找所述互斥内容中的事件关键词，并提取查找到的事件关键词对应的事件函数；S30, search for the event keyword in the mutually exclusive content, and extract the event function corresponding to the found event keyword;

S31、查找所述互斥内容中的全局变量关键词，并提取查找到的全局变量关键词对应的全局变量；S31, search for the global variable keyword in the mutually exclusive content, and extract the global variable corresponding to the found global variable keyword;

S32、查找所述互斥内容中的插值关键词，并提取查找到的插值关键词对应的插值表达式；S32, search for the interpolation keyword in the mutually exclusive content, and extract the interpolation expression corresponding to the found interpolation keyword;

S33、查找所述互斥内容中的样式代码，并提取查找到的样式代码；S33, search for the style code in the mutually exclusive content, and extract the found style code;

S34、将不同互斥内容中的所述事件函数、所述全局变量、所述插值表达式及所述样式代码迁移至不同互斥内容对应的预设文件中，得到所述至少两个独立子组件。S34. Migrate the event function, the global variable, the interpolation expression, and the style code in different mutually exclusive contents to preset files corresponding to different mutually exclusive contents, and obtain the at least two independent children components.

本发明一可选实施例中，所述代码逻辑包括：事件函数、全局变量、插值表达式及样式代码，通过下述方式进行查找及迁移：In an optional embodiment of the present invention, the code logic includes: event functions, global variables, interpolation expressions and style codes, which are searched and migrated in the following ways:

1、查找互斥内容的整块html标签内部，是否包含使用到关于事件相关的关键字，如点击事件@click、输入事件@input、失去焦点事件@blur，如果包含，则说明该标签上存在绑定相应的事件函数，该函数都写在methods对象内部。当对整块html标签进行拆分成组件的时候，也需要同时将其相对应的事件函数一并抽离。方式如下：通过获取事件相关的关键字对应的属性值，如@click＝事件函数A名称，则相应的在vue文件的methods对象内，通过事件函数A名称，查找到对应的函数，将其迁移到新的.vue文件的methods对象中去；1. Check whether the entire html tag of mutually exclusive content contains keywords related to events, such as click event @click, input event @input, lost focus event @blur, if it is included, it means that the tag exists Bind the corresponding event function, which is written inside the methods object. When splitting a whole block of html tags into components, it is also necessary to extract the corresponding event functions at the same time. The method is as follows: By obtaining the attribute value corresponding to the event-related keyword, such as @click=the name of the event function A, then in the methods object of the vue file, the corresponding function is found and migrated through the name of the event function A. Go to the methods object of the new .vue file;

2、查找互斥内容的内部，是否包含使用到关于全局变量相关的关键字。方式如下：通过判断函数内，是否有通过this关键字，如this.变量A，进行全局变量A的读取操作，或者通过this关键字，如this.变量A＝XXX，进行全局变量A的改写操作。如果存在，则需要在新的.vue组件内部，data对象中，增加该全局变量。同时，在原组件中，判断该变量是否仅使用于已做迁移的函数内部，如果是，则可以将原组件中该变量做全部移除操作；2. Find the inside of the mutually exclusive content, whether it contains keywords related to the use of global variables. The method is as follows: by judging whether there is a read operation of the global variable A through the this keyword, such as this.variable A, or through the this keyword, such as this.variable A=XXX, the global variable A is rewritten operate. If it exists, you need to add the global variable inside the new .vue component, in the data object. At the same time, in the original component, determine whether the variable is only used inside the function that has been migrated. If so, you can remove all the variable in the original component;

3、查找在符合要求的整块html标签内部，是否包含使用到关于插值表达式相关的内容，具体关键字是通过双花括号形式包裹一个变量，如{{动态变量B}}，这种情况说明在页面html标签内部，还存在通过动态变量控制展示内容的情况。当html片段迁移成独立组件后，需要将其动态展示的变量，以及其对应控制变量变化的方法函数也一并迁移到新的.vue组件中去。方式如下：通过匹配在html片段内部的所有插值表达式变量，然后在原.vue组件内部的methods对象内，查找所有函数内部，存在通过关键字this.插值表达式变量＝XXX，进行插值表达式修改的方法函数，将相关的函数复制到对应的新的.vue文件中去，同时在新的.vue文件的data对象内，新增该全局变量。最后，判断所复制的方法函数，是否已经与原组件中其他全局变量、各种事件函数不再有所关联，如果没有关联，则可以在原vue组件内部进行删除操作；3. Find out whether the content related to the interpolation expression is included in the entire html tag that meets the requirements. The specific keyword is to wrap a variable in the form of double curly braces, such as {{dynamic variable B}}, in this case It shows that there is also a situation in which the display content is controlled by dynamic variables within the html tag of the page. When the html fragment is migrated into an independent component, the variables it displays dynamically and its corresponding methods and functions for controlling variable changes need to be migrated to the new .vue component. The method is as follows: By matching all the interpolation expression variables inside the html fragment, and then in the methods object inside the original .vue component, find all the functions inside, and modify the interpolation expression through the keyword this. interpolation expression variable = XXX method function, copy the relevant functions to the corresponding new .vue file, and add the global variable in the data object of the new .vue file. Finally, determine whether the copied method function is no longer associated with other global variables and various event functions in the original component. If not, you can delete it inside the original vue component;

4、由于迁移的整块html中，通常会包含css样式，而样式主要是通过在html标签内的id、class属性进行关联的，而关联的内容为当前vue文件中，style标签内的内容。当把整块html迁移出作为一个独立的组件的时候，也需要连同把样式的内容也一并迁移到新独立的组件中的style标签中去。方式如下：通过获取迁移出去的html片段中，所包含的所有id、class属性值，在原有的vue组件内的style标签内进行查找对应的属性值所对应的样式代码块，将其复制到新独立的vue组件中的style标签内去。最后判断所复制出去的样式代码块是否在原vue组件内的style标签内，如果不存在其他html标签的引用，则可以进行删除操作。4. Because the entire html to be migrated usually contains css styles, and the styles are mainly associated with the id and class attributes in the html tags, and the associated content is the content in the style tag in the current vue file. When migrating the whole block of html as an independent component, you also need to migrate the style content to the style tag in the new independent component. The method is as follows: by obtaining all the id and class attribute values contained in the migrated html fragment, find the style code block corresponding to the corresponding attribute value in the style tag in the original vue component, and copy it to the new Go inside the style tag in the independent vue component. Finally, determine whether the copied style code block is in the style tag in the original vue component. If there is no reference to other html tags, you can delete it.

S4、对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。S4. Perform a reference operation on the at least two independent subcomponents to obtain a front-end project including a reference relationship.

本发明实施例中，为了保证前端项目中组件的功能完整，对于独立出来的子组件需要和原组件(即待拆分组件)建立引用关系。In the embodiment of the present invention, in order to ensure the functional integrity of the components in the front-end project, it is necessary to establish a reference relationship with the original component (ie, the component to be split) for the independent subcomponent.

进一步地，参照图6所示，所述对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目，包括以下步骤S40-S41：Further, as shown in FIG. 6 , performing a reference operation on the at least two independent subcomponents to obtain a front-end project containing a reference relationship includes the following steps S40-S41:

S40、通过引入语法将所述至少两个独立子组件引入到所述前端项目的根目录中，并对所述前端项目进行注册声明，得到标准前端项目；S40, introducing the at least two independent subcomponents into the root directory of the front-end project by introducing a grammar, and performing a registration statement on the front-end project to obtain a standard front-end project;

S41、在所述标准前端项目中添加子组件标签，并建立所述子组件标签与所述至少两个独立子组件的跳转连接，得到包含引用关系的前端项目。S41. Add a sub-component label to the standard front-end project, and establish a jump connection between the sub-component label and the at least two independent sub-components, to obtain a front-end project including a reference relationship.

本发明一可选实施例中，例如，通过上述S1至S3步骤，得到两个独立子组件，然后需要在原组件(即待拆分组件)中对这两个独立出的子组件，进行引用操作。方式如下：In an optional embodiment of the present invention, for example, through the above steps S1 to S3, two independent subassemblies are obtained, and then a reference operation needs to be performed on the two independent subassemblies in the original assembly (ie, the assembly to be split). . The way is as follows:

1、在原组件中，通过import语法命令，将两个独立子组件通过其对应的项目中文件目录的地址，引入到原组件中来，并在原组件中的components对象中，进行引入组件的注册声明；1. In the original component, through the import syntax command, two independent subcomponents are introduced into the original component through the address of the file directory in their corresponding project, and the registration declaration of the imported component is performed in the components object in the original component. ;

2、将原来匹配出来的成对出现使用v-if/v-else这两种属性的标签的两个html片段进行删除，在原位置增加一个component标签(即子组件标签)，该标签中，设置一个动态属性is，如<component:is＝"动态值">，当该动态属性的值为引入组件注册申明所使用的名字(一般与组件文件名同名)一致时，就会展示该引入的变量；2. Delete the two html fragments that originally matched the tags using the two attributes of v-if/v-else, and add a component tag (ie, a sub-component tag) in the original position. In this tag, set A dynamic attribute is, such as <component:is="dynamic value">, when the value of the dynamic attribute is the same as the name used in the registration declaration of the imported component (usually the same name as the component file name), the imported variable will be displayed ;

3、由于原组件中页面片段的展示，是通过v-if/v-else对应的属性值来判断并展示的，现在需要改造为修改is属性对应的动态值来控制展示哪一个引入的组件。需要做如下改造：首先，取得v-if/v-else对应的属性值，然后对is属性对应的变量，在原组件的computed方法内，新增一个变量控制函数，该函数的内容为：“当v-if对应的属性值为true时，返回原v-if所在代码片段迁移出来的组件名称，否则返回原v-else所在代码片段迁移出来的组件名称”，从而建立器原组件与独立出来的组件间的引用关系。3. Since the display of page fragments in the original component is judged and displayed by the attribute value corresponding to v-if/v-else, it is now necessary to modify the dynamic value corresponding to the is attribute to control which imported component is displayed. The following modifications need to be made: First, obtain the attribute value corresponding to v-if/v-else, and then add a variable control function to the variable corresponding to the is attribute in the computed method of the original component. The content of the function is: "When When the value of the attribute corresponding to v-if is true, it returns the component name migrated from the code fragment where the original v-if is located, otherwise it returns the component name migrated from the code fragment where the original v-else is located", thus establishing the original component and the independent one. Reference relationships between components.

本发明通过直接在前端项目中构建组件拆分项目，并通过识别出标准传递方式转化项目的入口文件进行目标组件的查找，通过确定目标组件中的原始数据传递方式，并对原始数据传递方式中的待编译变量进行变量迁移，无需事后人工进行组件编译，大大提高了组件拆分的效率。同时，直接将目标组件中不同原始数据传递方式进行变量迁移，可以将不同目标组件的数据传递方式进行统一，提高了开发的可维护性及可扩展性。因此本发明提出的组件拆分方法，可以解决组件拆分困难的问题。The invention directly constructs the component split project in the front-end project, and searches for the target component by identifying the entry file of the conversion project in the standard transmission mode, determines the original data transmission mode in the target component, and compares the original data transmission mode to the original data transmission mode. The variables to be compiled can be migrated without manual component compilation afterwards, which greatly improves the efficiency of component splitting. At the same time, by directly migrating different original data transmission methods in target components, the data transmission methods of different target components can be unified, and the maintainability and scalability of development can be improved. Therefore, the component splitting method proposed by the present invention can solve the problem of difficult component splitting.

如图7所示，是本发明一实施例提供的组件拆分装置的功能模块图。As shown in FIG. 7 , it is a functional block diagram of a component splitting device provided by an embodiment of the present invention.

本发明所述组件拆分装置100可以安装于电子设备中。根据实现的功能，所述组件拆分装置100可以包括组件拆分项目构建模块101、互斥内容拆分模块102、代码迁移模块103及子组件引用模块104。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。Thecomponent disassembly device 100 of the present invention can be installed in electronic equipment. According to the implemented functions, thecomponent splitting apparatus 100 may include a component splittingproject building module 101 , a mutually exclusivecontent splitting module 102 , acode migration module 103 and asubcomponent reference module 104 . The modules in the present invention can also be called units, which refer to a series of computer program segments that can be executed by the electronic device processor and can perform fixed functions, and are stored in the memory of the electronic device.

在本实施例中，关于各模块/单元的功能如下：In this embodiment, the functions of each module/unit are as follows:

所述组件拆分项目构建模块101，用于构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件；The component splittingproject building module 101 is used to construct a component splitting project of a front-end project, and finds a component to be split from the front-end project according to the component splitting project;

所述互斥内容拆分模块102，用于基于展示关系从所述待拆分组件中拆分出至少两个互斥内容；The mutually exclusivecontent splitting module 102 is configured to split at least two mutually exclusive contents from the components to be split based on the display relationship;

所述代码迁移模块103，用于将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件；Thecode migration module 103 is configured to migrate the code logic in the at least two mutually exclusive contents to a preset file to obtain at least two independent subcomponents;

所述子组件引用模块104，用于对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。Thesubcomponent reference module 104 is configured to perform a reference operation on the at least two independent subcomponents to obtain a front-end project including a reference relationship.

详细地，所述组件拆分装置100各模块的具体实施方式如下：In detail, the specific implementation of each module of thecomponent splitting device 100 is as follows:

步骤一、构建前端项目的组件拆分项目，根据所述组件拆分项目从所述前端项目中查找出待拆分组件。Step 1: Build a component splitting project of the front-end project, and find the component to be split from the front-end project according to the component splitting project.

详细地，所述构建前端项目的组件拆分项目，包括：In detail, the component splitting project for building a front-end project includes:

本发明实施例中，所述组件拆分项目用来在前端页面中执行下述步骤二至步骤四的步骤来将组件进行拆分。例如，在命令行(mac系统为终端)，定位当前前端项目根目录，执行命令：npmivue-component-mini-tool-D，则可以添加组件拆分工具到当前框架项目中，设置拆分配置文件config.js，在拆分配置文件中添加组件拆分命令：npm run component-mini并执行，得到组件拆分项目，其中，拆分配置文件中的配置内容包括：需要进行精细化拆分组件的vue组件地址等。In this embodiment of the present invention, the component splitting item is used to perform the following steps 2 to 4 on the front-end page to split components. For example, on the command line (the mac system is the terminal), locate the root directory of the current front-end project, and execute the command: npmivue-component-mini-tool-D, you can add the component splitting tool to the current framework project and set the split configuration file config.js, add the component splitting command in the split configuration file: npm run component-mini and execute it to get the component split project, where the configuration content in the split configuration file includes: vue component address, etc.

步骤二、基于展示关系从所述待拆分组件中拆分出至少两个互斥内容。Step 2: Splitting at least two mutually exclusive contents from the component to be split based on the display relationship.

具体地，所述基于展示关系从所述待拆分组件中拆分出至少两个互斥内容，包括：Specifically, splitting at least two mutually exclusive contents from the component to be split based on the display relationship includes:

详细地，所述将所述展示互斥标签内的内容进行拆分，得到所述至少两个互斥内容，包括：In detail, the content in the display mutually exclusive label is split to obtain the at least two mutually exclusive contents, including:

步骤三、将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件。Step 3: Migrate the code logic in the at least two mutually exclusive contents to a preset file to obtain at least two independent subcomponents.

详细地，所述将所述至少两个互斥内容中的代码逻辑迁移至预设文件，得到至少两个独立子组件，包括：In detail, the code logic in the at least two mutually exclusive contents is migrated to a preset file to obtain at least two independent subcomponents, including:

4、由于迁移的整块html中，通常会包含css样式，而样式主要是通过在html标签内的id、class属性进行关联的，而关联的内容为当前vue文件中，style标签内的内容。当把整块html迁移出作为一个独立的组件的时候，也需要连同把样式的内容也一并迁移到新独立的组件中的style标签中去。方式如下：通过获取迁移出去的html片段中，所包含的所有id、class属性值，在原有的vue组件内的style标签内进行查找对应的属性值所对应的样式代码块，将其复制到新独立的vue组件中的style标签内去。最后判断所复制出去的样式代码块是否在原vue组件内的style标签内，如果不存在其他html标签的引用，则可以进行删除操作。4. Because the entire html to be migrated usually contains css styles, and the styles are mainly associated with the id and class attributes in the html tags, and the associated content is the content in the style tag in the current vue file. When migrating the whole block of html as an independent component, it is also necessary to migrate the style content to the style tag in the new independent component. The method is as follows: by obtaining all the id and class attribute values contained in the migrated html fragment, find the style code block corresponding to the corresponding attribute value in the style tag in the original vue component, and copy it to the new Go inside the style tag in the independent vue component. Finally, determine whether the copied style code block is in the style tag in the original vue component. If there is no reference to other html tags, you can delete it.

步骤四、对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目。Step 4: Perform a reference operation on the at least two independent subcomponents to obtain a front-end project including a reference relationship.

进一步地，所述对所述至少两个独立子组件进行引用操作，得到包含引用关系的前端项目，包括：Further, performing a reference operation on the at least two independent subcomponents to obtain a front-end project containing a reference relationship, including:

本发明一可选实施例中，例如，通过上述步骤，得到两个独立子组件，然后需要在原组件(即待拆分组件)中对这两个独立出的子组件，进行引用操作。方式如下：In an optional embodiment of the present invention, for example, through the above steps, two independent sub-assemblies are obtained, and then a reference operation needs to be performed on the two independent sub-assemblies in the original assembly (ie, the assembly to be split). The way is as follows:

本发明通过直接在前端项目中构建组件拆分项目，并通过识别出标准传递方式转化项目的入口文件进行目标组件的查找，通过确定目标组件中的原始数据传递方式，并对原始数据传递方式中的待编译变量进行变量迁移，无需事后人工进行组件编译，大大提高了组件拆分的效率。同时，直接将目标组件中不同原始数据传递方式进行变量迁移，可以将不同目标组件的数据传递方式进行统一，提高了开发的可维护性及可扩展性。因此本发明提出的组件拆分装置，可以解决组件拆分困难的问题。The invention directly constructs the component split project in the front-end project, and searches for the target component by identifying the entry file of the conversion project in the standard transmission mode, determines the original data transmission mode in the target component, and compares the original data transmission mode to the original data transmission mode. The variables to be compiled can be migrated without manual component compilation afterwards, which greatly improves the efficiency of component splitting. At the same time, by directly migrating different original data transmission methods in target components, the data transmission methods of different target components can be unified, and the maintainability and scalability of development can be improved. Therefore, the component splitting device proposed by the present invention can solve the problem of difficult component splitting.

如图8所示，是本发明一实施例提供的实现组件拆分方法的电子设备的结构示意图。As shown in FIG. 8 , it is a schematic structural diagram of an electronic device implementing a component splitting method provided by an embodiment of the present invention.

所述电子设备可以包括处理器10、存储器11、通信接口12和总线13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如组件拆分程序。The electronic device may include aprocessor 10 , amemory 11 , acommunication interface 12 and abus 13 , and may also include a computer program stored in thememory 11 and executable on theprocessor 10 , such as a component splitting program.

其中，所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(SecureDigital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如组件拆分程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。Wherein, thememory 11 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, mobile hard disk, multimedia card, card-type memory (for example: SD or DX memory, etc.), magnetic memory, magnetic disk, CD etc. In some embodiments, thememory 11 may be an internal storage unit of an electronic device, such as a mobile hard disk of the electronic device. In other embodiments, thememory 11 may also be an external storage device of the electronic device, such as a pluggable mobile hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) equipped on the electronic device. Cards, Flash Cards, etc. Further, thememory 11 may also include both an internal storage unit of an electronic device and an external storage device. Thememory 11 can not only be used to store application software installed in the electronic device and various types of data, such as the code of a component splitting program, etc., but also can be used to temporarily store data that has been output or will be output.

所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如组件拆分程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。In some embodiments, theprocessor 10 may be composed of integrated circuits, for example, may be composed of a single packaged integrated circuit, or may be composed of multiple integrated circuits packaged with the same function or different functions, including one or more integrated circuits. Central processing unit (Central Processing Unit, CPU), microprocessor, digital processing chip, graphics processor and combination of various control chips, etc. Theprocessor 10 is the control core (Control Unit) of the electronic device, and uses various interfaces and lines to connect various components of the entire electronic device, and by running or executing the programs or modules (such as components) stored in thememory 11. split programs, etc.), and call the data stored in thememory 11 to perform various functions of the electronic device and process data.

所述通信接口12用于上述电子设备与其他设备之间的通信，包括网络接口和用户接口。可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。所述用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。Thecommunication interface 12 is used for communication between the above electronic device and other devices, including a network interface and a user interface. Optionally, the network interface may include a wired interface and/or a wireless interface (eg, a WI-FI interface, a Bluetooth interface, etc.), which is generally used to establish a communication connection between the electronic device and other electronic devices. The user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), and optionally, the user interface may also be a standard wired interface or a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, and the like. The display may also be appropriately called a display screen or a display unit, which is used for displaying information processed in the electronic device and for displaying a visual user interface.

所述总线13可以是外设部件互连标准(peripheral component interconnect，简称PCI)总线或扩展工业标准结构(extended industry standard architecture，简称EISA)总线等。该总线13可以分为地址总线、数据总线、控制总线等。所述总线13被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。Thebus 13 may be a peripheral component interconnect (PCI for short) bus or an extended industry standard architecture (extended industry standard architecture, EISA for short) bus or the like. Thebus 13 can be divided into an address bus, a data bus, a control bus, and the like. Thebus 13 is configured to implement connection communication between thememory 11 and at least oneprocessor 10 and the like.

图8仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图8示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。FIG. 8 only shows an electronic device with components. Those skilled in the art can understand that the structure shown in FIG. 8 does not constitute a limitation on the electronic device, and may include fewer or more components than those shown in the drawings. , or a combination of certain components, or a different arrangement of components.

例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。For example, although not shown, the electronic device may also include a power source (such as a battery) for powering the various components, preferably, the power source may be logically connected to the at least oneprocessor 10 through a power management device, so that the power management device Implement functions such as charge management, discharge management, and power management. The power source may also include one or more DC or AC power sources, recharging devices, power failure detection circuits, power converters or inverters, power status indicators, and any other components. The electronic device may further include various sensors, Bluetooth modules, Wi-Fi modules, etc., which will not be repeated here.

进一步地，所述电子设备还可以包括网络接口，可选地，所述网络接口可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。Further, the electronic device may also include a network interface, optionally, the network interface may include a wired interface and/or a wireless interface (such as a WI-FI interface, a Bluetooth interface, etc.) Establish a communication connection between other electronic devices.

可选地，该电子设备还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。Optionally, the electronic device may further include a user interface, and the user interface may be a display (Display), an input unit (such as a keyboard (Keyboard)), optionally, the user interface may also be a standard wired interface or a wireless interface. Optionally, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode, organic light-emitting diode) touch device, and the like. The display may also be appropriately called a display screen or a display unit, which is used for displaying information processed in the electronic device and for displaying a visual user interface.

应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。It should be understood that the embodiments are only used for illustration, and are not limited by this structure in the scope of the patent application.

所述电子设备中的所述存储器11存储的组件拆分程序是多个指令的组合，在所述处理器10中运行时，可以实现：The component splitting program stored in thememory 11 in the electronic device is a combination of multiple instructions, and when running in theprocessor 10, it can achieve:

具体地，所述处理器10对上述指令的具体实现方法可参考附图对应实施例中相关步骤的描述，在此不赘述。Specifically, for the specific implementation method of the above-mentioned instruction by theprocessor 10, reference may be made to the description of the relevant steps in the embodiment corresponding to the accompanying drawings, which will not be repeated here.

进一步地，所述电子设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。所述计算机可读存储介质可以是易失性的，也可以是非易失性的。例如，所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。Further, if the modules/units integrated in the electronic device are implemented in the form of software functional units and sold or used as independent products, they may be stored in a computer-readable storage medium. The computer-readable storage medium may be volatile or non-volatile. For example, the computer-readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a USB flash drive, a removable hard disk, a magnetic disk, an optical disc, a computer memory, a read-only memory (ROM, Read-Only). Memory).

本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：The present invention also provides a computer-readable storage medium, where the readable storage medium stores a computer program, and when executed by a processor of an electronic device, the computer program can realize:

在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。In the several embodiments provided by the present invention, it should be understood that the disclosed apparatus, apparatus and method may be implemented in other manners. For example, the apparatus embodiments described above are only illustrative. For example, the division of the modules is only a logical function division, and there may be other division manners in actual implementation.

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。The modules described as separate components may or may not be physically separated, and components shown as modules may or may not be physical units, that is, may be located in one place, or may be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution in this embodiment.

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。In addition, each functional module in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware, or can be implemented in the form of hardware plus software function modules.

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。It will be apparent to those skilled in the art that the present invention is not limited to the details of the above-described exemplary embodiments, but that the present invention may be embodied in other specific forms without departing from the spirit or essential characteristics of the invention.

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。Therefore, the embodiments are to be regarded in all respects as illustrative and not restrictive, and the scope of the invention is to be defined by the appended claims rather than the foregoing description, which are therefore intended to fall within the scope of the claims. All changes within the meaning and range of the equivalents of , are included in the present invention. Any reference signs in the claims shall not be construed as limiting the involved claim.

本发明实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。The embodiments of the present invention can acquire and process related data based on artificial intelligence technology. Among them, artificial intelligence (AI) is a theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results. .

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。The basic technologies of artificial intelligence generally include technologies such as sensors, special artificial intelligence chips, cloud computing, distributed storage, big data processing technology, operation/interaction systems, and mechatronics. Artificial intelligence software technology mainly includes computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning/deep learning.

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。The blockchain referred to in the present invention is a new application mode of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, and encryption algorithm. Blockchain, essentially a decentralized database, is a series of data blocks associated with cryptographic methods. Each data block contains a batch of network transaction information to verify its Validity of information (anti-counterfeiting) and generation of the next block. The blockchain can include the underlying platform of the blockchain, the platform product service layer, and the application service layer.

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。Furthermore, it is clear that the word "comprising" does not exclude other units or steps and the singular does not exclude the plural. Several units or means recited in the system claims can also be realized by one unit or means by means of software or hardware. Second-class terms are used to denote names and do not denote any particular order.

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit them. Although the present invention has been described in detail with reference to the preferred embodiments, those of ordinary skill in the art should understand that the technical solutions of the present invention can be Modifications or equivalent substitutions can be made without departing from the spirit and scope of the technical solutions of the present invention.