Component framework conversion method and device, equipment and storage medium

Abstract

The embodiment of the invention relates to the technical field of artificial intelligence and front-end development, and discloses a component framework conversion method and device, equipment and a storage medium. The method comprises the steps of determining a life cycle hook function corresponding to a target component frame according to a frame structure of the target component frame, and generating a target component container according to the life cycle hook function; traversing component transfer attributes of the target component container, and screening data transfer attributes and event transfer attributes of the target component container; associating the preset component framework with the target component framework based on the data transfer attribute and the event transfer attribute; calling a state monitoring function, updating and synchronizing component transfer attribute states of the preset component framework and the target component framework, and generating a component framework transfer function; and converting the preset component into a target component based on the component framework conversion function. The invention aims to solve the problem that the component developed under a certain component framework cannot be reused under different component frameworks in the prior art.

Description

Technical Field

[0001] The present application relates to the field of artificial intelligence and front-end development, and particularly to a component framework conversion method, a component framework conversion device, a computer device, and a computer-readable storage medium. Background Art

[0002] Currently, the front-end software design pattern (Model-View-ViewModel, MVVM) frameworks in the fintech field are very diverse. For example, the relatively popular ones include the vue component framework, the vue3 component framework, the react component framework, and the angular component framework, etc. They can all meet the development and construction of medium and large-scale front-end applications, and these front-end applications can generally be applied in insurance systems, banking systems, trading systems, and order systems.

[0003] In practical applications, there may be multiple departments or modules, and the technology stack frameworks used by each department or module may not be unique. Then, in the case of sharing and reusing basic components and business components, although the same function is to be achieved, each component framework often needs to rewrite a set of codes corresponding to the component framework to be able to run under the corresponding component framework, that is, the ability to run a set of codes under multiple component frameworks cannot be realized, which is very unfavorable for the development and maintenance of components and the R & D efficiency of the team. Summary of the Invention

[0004] The present application provides a component framework conversion method, a component framework conversion device, a computer device, and a computer-readable storage medium, aiming to solve the problem that components developed under a certain component framework cannot be reused under different component frameworks in the related art.

[0005] To achieve the above object, the present application provides a component framework conversion method, and the method includes:

[0006] Obtain the framework structure of the target component framework;

[0007] Determine the life cycle hook functions corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the life cycle hook functions;

[0008] Traverse the component transfer attributes of the target component container, and filter out the data transfer attributes and event transfer attributes of the target component container;

[0009] Call the life cycle hook functions, and based on the data transfer attributes and the event transfer attributes, associate the preset component framework with the target component framework;

[0010] Call the status monitoring function to update and synchronize the component transfer property status between the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework;

[0011] Based on the component framework conversion function, convert the preset component into a target component. The preset component is developed based on the preset component framework, and the target component is developed based on the target component framework.

[0012] To achieve the above object, the present application provides a component framework conversion device, which includes:

[0013] A component framework acquisition module, configured to acquire the framework structure of the target component framework;

[0014] A component container generation module, configured to determine the life cycle hook function corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the life cycle hook function;

[0015] A transfer property determination module, configured to traverse the component transfer properties of the target component container, and filter out the data transfer property and event transfer property of the target component container;

[0016] A component framework association module, configured to call the life cycle hook function, and associate the preset component framework with the target component framework based on the data transfer property and the event transfer property;

[0017] A conversion function generation module, configured to call the status monitoring function to update and synchronize the component transfer property status between the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework;

[0018] A component framework conversion module, configured to convert the preset component into a target component based on the component framework conversion function. The preset component is developed based on the preset component framework, and the target component is developed based on the target component framework.

[0019] To achieve the above object, the present application provides a computer device, which includes a memory and a processor; the memory is used to store a computer program; the processor is configured to execute the computer program and implement the component framework conversion method as described above when executing the computer program.

[0020] To achieve the above object, the present application provides a computer-readable storage medium storing a computer program, which when executed by a processor causes the processor to implement the component framework conversion method as described above.

[0021] The component framework conversion method, component framework conversion device, computer device and computer-readable storage medium disclosed in the embodiments of the present application obtain the framework structure of the target component framework; determine the life cycle hook functions corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the life cycle hook functions; traverse the component transfer attributes of the target component container, and filter out the data transfer attributes and event transfer attributes of the target component container; call the life cycle hook functions, and based on the data transfer attributes and event transfer attributes, associate the preset component framework with the target component framework; call the state monitoring function to update and synchronize the component transfer attribute states of the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework; based on the component framework conversion function, convert the preset component into a target component, where the preset component is developed based on the preset component framework and the target component is developed based on the target component framework. Thus, it can be realized that components developed under a specific component framework can be reused under different component frameworks, and the output components can be connected to the corresponding component frameworks without maintaining multiple sets of codes. Moreover, the output component framework also has the characteristics of being lightweight, high-performance and fast iteration. Since the data two-way binding and event monitoring capabilities are also realized, the output component framework is flexibly connected, can match the syntax characteristics of the original component framework, maintain syntax consistency, reduce the understanding and learning costs of accessing developers, and improve the access efficiency, thereby facilitating the development and maintenance of components and improving the R & D efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] To more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0023] Figure 1 is a schematic diagram of the scenario of a component framework conversion method provided by an embodiment of the present application;

