Component adaptation method and device

By mapping source framework components to a generic component interface and supporting multi-framework access, the problem of component coupling between different web front-end frameworks is solved, enabling cross-framework sharing and efficient development.

CN121029232APending Publication Date: 2025-11-28SHANGHAI BILIBILI TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202511094080.6
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-08-05
Publication Date
2025-11-28

AI Technical Summary

Technical Problem

The lack of a unified component standard among different web front-end frameworks leads to high coupling between components and specific frameworks, making cross-framework sharing impossible. This increases costs for component providers and integrators and affects development efficiency.

Method used

By obtaining the interfaces of the source framework components and mapping them to the interfaces of general components, specific framework components can be converted into general components using the component base class and adaptation tools, supporting multi-framework access, and providing reverse adaptation capabilities to ensure consistency and maintainability.

Benefits of technology

It reduces costs for component providers and integrators, improves development efficiency, and enables efficient sharing and compatibility of cross-framework components.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121029232A_ABST
    Figure CN121029232A_ABST
Patent Text Reader

Abstract

The embodiment of the invention provides a component adaptation method and device, computer equipment, a computer readable storage medium and a computer program product, and belongs to the field of software. The component adaptation method comprises the following steps: acquiring an interface of a source framework component and a predefined component base class, wherein the component base class comprises a universal interface mapping rule; mapping an interface of the source frame component into an interface of a universal component based on the universal interface mapping rule, so as to convert the source frame component into the universal component; wherein the interface of the universal component is determined according to the interfaces of various framework components, and the universal component is suitable for various frameworks. According to the technical scheme of the embodiment of the invention, a method for efficiently converting the specific framework component into the universal component can be provided under the condition of not invading framework type selection, and the universal component is suitable for multi-framework access, so that the design cost of a component provider and the access cost of an access party are reduced, and the development efficiency is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of software technology, and in particular to a component adaptation method, apparatus, computer device, computer-readable storage medium, and computer program product. Background Technology

[0002] With the rapid development of web front-end technologies, various frameworks such as Vue2, Vue3, React, SolidJS, and VanillaJS have emerged. Developers can choose the most suitable framework based on specific scenarios and use a component-based approach to efficiently build front-end applications. However, there is still a lack of unified component standards between different frameworks. Components are highly coupled with specific frameworks, making cross-framework sharing impossible and requiring redevelopment. This not only increases the design costs for component providers but also raises the integration costs for adopters, and also affects overall development efficiency.

[0003] It should be noted that the above content is not necessarily prior art, nor is it intended to limit the scope of patent protection of this application. Summary of the Invention

[0004] This application provides a component adaptation method, apparatus, computer device, computer-readable storage medium, and computer program product to solve or alleviate one or more of the technical problems mentioned above.

[0005] One aspect of this application provides a component adaptation method, the method comprising: Obtain the interfaces of the source framework components and the predefined component base class, wherein the component base class includes general interface mapping rules; Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components, so as to convert the source framework components into general components; The interface of the general component is determined based on the interfaces of various framework components, and the general component is applicable to the various frameworks.

[0006] Optionally, the method further includes: Determine a target framework, which is different from the source framework; Based on the target framework, a target component subclass is determined from multiple component subclasses; wherein, one component subclass corresponds to one framework, the component subclass is obtained by inheriting the component base class according to the corresponding framework, and the component subclass includes the interface mapping rules of the corresponding framework; Based on the target component subclass, the interface of the source framework component is mapped to the interface of the target framework component to convert the source framework component into the target framework component.

[0007] Optionally, the interface mapping rules for the corresponding framework include the general interface mapping rules and the target interface mapping rules; correspondingly, based on the target component subclass, mapping the interface of the source framework component to the interface of the target framework component includes: Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components; and Based on the target interface mapping rules, the interface of the general component is mapped to the interface of the target framework component.

[0008] Optionally, the method further includes: Based on the source framework, a target anti-adaptive component class is determined from the predefined anti-adaptive component classes; wherein, one anti-adaptive component class corresponds to one framework, and the anti-adaptive component class includes the anti-adaptive interface mapping rules of the corresponding framework. Based on the target anti-adaptive component class, the interface of the target framework component is mapped to the interface of the source framework component, so as to convert the target framework component into the source framework component.

[0009] Optionally, the component subclass further includes the engine of the corresponding framework; correspondingly, the method further includes: calling the engine of the target framework in the target component subclass to render the target framework component.