[0024] Figure 2 is a schematic flowchart of a component framework conversion method provided by an embodiment of the present application;

[0025] Figure 3 is a schematic block diagram of a component framework conversion device provided by an embodiment of the present application;

[0026] Figure 4 It is a schematic block diagram of a computer device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0027] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0028] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor do they have to be executed in the order described. For example, some operations / steps can also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions. In addition, although the functional modules are divided in the device schematic, in some cases, the module division can be different from that in the device schematic.

[0029] The term "and / or" as used in this specification and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0030] In actual applications, there may be multiple departments or modules, and the technology stack framework used by each department or module may not be unique. In this case, when basic components and business components need to be shared and reused, although they are all for the same function, each component framework often needs to rewrite a set of corresponding component framework codes before it can run under the corresponding component framework, that is, it is impossible to achieve the ability of a set of code to run under multiple component frameworks. For example, components developed based on the vue component framework cannot be reasonably output to projects developed with the vue3 component framework and the react component framework. In this case, it is necessary to maintain multiple sets of components output in different framework forms, which is very unfavorable to component development and maintenance and team R&D efficiency.

[0031] If the original component is exported as a library to other component frameworks, it is still necessary to use the DOM node for instantiation and mounting. Although this form initially meets the ability of cross-framework output, the coding form of the connected component framework is different. Between the two-way data communication between parent and child components, a lot of monitoring and variable update setting logic is still required. The access form is not elegant enough, and the access advantage is not as convenient as the components output by the original component framework.

[0032] To solve the above problems, the present application proposes a component framework conversion method, a component framework conversion device, a computer device, and a computer-readable storage medium, whereby components developed under a specific component framework can be reused under different component frameworks, and the output components can be connected to the corresponding component frameworks without maintaining multiple sets of codes. Moreover, the output component framework also has the characteristics of being lightweight, high-performance, and fast iteration. Since the data two-way binding and event listening capabilities are also realized, the output component framework is flexible to access, can match the syntax characteristics of the original component framework, maintain syntax consistency, reduce the understanding and learning costs of the accessing developers, and improve the access efficiency, thus facilitating the development and maintenance of components and improving the R & D efficiency.

[0033] Among them, this method can be applied to a server, and of course, it can also be applied to a terminal device to generate a corresponding image classification model. Among them, the terminal device can include fixed terminals such as mobile phones, tablets, and personal digital assistants (Personal Digital Assistant, PDA). The server can be, for example, a single server or a server cluster. However, for the sake of easy understanding, the following embodiments will introduce the component framework conversion method applied to the server in detail.

[0034] The following will describe in detail some embodiments of the present application with reference to the accompanying drawings. Without conflict, the following embodiments and the features in the embodiments can be combined with each other.

[0035] As Figure 1 shown, the component framework conversion method provided by the embodiments of the present application can be applied to such as Figure 1In the application environment shown. The application environment includes a terminal device 110 and a server 120. Among them, the terminal device 110 can communicate with the server 120 through a network. Specifically, the server 120 obtains the framework structure of the target component framework; determines the life cycle hook functions corresponding to the target component framework according to the framework structure of the target component framework, and generates a target component container corresponding to the target component framework according to the life cycle hook functions; traverses the component transfer attributes of the target component container, and filters out the data transfer attributes and event transfer attributes of the target component container; calls the life cycle hook functions, and based on the data transfer attributes and event transfer attributes, associates the preset component framework with the target component framework; calls the state monitoring function to update and synchronize the component transfer attribute states of the preset component framework and the target component framework, and generates a component framework conversion function for the preset component framework and the target component framework; based on the component framework conversion function, converts the preset component into a target component, and sends the target component to the terminal device 110. Among them, the server 120 can be an independent server or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, Content Delivery Network (CDN), and big data and artificial intelligence platforms. The terminal device 110 can be a smart phone, a tablet computer, a laptop computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto. The terminal and the server can be directly or indirectly connected through wired or wireless communication methods, and this application does not make any restrictions here.

[0036] Please refer to Figure 2 , Figure 2 FIG. is a schematic flowchart of a component framework conversion method provided by an embodiment of the present application. Among them, this component framework conversion method can enable components developed under a specific component framework to be reused under different component frameworks, and the output components can be connected to the corresponding component frameworks without maintaining multiple sets of codes. Moreover, the output component framework also has characteristics such as lightweight, high performance, and fast iteration. Since it also realizes the capabilities of two-way data binding and event listening, the output component framework is flexible to access, can match the syntax characteristics of the original component framework, maintain syntax consistency, reduce the understanding and learning costs of accessing developers, improve the access efficiency, and thus is beneficial to the development and maintenance of components and the improvement of R & D efficiency.

[0037] As Figure 2 shown, this component framework conversion method includes steps S101 to S106.

[0038] S101. Obtain the framework structure of the target component framework.

[0039] Among them, the target component framework can be the component framework corresponding to the target component. The framework structure can include structures such as the template, script, and style of the component framework. The template of the component framework is used to define the HTML structure of the component and describe the presentation mode of the user interface. The script of the component framework is used to define the logic of the component, including data, methods, lifecycle hooks, etc. The style of the component framework is used to define the CSS style of the component, supporting scope isolation and preprocessors.

[0040] Exemplarily, the target component can be an svelte component, a vue component, a vue3 component, a react component, an angular component, etc. The target component framework can be the component framework corresponding to the above preset components.

[0041] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Among them, Artificial Intelligence (AI) is to use a digital computer or a machine controlled by a digital computer to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use knowledge to obtain the best results of theory, methods, technologies, and application systems.

[0042] Artificial intelligence basic technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation / interaction systems, and mechatronics. Artificial intelligence software technologies mainly include several major directions such as computer vision technology, robotics, biometric technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0043] Exemplarily, by acquiring the component framework conversion requirements of the user and parsing the component framework conversion requirements, the target component framework and its corresponding framework structure can be obtained.

[0044] S102. Determine the lifecycle hook functions corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the lifecycle hook functions.

[0045] Among them, different component frameworks may correspond to different lifecycle hook functions. The lifecycle hook functions are used to generate a target component container corresponding to the target component framework. The target component framework is the converted component framework.

[0046] Exemplarily, taking the preset component framework as the svelte component framework and the target component framework as the vue component framework as an example, the container can be defined using the component object structure of vue, so as to realize the interaction with the svelte component through the lifecycle hook functions.

[0047] In some embodiments, the framework structure of the target component framework is parsed to obtain the framework parameters and component instances of the target component framework; according to the framework parameters and component instances of the target component framework, the life cycle hook functions corresponding to the target component framework are filtered out from the preset life cycle hook functions. Thus, the life cycle hook functions corresponding to the target component framework can be accurately determined.

[0048] Among them, the framework parameters can be template parameters, script parameters, style parameters, etc. of the preset component framework. The template parameters can include parameters of the HTML structure of the component, the script parameters can include parameters such as the logic code of the component, and the style parameters can include CSS style parameters of the component. The component instance is used to represent the instance information of the preset component framework. The preset life cycle hook functions are life cycle hook functions that are preset and can be adapted to different component frameworks, such as life cycle processing hook functions including mounted, update, and beforeDestroy, etc.

[0049] Exemplarily, parsing the framework structure of the target component framework can obtain the relevant parameters of the HTML structure, the relevant parameters of the logic code, the relevant parameters of the CSS style, and the instance information of the target component framework; since the relevant parameters of the logic code generally include life cycle hooks, the life cycle hook functions that conform to the component logic can be initially filtered out mainly through the relevant parameters of the logic code from the preset life cycle hook functions, and then the relevant parameters of the HTML structure, the relevant parameters of the CSS style, and the instance information are used for secondary filtering to determine the life cycle hook functions that conform to the HTML structure, CSS style, and meet the instance information from the life cycle hook functions after the initial filtering as the life cycle hook functions corresponding to the target component framework.

[0050] Exemplarily, taking the target component framework as a vue component framework as an example, the life cycle hook functions corresponding to the vue component framework can be determined as life cycle processing hook functions such as mounted and update through the framework parameters and component instances of the vue component framework.

[0051] S103. Traverse the component passing attributes of the target component container, and filter out the data passing attributes and event passing attributes of the target component container.

[0052] Among them, component transfer attributes are used to represent the information transfer attributes between different components, which generally can include data transfer attributes and event transfer attributes. Data transfer attributes are used to represent the relevant attributes for a preset component (sub-component) to transfer data to a target component (parent component) through props. Props is the core mechanism for transferring data between components, similar to the parameters of a function. Event transfer attributes are the relevant attributes for batch-binding the event listeners of a preset component (sub-component) to the root element or a specified element of the target component (parent component) through $listeners. $listeners is used to collect all the event listeners passed from the parent component to the sub-component.