[0010] Optionally, the method further includes: invoking the engine service of the remotely deployed target framework to render the target framework components.

[0011] Optionally, the interface of the general component is determined based on the interfaces of various framework components, including: Obtain various framework components; Determine the interface set corresponding to each of the various framework components; The interface of the general component is determined based on the intersection of the interface sets corresponding to the various framework components.

[0012] Another aspect of this application provides a component adapter device, the device comprising: The module retrieves the interfaces of the source framework components and the predefined component base class, wherein the component base class includes a general interface mapping rule; The adaptation module maps the interface of the source framework component to the interface of the general component based on the general interface mapping rule, so as to convert the source framework component into a general component; The interface of the general component is determined based on the interfaces of various framework components, and the general component is applicable to the various frameworks.

[0013] Another aspect of this application provides a computer device, including: At least one processor; and A memory that is communicatively connected to the at least one processor; Wherein: the memory stores instructions that can be executed by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to perform the method as described above.

[0014] Another aspect of this application provides a computer-readable storage medium storing computer instructions that, when executed by a processor, implement the method described above.

[0015] Another aspect of this application provides a computer program product including a computer program that, when executed by a processor, implements the method described above.

[0016] The embodiments of this application employing the above-described technical solution may have the following advantages: The method involves obtaining the interface (API) of a specific framework component (source framework component) and passing this API as a parameter to a predefined component base class. The component base class includes a general interface mapping rule used to map the API of the source framework component to the API of the general component, thereby converting the source framework component into a general component. The API of the general component is determined based on the APIs of various framework components, and the general component can be used with multiple different frameworks. Therefore, this application provides a method for efficiently converting a specific framework component into a general component without intruding on framework selection. The general component is suitable for multi-framework access, reducing the design cost for component providers and the access cost for access providers, significantly improving development efficiency. Attached Figure Description

[0017] The accompanying drawings exemplify embodiments and form part of the specification, serving together with the textual description to explain exemplary implementations of the embodiments. The illustrated embodiments are for illustrative purposes only and do not limit the scope of the claims. Throughout the drawings, the same reference numerals refer to similar but not necessarily identical elements.

[0018] Figure 1 A flowchart illustrating a component adaptation method according to Embodiment 1 of this application is shown schematically. Figure 2 The specification of a general component according to Embodiment 1 of this application is illustrated schematically; Figure 3 The flowchart illustrating the acquisition of a general API according to Embodiment 1 of this application is shown in the schematic diagram. Figure 4 Schematic illustration Figure 2 Flowchart of the sub-steps in step S102; Figure 5 The diagram illustrates the addition of a flowchart to the component adaptation method according to Embodiment 1 of this application; Figure 6 A fast de-adaptation tool according to Embodiment 1 of this application is illustrated schematically; Figure 7 The component adaptation and anti-adaptation according to Embodiment 1 of this application are illustrated schematically; Figure 8 A block diagram of a component adapter according to Embodiment 2 of this application is schematically shown; and Figure 9 A schematic diagram of the hardware architecture of a computer device according to Embodiment 3 of this application is shown. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0020] It should be noted that the descriptions involving "first," "second," etc., in the embodiments of this application are for descriptive purposes only and should not be construed as indicating or implying their relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined with "first" or "second" may explicitly or implicitly include at least one of that feature. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. If the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0021] It should be noted that, in any stage of this application involving the collection, storage, use, transmission, and processing of data, each stage strictly adheres to the laws, regulations, industry standards, and regulatory requirements of the data source, usage location, and relevant countries and regions to ensure the legality and compliance of data activities. In the collection stage, the purpose, method, and scope of collection are clearly communicated to the data subject in a prominent manner. Collection is conducted only after obtaining the data subject's legal authorization, ensuring that the collection process follows the "minimum necessary" principle and does not exceed the scope of data collection. In the storage stage, storage periods are limited, and data is promptly deleted or anonymized / encrypted after the storage purpose is achieved. In the usage stage, a strict data security protection mechanism is implemented, using field-level desensitization technology and processing the original data according to preset desensitization rules. For different types of data, multiple desensitization strategies, such as data generalization, data anonymization, and data encryption, are employed to effectively mitigate the risk of sensitive information leakage and ensure that all data used is securely processed and desensitized, comprehensively protecting the rights and interests of data subjects and data security. In the transmission and processing stages, the confidentiality and security of data are ensured during transmission and processing.