[0053] In some embodiments, before traversing the component transfer attributes of the target component container, obtain the component instance of the target component container and its corresponding component attributes, and determine the instance category corresponding to the component instance according to the component attributes; if the instance category corresponding to the component instance is the transfer category, then use the component attributes corresponding to the component instance as the component transfer attributes of the target component container. Thereby, the component transfer attributes of the target component container can be accurately determined.

[0054] Among them, a component instance is used to represent the instance information of a preset component framework. Component attributes are the attribute information mapped from the instance information. The instance category can include a transfer category and an interaction category.

[0055] Exemplarily, the component instance of the target component container can be obtained first, and then by parsing the component instance, the component attributes corresponding to the component instance can be determined, and the instance category corresponding to the component instance can be determined as the transfer category or the interaction category, etc., according to the component attributes.

[0056] Exemplarily, if the instance category corresponding to the component instance is the transfer category, then use the component attributes corresponding to the component instance as the component transfer attributes of the target component container; if the instance category corresponding to the component instance is not the transfer category, then re-determine the component attributes corresponding to the component instance.

[0057] In some embodiments, determine the transfer object of the component transfer attributes; if the transfer object of the component transfer attributes is a data object, then determine that the component transfer attributes are data transfer attributes; if the transfer object of the component transfer attributes is an event object, then determine that the component transfer attributes are event transfer attributes. Thereby, the data transfer attributes and event transfer attributes can be accurately screened out from the component transfer attributes.

[0058] Exemplarily, all component passing attributes of the target component container can be obtained first and then classified. Specifically, the passing object of the component passing attribute can be determined first. If the passing object of the component passing attribute is determined to be a data object, then the component passing attribute is determined to be a data passing attribute. If the passing object of the component passing attribute is determined to be an event object, then the component passing attribute is determined to be an event passing attribute.

[0059] Exemplarily, the data passing attribute and the event passing attribute can also be directly obtained separately. Taking the target component as a vue component and the preset component as a svelte component as an example, specifically, all props passed by the parent component can be obtained through the this.$props function, and the parameters that need to be passed through to the preset component can be filtered out, so as to obtain and collect the $props object using the context, and use these parameters as the data passing attribute. The events bound to the preset component can also be collected using the this.$listeners function or the this.$attrs function, so as to collect the parameters of the $listeners object and use these parameters as the event passing attribute.

[0060] Exemplarily, taking the target component as a vue3 component or a React component and the preset component as a svelte component as an example, the data passing attribute props and the event passing attribute events can be collected through regular expression parsing, so as to create a watchers event collection function.

[0061] S104. Call the lifecycle hook function, and based on the data passing attribute and the event passing attribute, associate the preset component framework with the target component framework.

[0062] Among them, the preset component framework can be the component framework corresponding to the preset component.

[0063] Exemplarily, the preset component can be a svelte component, a vue component, a vue3 component, a react component, an angular component, etc., and the preset component framework can be the component framework corresponding to the above preset component.

[0064] Since the MVVM framework has the characteristics of using data listening binding and virtual dom operation domdiff to complete incremental updates, with a large runtime and being not conducive to independent component output, the svelte component framework can be selected as the preset component framework. The svelte component framework has the following advantages:

[0065] 1. Lightweight, with a small core library, weak runtime, high performance, suitable for building lightweight applications.

[0066] 2. Has the MVVM mode, and the construction of community scaffolding and so on is relatively complete, ensuring development efficiency.

[0067] Therefore, taking advantage of the characteristics and advantages of the svelte component framework, a component development task can be completed relatively quickly. Therefore, the svelte component framework is generally selected as the preset component framework.

[0068] In some embodiments, the life cycle hook function is called to instantiate the preset component framework, generating a preset component node; based on the data transfer attribute and the event transfer attribute, the preset component node is mounted on the root node of the target component framework to realize the association between the preset component framework and the target component framework.

[0069] Exemplarily, the svelte component can be instantiated in the mounted hook function, and the props and events can be bound; specifically, the svelte component rendering framework can be rendered into the root element of the vue component, and the props can be dynamically updated through the $set method of the svelte component framework to ensure data responsiveness; and the events triggered by the svelte component framework are forwarded to the target component through this.$emit to achieve cross-frame communication.

[0070] Exemplarily, taking the target component as a vue component and the preset component as a svelte component as an example, when integrating the svelte component into the vue component, it is necessary to complete the instantiation of the svelte component framework in the life cycle hook function (mounted function) of the vue component framework, and transfer the data transfer attribute and the data transfer attribute of the vue component framework to the svelte component framework, and finally mount it on the root DOM node of the vue component framework to realize the association between the preset component framework and the target component framework.

[0071] S105: Call the status monitoring function to update and synchronize the component transfer attribute status between the preset component framework and the target component framework, generating a component framework conversion function between the preset component framework and the target component framework.