[0022] In the description of this application, it should be understood that the numerical labels before the steps do not indicate the order of the steps, but are only used to facilitate the description of this application and to distinguish each step, and therefore should not be construed as a limitation of this application.

[0023] First, a definition of the terminology used in this application is provided: API (Application Programming Interface): An application programming interface defines a set of rules that allow different programs or services to communicate or interact.

[0024] JavaScript: A programming language primarily used for front-end development.

[0025] Vue2: A front-end JavaScript framework that can be used to build user interfaces (UI) and single-page applications (SPAs).

[0026] Vue 3: An upgraded version of Vue 2, it introduces several new features while maintaining ease of use, improving the efficiency and flexibility of front-end development. Due to significant changes in Vue 3's underlying architecture and reactive system compared to Vue 2, components from Vue 2 and Vue 3 are not directly interoperable.

[0027] React: A JavaScript library whose core concept is componentization, building user interfaces by constructing reusable UI components.

[0028] SolidJS: A front-end JavaScript framework for building user interfaces. It combines the component-based concepts of React, but uses a different reactive mechanism, and components cannot directly communicate with each other.

[0029] VanillaJS: Native JavaScript, without relying on any frameworks or libraries.

[0030] SDK (Software Development Kit): A software development kit is a collection of development tools and resources.

[0031] Secondly, to facilitate understanding of the technical solutions provided in the embodiments of this application by those skilled in the art, the relevant technologies are described below: With the rapid development of web front-end technologies, various frameworks such as Vue2, Vue3, React, SolidJS, and VanillaJS have emerged. Developers can choose the most suitable framework according to specific scenarios and use a component-based approach to efficiently build front-end applications.

[0032] However, the applicant understands that there is still a lack of unified component standards across different frameworks. Components are highly coupled with specific frameworks, making cross-framework sharing impossible and requiring redevelopment. This not only increases the design costs for component providers but also raises the integration costs for users, and affects overall development efficiency.

[0033] Therefore, this application provides a component adaptation technical solution. In this technical solution: (1) All necessary component APIs (general APIs) are abstracted, and combined with the APIs of mainstream frameworks such as (Vue2, Vue3, React, SolidJS, VanillaJS), a component specification is generated (i.e., defining the underlying abstract class, also known as the prototype, component base class). The APIs of specific framework components are extracted and passed as parameters (options) to the definition method (adaptation tool) provided by the SDK kernel. The definition method can inherit the component base class according to the passed parameters to obtain component subclasses. Among them, the component subclasses can map the APIs of specific framework components to general APIs, thereby converting specific framework components into general components applicable to multiple frameworks. That is, a method for quickly converting specific framework components into general components is provided without intruding on framework selection. (2) It also provides the reverse adaptation capability of converting general components into framework components. Specifically, by using the API of the framework components to encapsulate the general components, the encapsulated framework components can be used directly in the framework instead of directly calling the original general components. This ensures that the framework and framework components are the same system when the framework is working, thus ensuring consistency and maintainability. (3) This not only reduces the design cost for component providers and the access cost for access providers, but also greatly improves development efficiency. See the following text for details.

[0034] The technical solutions of this application are described below through several embodiments. It should be understood that these embodiments can be implemented in many different forms and should not be construed as being limited to the embodiments set forth herein.

[0035] Example 1 Figure 1 A flowchart illustrating a component adaptation method according to Embodiment 1 of this application is shown schematically.

[0036] like Figure 1 As shown, the component adaptation method may include steps S100~S104, wherein: Step S100: Obtain the interface of the source framework component and the predefined component base class, wherein the component base class includes a general interface mapping rule.

[0037] Step S102: Based on the general interface mapping rule, map the interface of the source framework component to the interface of the general component, so as to convert the source framework component into a general component; wherein, the interface of the general component is determined according to the interfaces of multiple framework components, and the general component is applicable to the multiple frameworks.

[0038] The component adaptation method provided in this embodiment obtains the interface (API) of a specific framework component (source framework component), and passes the API of the specific framework component as a parameter to a predefined component base class. The component base class includes a general interface mapping rule used to map the API of the source framework component to the API of the general component, thereby converting the source framework component into a general component. The API of the general component is determined based on the APIs of various framework components, and the general component can be used in multiple different frameworks. Therefore, this embodiment provides a method for efficiently converting a specific framework component into a general component without intruding on framework selection. The general component is suitable for multi-framework access, which can reduce the design cost for component providers and the access cost for access providers, significantly improving development efficiency.