[0072] Among them, the status monitoring function can be used to monitor the status changes of data and events, specifically including a data monitoring function and an event monitoring function. The component framework conversion function is used to convert the component framework of the preset component into the function of the target component framework, such as the tovue(svelteComponent) function.

[0073] In some embodiments, a data listening function is called to update and synchronize the data transfer property status between the preset component framework and the target component framework, generating data binding information between the preset component framework and the target component framework; an event listening function is called to update and synchronize the data transfer property status between the preset component framework and the target component framework, generating event listening information between the preset component framework and the target component framework; according to the data binding information and event listening information between the preset component framework and the target component framework, a component framework conversion function between the preset component framework and the target component framework is generated. Thus, two-way data binding and two-way event listening can be achieved, thereby accurately generating a component framework conversion function between the preset component framework and the target component framework.

[0074] Among them, the data binding information is used to represent the associated data information between the preset component framework and the target component framework, and the event listening information is used to represent the associated event information between the preset component framework and the target component framework. The data binding information and event listening information can perform two-way data binding and two-way event listening, and then generate a component framework conversion function between the preset component framework and the target component framework.

[0075] Exemplarily, taking the target component as a vue component and the preset component as a svelte component as an example, the $watch function of the vue component framework can be used to listen to each incoming prop, and after listening to the change, the $set method of the svelte component framework can be used to update and set the property, thus completing the transfer from the target component (parent component) to the preset component (child component); then, using the $update function of the svelte component framework to listen to the data update change within the component, and using the $emit method of the vue component framework to transfer the internal change to the preset component (child component), realizing the transfer from the preset component (child component) to the target component (parent component); finally, the two-way data binding ability between the vue component framework and the svelte component framework is achieved.

[0076] Exemplarily, taking the target component as a vue3 component and the preset component as a svelte component as an example, all data changes can be listened to through the onUpdated function, so as to update the vue3 component.

[0077] Exemplarily, taking the target component as a vue component and the preset component as a svelte component as an example, the events to be listened to can be passed in, the $on method of the svelte component framework can be used to listen to the internal event response of the vue component, and then processed through the $emit function of the vue component, realizing the event listening ability of the target component container.

[0078] Exemplarily, taking the target component as a React component and the preset component as a Svelte component as an example, the useEffect function can be used to listen for changes in the props of the target component container, so as to update the React component.

[0079] It should be noted that for the case where the target component framework is other component frameworks, the core steps are basically the same as those in the above embodiments, and the differences mainly lie in the collection and processing methods of passed properties, data binding methods, and event listening methods.

[0080] In some embodiments, the target component framework listens for data changes in the preset component framework through a first data listening function to obtain a first function call array; according to the first function call array, a first data binding information is generated, and the first data binding information is the data binding information from the target component framework to the preset component framework; the preset component framework listens for data changes in the target component framework through a second data listening function to obtain a second function call array; according to the second function call array, a second data binding information is generated, and the second data binding information is the data binding information from the preset component framework to the target component framework.

[0081] Among them, the first function call array is an array composed of multiple data sources such as ref, reactive objects, computed properties, and function return values returned after the target component framework listens for data changes in the preset component framework. The second function call array is an array composed of multiple data sources such as ref, reactive objects, computed properties, and function return values returned after the preset component framework listens for data changes in the target component framework.

[0082] Exemplarily, the data transfer direction of the first data binding information is from the target component framework to the preset component framework; the data transfer direction of the second data binding information is from the preset component framework to the target component framework. Therefore, the first data binding information and the second data binding information can achieve two-way data binding.

[0083] Exemplarily, taking the target component as a vue component and the preset component as a Svelte component as an example, the vue component framework can listen for changes in the Props of the Svelte component framework, and then use the $watch function to listen for the props passed from the vue component framework to the Svelte component framework; then update the properties of the Svelte component framework according to the props, so as to generate the first data binding information. Similarly, the Svelte component framework can listen for changes in the Props of the vue component framework, and then use the $emit function to listen for the props passed from the Svelte component to the vue component framework; then update the properties of the vue component framework according to the props, so as to generate the second data binding information.

[0084] Exemplarily, after generating the data binding information and event listening information, it is packaged through a function to generate a component framework conversion function between the preset component framework and the target component framework.

[0085] S106. Based on the component framework conversion function, convert the preset component into a target component. The preset component is developed based on the preset component framework, and the target component is developed based on the target component framework.

[0086] Exemplarily, after obtaining the preset component, based on the generated component framework conversion function, the preset component framework of the preset component can be converted into the target component framework, so as to realize two-way data binding and two-way event listening, and then convert the preset component into the target component, realizing that the components developed under the preset component framework can be reused under different component frameworks.

[0087] In the above solution, for the front-end component framework conversion in the fintech field, it can realize that the components developed under a specific component framework can be reused under different component frameworks, and the output components can be connected to the corresponding component frameworks without maintaining multiple sets of codes. Moreover, the output component framework also has the characteristics of being lightweight, high-performance, and fast iteration. Since the two-way data binding and event listening capabilities are also realized, the output component framework is flexible to connect, can match the syntax characteristics of the original component framework, maintain syntax consistency, reduce the cost for developers to understand and learn, and improve the connection efficiency, thus being beneficial to the development and maintenance of components and improving the R & D efficiency.

[0088] Please refer to Figure 3 , Figure 3 which is a schematic block diagram of a component framework conversion device provided by an embodiment of the present application. The component framework conversion device can be configured in a server and is used to execute the foregoing component framework conversion method.

[0089] As Figure 3 shown, the component framework conversion device 200 includes: a component framework acquisition module 201, a component container generation module 202, a transfer attribute determination module 203, a component framework association module 204, a conversion function generation module 205, and a component framework conversion module 206.

[0090] The component framework acquisition module 201 is used to acquire the framework structure of the target component framework;

[0091] The component container generation module 202 is used to determine the life cycle hook function corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the life cycle hook function;

[0092] A transfer attribute determination module 203 is configured to traverse the component transfer attributes of the target component container and filter out the data transfer attributes and event transfer attributes of the target component container;

[0093] A component framework association module 204 is configured to call the lifecycle hook function and associate the preset component framework with the target component framework based on the data transfer attributes and the event transfer attributes;

[0094] A conversion function generation module 205 is configured to call a state monitoring function to update and synchronize the component transfer attribute states of the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework;

[0095] A component framework conversion module 206 is configured to convert the preset component into a target component based on the component framework conversion function, where the preset component is developed based on the preset component framework and the target component is developed based on the target component framework.

[0096] In some embodiments, the component container generation module 202 is further configured to parse the framework structure of the target component framework to obtain the framework parameters and component instances of the target component framework; and filter out the lifecycle hook functions corresponding to the target component framework from the preset lifecycle hook functions according to the framework parameters and component instances of the target component framework.

[0097] In some embodiments, the component framework conversion apparatus 200 further includes a transfer attribute filtering module 207, and the transfer attribute filtering module 207 is configured to obtain the component instances of the target component container and their corresponding component attributes, and determine the instance category corresponding to the component instance according to the component attributes; if the instance category corresponding to the component instance is a transfer category, the component attributes corresponding to the component instance are used as the component transfer attributes of the target component container.

[0098] In some embodiments, the transfer attribute determination module 203 is further configured to determine the transfer object of the component transfer attribute; if the transfer object of the component transfer attribute is a data object, it is determined that the component transfer attribute is a data transfer attribute; if the transfer object of the component transfer attribute is an event object, it is determined that the component transfer attribute is an event transfer attribute.

[0099] In some embodiments, the component framework association module 204 is further configured to call a data monitoring function to update and synchronize the data transfer attribute status between the preset component framework and the target component framework, and generate data binding information between the preset component framework and the target component framework; call an event monitoring function to update and synchronize the data transfer attribute status between the preset component framework and the target component framework, and generate event monitoring information between the preset component framework and the target component framework; and generate a component framework conversion function between the preset component framework and the target component framework according to the data binding information and the event monitoring information between the preset component framework and the target component framework.

[0100] In some embodiments, in the conversion function generation module 205, the target component framework monitors the data changes of the preset component framework through a first data monitoring function to obtain a first function call array; generates first data binding information according to the first function call array, where the first data binding information is the data binding information from the target component framework to the preset component framework; the preset component framework monitors the data changes of the target component framework through a second data monitoring function to obtain a second function call array; and generates second data binding information according to the second function call array, where the second data binding information is the data binding information from the preset component framework to the target component framework.

[0101] It should be noted that those skilled in the art can clearly understand that, for the sake of convenience and brevity of description, the specific working processes of the above-described devices, modules, and units can refer to the corresponding processes in the foregoing method embodiments, and will not be elaborated herein.

[0102] The methods and devices of the present application can be used in many general-purpose or special-purpose computing system environments or configurations. For example: personal computers, server computers, handheld devices or portable devices, tablet devices, multi-processor systems, microprocessor-based systems, set-top boxes, programmable consumer terminal devices, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and so on.

[0103] Exemplarily, the above methods and devices can be implemented in the form of a computer program, and the computer program can run on a computer device as shown in Figure 4 shown.

[0104] Please refer to Figure 4 , Figure 4 which is a schematic diagram of a computer device provided by an embodiment of the present application. The computer device can be a server.