[0039] The following combination Figure 1 The steps in steps S100 to S102 and other optional steps are described in detail.

[0040] Step S100 Obtain the interfaces of the source framework components and the predefined component base classes, wherein the component base classes include general interface mapping rules.

[0041] The source framework can be any front-end framework, such as Vue2, Vue3, React, SolidJS, VanillaJS, etc. Source framework components are components developed within the source framework and can rely on the framework's features, such as lifecycle management, reactive data, state management, and style mechanisms. Each framework has its unique working principles and APIs, therefore source framework components are highly coupled with the source framework. Additional adaptation is required for source framework components to be used in other frameworks. This application provides a method for efficiently converting a specific framework component (source framework component) into a general component, which will be described exemplarily below.

[0042] Components can expose APIs for external calls or interaction, such as fetching data, performing operations, or exposing functionality. Different development frameworks may provide different APIs. For example, Vue 3 components provide a compositional API (setup) for mounting and unmounting, which can include multiple APIs such as beforeCreate (called before component instance initialization), created (called after component instance creation), beforeMount (called before DOM mounting), mounted (called after DOM mounting), beforeUnmount (called before unmounting), and unmounted (called after unmounting). React components, on the other hand, use componentDidMount and componentWillUnmount for mounting and unmounting. These API differences between frameworks prevent components from directly interacting.

[0043] Obtain the APIs of the source framework components, such as the watch function of Vue3 components (used to observe data changes and execute corresponding logic when data changes). These APIs will be adapted in subsequent steps.

[0044] The component base class (adapter tool) is a low-level abstract class that can include a prototype and definition methods. The prototype defines the specifications of the generic component, i.e., which APIs must be provided (the API of the generic component, also known as the general API). Correspondingly, the definition methods can be generic interface mapping rules, used to indicate how to map the interfaces of the source framework components to the interfaces of the generic components, such as... Figure 2As shown. In optional embodiments, the generic API can include at least the following six layers: props, actions (Invoke API), events, mount, unmount, and server-side rendering (SSR). These generic APIs must be provided to constitute a generic component. Specifically, to create a component instance, the `new` method can be called for initialization, which involves props. Calling the props interface and passing parameters allows for dynamic configuration of the component. For example, if the component needs text, it can be configured by passing in text. Mounting and unmounting involve the component's display in the user interface. Mounting renders the component into the view (simultaneously calling server-side rendering), while unmounting removes the component from the view. The component remains displayed in the view after mounting and before unmounting. Developers can call the APIs provided by the component to interact with it, mainly involving methods and events. Methods involve external active interaction with the component; for example, if the component is an editing area, the corresponding API can be called to display multiple input boxes. Events are notifications sent from within the component to the outside during its operation. For example, when watching videos or music, after pausing or stopping playback, an event is generated to notify externally that "playing is paused" or "playing has ended." For instance, attributes can include APIs such as New and Update, methods can include Dispatch, events can include Add Listener and RemoveListener, and server-side rendering can include Render, RenderAsync, and Render to string. Common APIs can be determined through various methods, such as exhaustive search or selection based on the specific scenario. An exemplary solution is provided below.

[0045] In optional embodiments, such as Figure 3 As shown, the general API can be obtained through the following operations: Step S300: Obtain various framework components.

[0046] Step S302: Determine the interface set corresponding to each of the various framework components.

[0047] Step S304: Determine the interface of the general component based on the intersection of the interface sets corresponding to each of the various framework components.

[0048] For example, multiple component instances can be obtained, which may come from various frameworks. The APIs provided by each component instance are determined, i.e., their respective API sets. The intersection of the API sets of the multiple component instances yields a common API.

[0049] In this embodiment, all necessary component APIs can be abstracted, and a common API can be determined by combining the APIs of mainstream frameworks (Vue2, Vue3, React, SolidJS, VanillaJS). This allows for the formulation of a common component specification, providing a clear standard for the conversion of specific framework components to common components, significantly reducing the difficulty of adaptation and improving the cross-framework compatibility of components.

[0050] Step S102 Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components, thereby converting the source framework components into general components. The interfaces of the general components are determined according to the interfaces of various framework components, and the general components are applicable to all of these frameworks.

[0051] The component base class can be used to receive the passed parameters (the API of the source framework component) and map the source framework component to the interface of the general component based on the general interface mapping rules, so as to convert the source framework component into a general component.