[0105] Such as Figure 4As shown, the computer device includes a processor, a memory, and a network interface connected via a system bus. Among them, the memory may include a volatile storage medium, a non-volatile storage medium, and an internal memory.

[0106] The non-volatile storage medium can store an operating system and computer programs. The computer programs include program instructions that, when executed, can cause the processor to execute any one of the component framework conversion methods.

[0107] The processor is used to provide computing and control capabilities to support the operation of the entire computer device.

[0108] The internal memory provides an environment for the operation of the computer programs in the non-volatile storage medium. When the computer programs are executed by the processor, the processor can be caused to execute any one of the component framework conversion methods.

[0109] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art can understand that the structure of the computer device is only a block diagram of the part of the structure related to the solution of this application, and does not constitute a limitation on the computer device to which the solution of this application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0110] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0111] Among them, in some embodiments, the processor is used to run the computer programs stored in the memory to implement the following steps: obtaining the framework structure of the target component framework;

[0112] Determine the life cycle hook function corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the life cycle hook function; traverse the component transfer attributes of the target component container, and filter out the data transfer attributes and event transfer attributes of the target component container; call the life cycle hook function, and based on the data transfer attributes and the event transfer attributes, associate the preset component framework with the target component framework; call the status monitoring function to update and synchronize the component transfer attribute status of the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework; based on the component framework conversion function, convert the preset component into a target component, where the preset component is developed based on the preset component framework, and the target component is developed based on the target component framework.

[0113] In some embodiments, the processor is further configured to parse the framework structure of the target component framework to obtain the framework parameters and component instances of the target component framework; according to the framework parameters and component instances of the target component framework, filter out the life cycle hook function corresponding to the target component framework from the preset life cycle hook functions.

[0114] In some embodiments, the processor is further configured to obtain the component instances of the target component container and their corresponding component attributes, and determine the instance category corresponding to the component instance according to the component attributes; if the instance category corresponding to the component instance is a transfer category, use the component attributes corresponding to the component instance as the component transfer attributes of the target component container.

[0115] In some embodiments, the processor is further configured to determine the transfer object of the component transfer attribute; if the transfer object of the component transfer attribute is a data object, determine that the component transfer attribute is a data transfer attribute; if the transfer object of the component transfer attribute is an event object, determine that the component transfer attribute is an event transfer attribute.

[0116] In some embodiments, the processor is further configured to call the life cycle hook function to perform instantiation processing on the preset component framework to generate a preset component node; based on the data transfer attributes and the event transfer attributes, mount the preset component node to the root node of the target component framework to realize the association between the preset component framework and the target component framework.

[0117] In some embodiments, the processor is further configured to call a data monitoring function to update and synchronize the data transfer attribute status between the preset component framework and the target component framework, and generate data binding information between the preset component framework and the target component framework; call an event monitoring function to update and synchronize the data transfer attribute status between the preset component framework and the target component framework, and generate event monitoring information between the preset component framework and the target component framework; and generate a component framework conversion function between the preset component framework and the target component framework according to the data binding information and the event monitoring information between the preset component framework and the target component framework.

[0118] In some embodiments, the processor is further configured to control the target component framework to monitor the data changes of the preset component framework through a first data monitoring function to obtain a first function call array; generate first data binding information according to the first function call array, where the first data binding information is the data binding information from the target component framework to the preset component framework; the preset component framework monitors the data changes of the target component framework through a second data monitoring function to obtain a second function call array; and generate second data binding information according to the second function call array, where the second data binding information is the data binding information from the preset component framework to the target component framework.

[0119] An embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. The computer program includes program instructions, and when the program instructions are executed, any component framework conversion method provided by the embodiment of the present application is implemented.

[0120] Among them, the computer-readable storage medium may be an internal storage unit of the computer device described in the foregoing embodiments, such as the hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the computer device.

[0121] Further, the computer-readable storage medium may mainly include a storage program area and a storage data area. Among them, the storage program area may store an operating system, application programs required for at least one function, etc.; the storage data area may store data created according to the use of the blockchain node.

[0122] A new application mode of computer technologies such as storage, peer-to-peer transmission, consensus mechanism, and encryption algorithm of the blockchain language model referred to in the present invention. Blockchain, in essence, is a decentralized database, a series of data blocks generated by using cryptographic methods. Each data block contains information on a batch of network transactions, which is used to verify the validity of the information (anti-counterfeiting) and generate the next block. The blockchain can include the blockchain underlying platform, the platform product service layer, and the application service layer, etc.

[0123] As described above, it is only the specific implementation mode of this application, but the protection scope of this application is not limited thereto. Any person skilled in the art within the technical scope disclosed by this application can easily think of various equivalent modifications or substitutions, and these modifications or substitutions should be covered within the protection scope of this application. Therefore, the protection scope of this application should be subject to the protection scope of the claims.