[0052] Below is a code example of a component base class: export type WaterComponentConstructor <p extends props,m extendsmethods,e events>= new (props: P) => WaterComponent<P, M, E> export const defineWaterComponent = (options: DefineComponentOptions<P, M, E>) : WaterComponentConstructor<P, M, E> = { const { name, Engine, emits, Render, renderAsync, renderToString } = options; return class extends WaterComponent<P, M, E> { …… } } Wherein, defineWaterComponent represents a component base class, used to receive the input parameter options (API of the original framework component), and map the API of the original framework component to the API of the universal component through the contained prototype and definition method, so as to convert (encapsulate) the original framework component into the universal component. The universal component is applicable to multiple framework access, and can realize efficient reuse.

[0053] In the embodiment, by mapping the API of the original framework component to the universal API, the original framework component is converted into the universal component, cross-framework component sharing is realized, and the development cost is significantly reduced.

[0054] Further, defineWaterComponent can also be used as the core of the adaptation tool, and based on the core, various framework corresponding adaptation tools (component subclasses) can be quickly extended for quick adaptation. The following provides an exemplary scheme.

[0055] In an optional embodiment, as shown in Figure 4 , step S102 can include: Step S400, determining a target framework, the target framework being different from the source framework.

[0056] Step S402, determining a target component subclass from a plurality of component subclasses according to the target framework; wherein one component subclass corresponds to one framework, the component subclass being obtained by inheriting the component base class according to the corresponding framework, and the component subclass including the interface mapping rule of the corresponding framework.

[0057] Step S404: mapping the interface of the source framework component to the interface of the target framework component based on the target component subclass, to convert the source framework component into the target framework component.

[0058] Exemplarily, multiple adaptation tools (component subclasses) can be quickly extended based on defineWaterComponent, such as defineVueWaterComponent, defineReactWaterComponent, defineSoildWaterComponent, defineVanillaWaterComponent, etc. Each component subclass can correspond to a framework, and include interface mapping rules of the corresponding framework, which are used to quickly map the API of the corresponding framework component to the API of the target framework component, so as to quickly convert the source framework component into the target framework component, and improve the efficiency of converting the source framework component into the universal component.

[0059] In this embodiment, the appropriate quick adaptation tool is automatically selected and applied according to the framework type, which can greatly improve the efficiency and reliability of cross-framework component sharing.

[0060] In an optional embodiment, the interface mapping rules of the corresponding framework include the universal interface mapping rules and the target interface mapping rules. Accordingly, step S404 can include: Step S4021: mapping the interface of the source framework component to the interface of the universal component based on the universal interface mapping rules.

[0061] Step S4022: mapping the interface of the universal component to the interface of the target framework component based on the target interface mapping rules.

[0062] Exemplarily, the source framework is Vue2, and the target framework is React. According to the target component subclass defineReactWaterComponent, the matching universal interface mapping rules and target interface mapping rules can be determined. The universal interface mapping rules can be used to indicate mapping the interface of the source framework component to the interface of the universal component. The target interface mapping rules can be used to indicate mapping the interface of the universal component to the interface of the target framework component.

[0063] In this embodiment, without invading the framework selection, a method for efficiently converting a specific framework component into a universal component and performing secondary packaging to obtain a target framework component is provided, which can reduce the design cost of the component provider and the access cost of the access party, and greatly improve the development efficiency.

[0064] The above embodiments exemplify the adaptation method of converting from source framework components to target framework components. The reverse adaptation method of converting from target framework components to source framework components will be introduced below.

[0065] In optional embodiments, such as Figure 5 As shown, component adaptation methods may also include: Step S500: Based on the source framework, determine the target anti-adaptive component class from the predefined anti-adaptive component classes; wherein, one anti-adaptive component class corresponds to one framework, and the anti-adaptive component class includes the anti-adaptive interface mapping rules of the corresponding framework.

[0066] Step S502: Based on the target anti-adaptive component class, map the interface of the target framework component to the interface of the source framework component, so as to convert the target framework component into the source framework component.

[0067] For example, the framework to be reverse-adapted, i.e., the target framework, can be different from the source framework. For instance, the source framework is Vue2, and the target framework is Vue3, React, SolidJS, etc. Figure 7 As shown. Obtain the de-adaptation tool (target de-adaptation component class) corresponding to the source framework. Multiple de-adaptation tools (de-adaptation component classes) can be pre-configured, each corresponding to a different framework, such as... Figure 2 The diagram shows Vue2 water, Vue3 water, React water, and Solid water. De-adaptation tools can include de-adaptation interface mapping rules to instruct the mapping of the target framework component's interface to the source framework component's interface, thereby converting the target framework component into a source framework component. For example, in the target framework (Vue2) component, the watch API can be used to call the source component's update API.

[0068] In this embodiment, a suitable reverse adaptation tool is selected for the target framework to map the API of the target framework component to the API of the source framework component. This allows for rapid reverse adaptation of the target framework component to the source framework component, achieving flexible cross-framework conversion, improving component compatibility and reusability, reducing overall development difficulty, and increasing efficiency. In some embodiments, such as Figure 6 As shown, it can also provide a fast anti-adaptation tool applicable to different frameworks based on the instantiation process of different frameworks.

[0069] The above embodiments exemplify the adaptation and anti-adaptation between different framework components, achieving bidirectional adaptation. Furthermore, during component conversion, an asynchronous loading scheme can be provided to further improve performance. An exemplary scheme is provided below.

[0070] In an optional embodiment, the component subclass further includes the engine of the corresponding framework. Correspondingly, the method may further include: invoking the engine of the target framework in the target component subclass to render the target framework component.

[0071] In this embodiment, the adaptation tool may also include the engine (the kernel part of the framework) of the corresponding framework. While inheriting from the component base class, the component subclass can also inject the engine of the target framework. During subsequent rendering of the target framework component, the internal engine of the target framework can be directly called for rendering.

[0072] In this embodiment, the engine of the target framework is encapsulated into the component subclass, which can directly call the framework kernel for efficient rendering during rendering, thereby improving the flexibility and rendering efficiency of the component.

[0073] In an optional embodiment, the method further includes: invoking the engine service of the remotely deployed target framework to render the target framework components.

[0074] In this embodiment, instead of passing in the corresponding framework's engine, the target framework component can be rendered through an asynchronous rendering process, such as fetching a remotely deployed public engine service for rendering. This reduces redundant kernel code and further improves performance.

[0075] To make this application easier to understand, an exemplary application is provided below.

[0076] S1: Obtain multiple components from various frameworks. Determine the set of APIs provided by these components and find their intersection to determine the common API (prototype). Based on the common API, a component specification (i.e., component base class, including prototype and defined methods; the defined methods are the common interface mapping rules) can be generated.

[0077] S2: Obtain the API of the first specific framework component, pass it as options to the component base class provided by the SDK kernel, and map the API of the first specific framework component to the general API based on the general interface mapping rules, thereby converting the first specific framework component into a general component.

[0078] S3: Determine the second specific framework and obtain the component subclass corresponding to the second specific framework. The component subclass includes the interface mapping rules corresponding to the second specific framework. By passing the API of the general component to the component subclass, the API of the general component can be mapped to the API of the component of the second specific framework, thereby converting the general component into a component of the second specific framework.

[0079] In this exemplary application: (1) Abstract all the necessary component APIs (general APIs) and combine them with the APIs of mainstream frameworks such as (Vue2, Vue3, React, SolidJS, VanillaJS) to generate component specifications (i.e., define the underlying abstract class, also known as the component base class). Extract the APIs of specific framework components and pass them as parameters (options) to the component base class (definition method, i.e., general interface mapping rules) provided by the SDK kernel. The definition method can perform API mapping according to the passed parameters to obtain the APIs of general components, thereby converting specific framework components into general components applicable to multiple frameworks. That is, it provides a method for quickly converting specific framework components into general components without intruding on framework selection. (2) At the same time, the APIs of framework components can be used to encapsulate general components, so that the encapsulated framework components can be used directly in the framework instead of directly calling the original general components. This ensures that the framework and framework components are the same system when the framework is working, ensuring consistency and maintainability. (3) This not only reduces the design cost for component providers and the access cost for access providers, but also greatly improves development efficiency.

[0080] Example 2 Figure 8 The diagram schematically illustrates a component adapter device according to Embodiment 2 of this application. This device can be divided into one or more program modules. One or more program modules are stored in a storage medium and executed by one or more processors to complete the embodiments of this application. The program module referred to in the embodiments of this application refers to a series of computer program instruction segments capable of performing a specific function. The following description will specifically introduce the function of each program module in this embodiment. For example... Figure 8 As shown, the device 1000 may include: an acquisition module 1100 and an adaptation module 1200, wherein: The module 1100 acquires the interfaces of the source framework components and the predefined component base class, wherein the component base class includes a general interface mapping rule; The adaptation module 1200 maps the interface of the source framework component to the interface of the general component based on the general interface mapping rule, so as to convert the source framework component into a general component. The interface of the general component is determined based on the interfaces of various framework components, and the general component is applicable to the various frameworks.