Claims

1. A component framework conversion method, characterized in that: The method comprises: Get the framework structure of the target component framework; Determine a lifecycle hook function corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the lifecycle hook function; Traversing the component transfer properties of the target component container, and filtering out the data transfer properties and event transfer properties of the target component container; Calling the lifecycle hook function, and associating the preset component framework with the target component framework based on the data transfer attribute and the event transfer attribute; Calling a state monitoring function to update and synchronize the component transfer attribute states of the preset component framework and the target component framework, and generating a component framework conversion function between the preset component framework and the target component framework; Based on the component framework conversion function, a preset component is converted into a target component, wherein the preset component is developed based on the preset component framework, and the target component is developed based on the target component framework.

2. The method according to claim 1, characterized in that The determining, according to the framework structure of the target component framework, a lifecycle hook function corresponding to the target component framework includes: Parsing the framework structure of the target component framework to obtain framework parameters and component instances of the target component framework; According to the framework parameters and component instance of the target component framework, the lifecycle hook function corresponding to the target component framework is filtered out from the preset lifecycle hook functions.

3. The method according to claim 1, characterized in that Before traversing the component transfer properties of the target component container, the method further includes: Acquire the component instance of the target component container and its corresponding component attributes, and determine the instance category corresponding to the component instance according to the component attributes; If the instance category corresponding to the component instance is a transfer category, the component attribute corresponding to the component instance is used as the component transfer attribute of the target component container.

4. The method according to claim 1, characterized in that: The traversing the component transfer properties of the target component container and filtering out the data transfer properties and event transfer properties of the target component container includes: Determine a transfer object of the component transfer attribute; If the transfer object of the component transfer attribute is a data object, determining that the component transfer attribute is a data transfer attribute; If the transfer object of the component transfer attribute is an event object, the component transfer attribute is determined to be an event transfer attribute.

5. The method according to claim 1, characterized in that The calling of the lifecycle hook function and associating the preset component framework with the target component framework based on the data transfer attribute and the event transfer attribute includes: Calling the life cycle hook function to instantiate the preset component framework and generate a preset component node; Based on the data transfer attribute and the event transfer attribute, the preset component node is mounted on the root node of the target component framework to achieve association between the preset component framework and the target component framework.

6. The method according to claim 1, characterized in that The calling state monitoring function updates and synchronizes the component transfer attribute states of the preset component framework and the target component framework, and generates a component framework conversion function between the preset component framework and the target component framework, including: Calling a data monitoring function to update and synchronize the data transfer attribute states between the preset component framework and the target component framework, and generating data binding information between the preset component framework and the target component framework; Calling an event monitoring function to update and synchronize the data transfer attribute states of the preset component framework and the target component framework, and generating event monitoring information of the preset component framework and the target component framework; A component framework conversion function between the preset component framework and the target component framework is generated according to the data binding information and event monitoring information of the preset component framework and the target component framework.

7. The method according to claim 6, characterized in that The data binding information includes first data binding information and second data binding information. The calling of the data monitoring function updates and synchronizes the data transfer attribute states of the preset component framework and the target component framework to generate data binding information of the preset component framework and the target component framework, including: The target component framework monitors the data changes of the preset component framework through the first data monitoring function to obtain a first function call array; Generate first data binding information according to the first function call array, where the first data binding information is data binding information from the target component framework to the preset component framework; The preset component framework monitors the data changes of the target component framework through the second data monitoring function to obtain a second function call array; According to the second function call array, second data binding information is generated, where the second data binding information is data binding information from the preset component framework to the target component framework.

8. A component frame conversion device, characterized in that: The component frame conversion device comprises: A component framework acquisition module is used to acquire the framework structure of the target component framework; A component container generation module, used to determine a lifecycle hook function corresponding to the target component framework according to the framework structure of the target component framework, and generate a target component container corresponding to the target component framework according to the lifecycle hook function; A transfer attribute determination module, used for traversing the component transfer attributes of the target component container, and screening out the data transfer attributes and event transfer attributes of the target component container; A component framework association module, used to call the life cycle hook function and associate the preset component framework with the target component framework based on the data transfer attribute and the event transfer attribute; A conversion function generation module is used to call a state monitoring function, update and synchronize the component transfer attribute states of the preset component framework and the target component framework, and generate a component framework conversion function between the preset component framework and the target component framework; The component framework conversion module is used to convert a preset component into a target component based on the component framework conversion function, wherein the preset component is developed based on the preset component framework and the target component is developed based on the target component framework.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is configured to execute the computer program and implement, when executing the computer program: A component framework conversion method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the component framework conversion method according to any one of claims 1 to 7.

Images