[0081] As an optional embodiment, the device 1000 is further used for: Determine a target framework, which is different from the source framework; Based on the target framework, a target component subclass is determined from multiple component subclasses; wherein, one component subclass corresponds to one framework, the component subclass is obtained by inheriting the component base class according to the corresponding framework, and the component subclass includes the interface mapping rules of the corresponding framework; Based on the target component subclass, the interface of the source framework component is mapped to the interface of the target framework component to convert the source framework component into the target framework component.

[0082] As an optional embodiment, the interface mapping rules of the corresponding framework include the general interface mapping rules and the target interface mapping rules; correspondingly, based on the target component subclass, mapping the interface of the source framework component to the interface of the target framework component includes: Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components; and Based on the target interface mapping rules, the interface of the general component is mapped to the interface of the target framework component.

[0083] As an optional embodiment, the device 1000 is further used for: Based on the source framework, a target anti-adaptive component class is determined from the predefined anti-adaptive component classes; wherein, one anti-adaptive component class corresponds to one framework, and the anti-adaptive component class includes the anti-adaptive interface mapping rules of the corresponding framework. Based on the target anti-adaptive component class, the interface of the target framework component is mapped to the interface of the source framework component, so as to convert the target framework component into the source framework component.

[0084] As an optional embodiment, the component subclass further includes the engine of the corresponding framework; correspondingly, the method further includes: calling the engine of the target framework in the target component subclass to render the target framework component.

[0085] As an optional embodiment, the device 1000 is further used for: The engine service of the remotely deployed target framework is invoked to render the target framework components.

[0086] As an optional embodiment, the interface of the general component is determined based on the interfaces of various framework components, including: Obtain various framework components; Determine the interface set corresponding to each of the various framework components; The interface of the general component is determined based on the intersection of the interface sets corresponding to the various framework components.

[0087] Example 3 Figure 9 This illustration schematically depicts a hardware architecture diagram of a computer device 10000 suitable for implementing a component adaptation method according to Embodiment 3 of this application. In some embodiments, the computer device 10000 may be a terminal device such as a smartphone, wearable device, tablet computer, personal computer, in-vehicle terminal, game console, virtual device, workbench, digital assistant, set-top box, robot, etc. In other embodiments, the computer device 10000 may be a rack server, blade server, tower server, or cabinet server (including standalone servers or server clusters composed of multiple servers), etc. Figure 9 As shown, the computer device 10000 includes, but is not limited to: a memory 10010, a processor 10020, and a network interface 10030 that can communicate and be linked with each other via a system bus. Wherein: The memory 10010 includes at least one type of computer-readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 10010 may be an internal storage module of a computer device 10000, such as the hard disk or memory of the computer device 10000. In other embodiments, the memory 10010 may also be an external storage device of the computer device 10000, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., equipped on the computer device 10000. Of course, the memory 10010 may also include both the internal storage module and the external storage device of the computer device 10000. In this embodiment, the memory 10010 is typically used to store the operating system and various application software installed on the computer device 10000, such as program code for component adaptation methods. Furthermore, the memory 10010 can also be used to temporarily store various types of data that have been output or will be output.

[0088] In some embodiments, processor 10020 may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other chip. Processor 10020 is typically used to control the overall operation of computer device 10000, such as performing control and processing related to data interaction or communication with computer device 10000. In this embodiment, processor 10020 is used to run program code stored in memory 10010 or process data.

[0089] Network interface 10030 may include a wireless network interface or a wired network interface, which is typically used to establish a communication link between computer device 10000 and other computer devices. For example, network interface 10030 is used to connect computer device 10000 to an external terminal via a network, establishing a data transmission channel and communication link between computer device 10000 and the external terminal. The network may be an intranet, the Internet, Global System for Mobile Communication (GSM), Wideband Code Division Multiple Access (WCDMA), 4G network, 5G network, Bluetooth, Wi-Fi, or other wireless or wired networks.

[0090] It should be pointed out that, Figure 9 Only computer devices with components 10010-10030 are shown; however, it should be understood that it is not required to implement all of the shown components, and more or fewer components may be implemented instead.

[0091] In this embodiment, the component adaptation method stored in memory 10010 can also be divided into one or more program modules and executed by one or more processors (such as processor 10020) to complete the embodiment of this application.

[0092] Example 4 This application also provides a computer-readable storage medium storing a computer program thereon, wherein the computer program, when executed by a processor, implements the steps of the component adaptation method in the embodiments.

[0093] In this embodiment, the computer-readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the computer-readable storage medium may be an internal storage unit of a computer device, such as the hard disk or memory of the computer device. In other embodiments, the computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, smart media card (SMC), secure digital (SD) card, flash card, etc., provided on the computer device. Of course, the computer-readable storage medium may include both the internal storage unit and the external storage device of the computer device. In this embodiment, the computer-readable storage medium is typically used to store the operating system and various application software installed on the computer device, such as the program code of the component adaptation method in the embodiment. In addition, the computer-readable storage medium can also be used to temporarily store various types of data that have been output or will be output.

[0094] Example 5 This application also provides a computer program product, including a computer program that, when executed by a processor, implements the methods described in the above embodiments.

[0095] Obviously, those skilled in the art should understand that the modules or steps of the embodiments of this application described above can be implemented using general-purpose computer devices. They can be centralized on a single computer device or distributed across a network of multiple computer devices. Optionally, they can be implemented using computer-executable program code, thereby storing them in a storage device for execution by a computer device. In some cases, the steps shown or described can be performed in a different order than those presented here, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the embodiments of this application are not limited to any particular combination of hardware and software.

[0096] It should be noted that the above are merely preferred embodiments of this application and do not limit the scope of patent protection of this application. Any equivalent structural or procedural changes made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of this application.

Claims

1. A component adaptation method, characterized in that, The method includes: Obtain the interfaces of the source framework components and the predefined component base class, wherein the component base class includes general interface mapping rules; Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components, so as to convert the source framework components into general components; The interface of the general component is determined based on the interfaces of various framework components, and the general component is applicable to the various frameworks.

2. The method according to claim 1, characterized in that, The method further includes: Determine a target framework, which is different from the source framework; Based on the target framework, a target component subclass is determined from multiple component subclasses; wherein, one component subclass corresponds to one framework, the component subclass is obtained by inheriting the component base class according to the corresponding framework, and the component subclass includes the interface mapping rules of the corresponding framework; Based on the target component subclass, the interface of the source framework component is mapped to the interface of the target framework component to convert the source framework component into the target framework component.

3. The method according to claim 2, characterized in that, The interface mapping rules for the corresponding framework include the general interface mapping rules and the target interface mapping rules; correspondingly, based on the target component subclass, mapping the interface of the source framework component to the interface of the target framework component includes: Based on the general interface mapping rules, the interfaces of the source framework components are mapped to the interfaces of the general components; and Based on the target interface mapping rules, the interface of the general component is mapped to the interface of the target framework component.

4. The method according to claim 2, characterized in that, The method further includes: Based on the source framework, a target anti-adaptive component class is determined from the predefined anti-adaptive component classes; wherein, one anti-adaptive component class corresponds to one framework, and the anti-adaptive component class includes the anti-adaptive interface mapping rules of the corresponding framework. Based on the target anti-adaptive component class, the interface of the target framework component is mapped to the interface of the source framework component, so as to convert the target framework component into the source framework component.

5. The method according to claim 2, characterized in that, The component subclass also includes the engine of the corresponding framework; correspondingly, the method further includes: calling the engine of the target framework in the target component subclass to render the target framework component.

6. The method according to claim 2, characterized in that, The method further includes: invoking the engine service of the remotely deployed target framework to render the target framework components.

7. The method according to claim 1, characterized in that, The interface of the general component is determined based on the interfaces of various framework components, including: Obtain various framework components; Determine the interface set corresponding to each of the various framework components; The interface of the general component is determined based on the intersection of the interface sets corresponding to the various framework components.

8. A component adapter, characterized in that, The device includes: The module retrieves the interfaces of the source framework components and the predefined component base class, wherein the component base class includes a general interface mapping rule; The adaptation module maps the interface of the source framework component to the interface of the general component based on the general interface mapping rule, so as to convert the source framework component into a general component; The interface of the general component is determined based on the interfaces of various framework components, and the general component is applicable to the various frameworks.

9. A computer device, characterized in that, include: At least one processor; and A memory communicatively connected to the at least one processor; wherein: The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that, when executed by a processor, implement the method as described in any one of claims 1 to 7.

11. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method described in claims 1 to 7.