A component extension method, device, equipment and medium of a user interface

Abstract

The application provides a component expansion method, device and equipment of a user interface and a medium, relates to the technical field of data analysis, and comprises the following steps: extracting a component type to be expanded from a received component creation instruction of the user interface; matching a target component class definition corresponding to the component type based on a relationship table defined based on different component types and different component classes; instantiating the target component class definition to generate a target component instance, and expanding the target component instance to the user interface. The application separates the corresponding relationship between the component type and the component class definition to a separate relationship table, decouples the component creation logic from the specific component class implementation, realizes the component expansion of the user interface without modifying the existing core code, and significantly reduces the development complexity and maintenance cost.

Description

Technical Field

[0001] This application relates to the field of data analysis technology, and more specifically, to a method, apparatus, device, and medium for extending user interface components. Background Technology

[0002] In data analytics platforms, users need to dynamically add or delete multiple filter conditions to construct complex queries that meet business analysis needs. Existing technologies typically couple all filtering logic into a single, large component, that is, hard-code each filter logic into the core module. When a new filter type needs to be added, the core code must be modified, resulting in high maintenance costs, poor scalability, and susceptibility to defects. Summary of the Invention

[0003] The purpose of this application is to provide a method, apparatus, device, and medium for extending user interface components, which solves the above-mentioned problems existing in the prior art, effectively improves the overall stability and reliability of dynamic user interfaces, and provides technical support for complex business scenarios.

[0004] In a first aspect, the present invention provides a method for extending components of a user interface, the method comprising: Extract the component types to be expanded from the received component creation instructions for the user interface; Based on the relationship table of different component types and different component class definitions configured, the target component class definition corresponding to the component type is matched; The target component class definition is instantiated to generate a target component instance, and the target component instance is extended to the user interface.

[0005] In an optional implementation, when no target component class definition corresponding to the component type is matched based on the relationship table of different component types and different component class definitions, the method further includes: Obtain the component class definition corresponding to the component type from the pre-built component library; Add the correspondence between the component type and the corresponding component class definition to the relationship table of different component types and different component class definitions to obtain the updated relationship table of different component types and different component class definitions; From the updated table of relationships between different component types and different component class definitions, match the target component class definition corresponding to the component type; Instantiate the target component class definition to generate the corresponding target component instance.

[0006] In an optional implementation, after generating the corresponding target component instance, the method further includes: Obtain the index value of the target component instance in the dynamic component list of the user interface; Based on the index value, a corresponding asynchronous task manager instance is created for the target component instance; the asynchronous task manager instance is used to manage the asynchronous tasks of the target component instance; An asynchronous task manager instance of the target component instance is stored at the position corresponding to the index value in the pre-built set of task instances; The preset initial execution state and preset initial task result of the target component instance are stored in the positions corresponding to the index value in the pre-built loading state set and task result set, respectively.

[0007] In an optional implementation, in response to an asynchronous operation triggering event for the target component instance, the method includes: Based on the index value of the target component instance, extract the target asynchronous task manager instance from the task instance set at the position corresponding to the index value; Execute the target asynchronous task manager instance to trigger asynchronous data retrieval logic; During the execution of the target asynchronous task manager instance, the execution status of the asynchronous task is updated to the position corresponding to the index value in the loading status set, and the task result of the asynchronous task is updated to the position corresponding to the index value in the task result set.

[0008] In an optional implementation, in response to a deletion instruction for the target component instance, the method includes: Obtain the target asynchronous task manager instance at the position corresponding to the index value in the task instance set, and call the preset cancellation method of the target asynchronous task manager instance to terminate the asynchronous task in the delayed waiting state; Clear the asynchronous task manager instance, execution status, and task result at the position corresponding to the index value of the target component instance in the task instance set, the loading status set, and the task result set, respectively.

[0009] In an optional implementation, after clearing the asynchronous task manager instance, execution state, and task result at the position corresponding to the index value of the target component instance in the task instance set, the loading state set, and the task result set, respectively, the method further includes: The asynchronous task manager instance whose index value is greater than the index value of the target component instance is used as the asynchronous task manager instance to be adjusted; Reindex the asynchronous task manager instance to be adjusted to obtain the updated index value of the asynchronous task manager instance.

[0010] In an optional implementation, in response to a state saving instruction for the user interface, the method includes: Obtain the component type and instance data of each component instance in the user interface; The component type and instance data of each component instance are serialized and stored to obtain the interface component data; In response to a state restoration instruction for the user interface, the method includes: The interface component data is deserialized, and the corresponding target component class definition is matched with each component type in the interface component data based on the relationship table of different component types and different component class definitions. Target component instances corresponding to each component type are generated, and the corresponding target component instances are updated according to the instance data to restore the user interface.

[0011] In a second aspect, the present invention provides a component extension device for a user interface, the device comprising: The extraction unit is used to extract the component type to be expanded from the received component creation instructions for the user interface; The matching unit is used to match the target component class definition corresponding to the component type based on the configured relationship table of different component types and different component class definitions. An instance unit is used to instantiate the target component class definition, generate a target component instance, and extend the target component instance to the user interface.

[0012] Thirdly, the present invention provides an electronic device, the electronic device including a processor, a communication interface, a memory and a communication bus, wherein the processor, the communication interface and the memory communicate with each other through the communication bus; Memory, used to store computer programs; When a processor executes a program stored in memory, it implements the method described in any of the foregoing embodiments.

[0013] Fourthly, the present invention provides a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the method described in any of the foregoing embodiments.

[0014] This application enables the expansion of user interface components without modifying existing core code, significantly reducing development complexity and maintenance costs. By extracting the mapping between component types and component class definitions into an independent relationship table, this application decouples component creation logic from the implementation of specific component classes. When adding a new component type, only the corresponding relationship needs to be added to the relationship table; no modification to the core logic code is required. When a component creation instruction is received, the target component class is dynamically matched and instantiated through table lookup, achieving on-demand component expansion. This method reduces maintenance costs, avoids the risk of introducing errors due to core code modifications, and significantly improves the scalability of dynamic user interfaces. Attached Figure Description

[0015] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments of this application will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 A flowchart illustrating a component extension method for a user interface provided in an embodiment of this application; Figure 2 A schematic diagram of the structure of a component expansion device for a user interface provided in an embodiment of this application; Figure 3 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0017] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of the embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0018] The component extension method for the user interface provided in this application embodiment can be applied to a component extension system for the user interface, which may include: a builder layer, a dynamic loading layer, and an atomic component layer. The builder layer, as the root container, is used to maintain a collection of all component instances within the user interface and manage the dynamic component list, including the addition and deletion of component instances. The dynamic loading layer includes a dynamic component loader. The component loader pre-stores a table mapping different component types to their corresponding component class definitions. This table can be implemented using a key-value pair data structure, where the key is a component type identifier (e.g., strings like "time", "industry", "city"), and the value is the corresponding component class definition. When the dynamic component loader receives a component type, it can dynamically select and instantiate the corresponding underlying component module by querying this table. When a new component type needs to be added, only the mapping between the new component type and its corresponding component class definition needs to be added to the table; no modification to the core logic code is required. The atomic component layer contains multiple concrete component class definitions that implement the predefined standard interface; the component class definition is a component class that implements the predefined standard interface; the standard interface includes at least the data attribute definition, the state change callback method definition, and the asynchronous data retrieval method definition; since each concrete filter module implements the standard interface, the dynamic component loader can call and operate all concrete filter modules in a unified way without having to care about the internal implementation details of each module.

[0019] This application adopts a three-tier dynamic component architecture. Through modular design and component registration mechanism, it enables plug-and-play new functions without modifying the core code.

[0020] The preferred embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit this application. Furthermore, the embodiments and features in the embodiments of this application can be combined with each other without conflict.

[0021] Figure 1 This is a flowchart illustrating a method for extending user interface components according to an embodiment of this application. Figure 1 As shown, the method may include: Step S110: Extract the component type to be expanded from the received component creation instructions for the user interface.

[0022] Among them, the component can be a filter component, and the corresponding component type can be a filter type.

[0023] In practice, when a user needs to add a filter component to the dynamic user interface, the front-end user interface generates a component creation instruction. After receiving the component creation instruction, the instruction is parsed to extract the target component type that the user expects to add, i.e., the component type to be expanded. The component type can be time range, event attribute, or industry, etc.

[0024] Step S120: Based on the relationship table of different component types and different component class definitions in the configuration, match the target component class definition corresponding to the component type.

[0025] In practice, a relationship table is maintained in the dynamic loading layer. This table records the correspondence between different component types and their corresponding component class definitions. By querying this table, the target component class definition that matches the component type to be extended can be quickly located. All component class definitions are classes that implement predefined standard interfaces. These standard interfaces require component classes to include data attribute definitions, state change callback method definitions, and asynchronous data retrieval method definitions, thereby ensuring that all components have a unified interaction specification.

[0026] In another embodiment of this application, to address the possibility of unregistered component types, this embodiment provides a dynamic extension mechanism; when no target component class definition corresponding to a component type is matched based on the configured relationship table of different component types and different component class definitions, the method may further include: Retrieve the component class definition corresponding to the component type from the pre-built component library; specifically, retrieve and load the component class definition file corresponding to the component type from the pre-built component library. The correspondence between component types and their corresponding component class definitions is added to the relationship table of different component types and different component class definitions, resulting in an updated relationship table of different component types and different component class definitions. In particular, a component registration mechanism is used to register the correspondence between component types and their corresponding component class definitions to the relationship table, so as to ensure that when adding new component functions, only the component class definition needs to be added and the relationship table updated, without any modification to the core code. From the updated table of different component types and different component class definitions, match the target component class definition corresponding to the component type; Instantiate the target component class definition and generate the corresponding target component instance.

[0027] This application's dynamic expansion mechanism ensures that even if the target component type is not pre-registered in the relationship table, the corresponding component class definition can still be retrieved and loaded from the component library, avoiding creation failures due to missing component types and enhancing fault tolerance. Based on this, the correspondence between newly acquired component types and component class definitions is dynamically registered in the relationship table, making this correspondence persistently available in subsequent operations without repeated loading, thus ensuring high runtime efficiency. The entire process, from component library retrieval and relationship table updates to instantiation, is fully automated without modifying any core logic code. Adding new component functionality only requires adding a new component class definition and a corresponding relationship in the relationship table; the runtime can dynamically recognize and support the new component type, achieving true plug-and-play functionality and significantly reducing expansion costs and maintenance complexity.

[0028] Step S130: Instantiate the target component class definition, generate a target component instance, and extend the target component instance to the user interface.

[0029] In practice, after the dynamic component loader matches the target component class definition by querying the relationship table, it performs an instantiation operation on the target component class definition. Instantiation means allocating space in memory for the component class definition and calling its constructor to generate a specific component object. This component object is the target component instance, which contains all the data attributes and method logic defined in the class definition. After generating a target component instance, the dynamic component loader adds the instance to the dynamic component list of the user interface. This mounts the target component instance to the top-level builder module (root container) of the user interface, thus visually completing the seamless extension of the new component into the user interface. The dynamic component list is a container area in the user interface used to display all added components. After addition, the user can see the newly generated filter component on the user interface and interact with it. For example, when the target component class is defined as an "industry filter class," instantiating this class to generate an industry filter instance and adding it to the dynamic component list of the user interface allows the user to see the new industry filter component on the user interface and enter keywords in its input box to perform an industry search. Similarly, when the target component class is defined as a "time range filter class," instantiating this class to generate a time range filter instance allows the user to see the new time range filter component on the user interface and select the start and end times in its time selector.

[0030] In the above process, since the target component class definition has already implemented the standard interface, the dynamic component loader does not need to care about the specific implementation details inside the class definition; it only needs to generate component instances through a unified instantiation method. Component instances extended to the user interface can run independently and interact with the user.

[0031] This application generates an independent component instance containing complete data attributes and method logic by allocating space in memory for the target component class and calling its constructor. This ensures that the instance has complete lifecycle management and interactive responsiveness. After the dynamic component loader mounts this instance to the top-level builder module, the new component becomes a member of the dynamic component list in the user interface. Users can see the newly added filter component on the user interface and interact with it immediately without refreshing the page, achieving seamless runtime expansion of components. Since the target component class definition has pre-implemented the standard interface, the dynamic component loader does not need to care about the internal implementation details of the specific component class. It can complete the expansion of any type of component through a unified instantiation and mounting process, ensuring the uniformity and standardization of the expansion method and effectively avoiding code bloat and maintenance difficulties caused by introducing different expansion methods for different types of components.

[0032] In another embodiment of this application, after generating the target component instance, to ensure the stability of a large number of asynchronous operations (such as remote search and data loading) in the user interface, this embodiment introduces an index-based asynchronous task lifecycle management mechanism. Specifically, this includes: Get the index value of the target component instance in the dynamic component list of the user interface; where the index value represents the absolute physical location of the component in the dynamic component list of the user interface; Based on the index value, a corresponding asynchronous task manager instance is created for the target component instance. The asynchronous task manager instance is used to manage the asynchronous tasks of the target component instance. The asynchronous task manager instance can be a function instance with debouncing functionality. At the same time, the index value is immutably bound to the asynchronous task manager instance as an internal parameter. An asynchronous task manager instance of the target component instance is stored at the position corresponding to the index value in the pre-built collection of task instances; The preset initial execution state and preset initial task result of the target component instance are stored at the positions corresponding to the index values ​​in the pre-built loading state set and task result set, respectively. The task instance set, loading state set, and task result set are pre-built parallel state data structures. The task instance set is an array structure with a length consistent with the number of UI components, and each position stores the asynchronous task manager instance of the corresponding UI component. The loading state set is a boolean array used to record whether the asynchronous task corresponding to each UI component is currently executing; each boolean value in the array is directly associated with the loading state of the UI component at the corresponding position. The task result set is an array of objects used to store the return result after each asynchronous task is completed. Each position corresponds to a UI component, containing the execution results of the tasks related to that component, such as the list of searched candidates. Specifically, the newly created asynchronous task manager instance is stored in the task instance collection at the position corresponding to the index value, and the preset initial execution state and preset initial task result are stored in the corresponding positions of the loading state collection and the task result collection, respectively. The preset initial execution state and preset initial task result are the initial values ​​of the execution state and task result of each component instance set in advance, and the initial value can be an empty set.

[0033] This application achieves precise binding between asynchronous tasks and their respective components by assigning an independent index value to each component instance and creating a dedicated asynchronous task manager instance based on that index value. Since the asynchronous task manager instance immutably binds this index value as an internal parameter during creation, all subsequent state read / write operations are located using the corresponding position of this index value in the three parallel sets, avoiding task-component mismatch issues caused by index changes due to dynamic list additions and deletions. The one-to-one correspondence between the task instance set, loading state set, and task result set ensures that the execution state and task result of any component instance's asynchronous task are accurately synchronized to the storage location corresponding to that component instance during and after execution, preventing data crosstalk caused by component additions, deletions, or rapid user operations. Simultaneously, the preset initial execution state and preset initial task result settings ensure that each component instance possesses a complete data structure upon creation, providing a reliable state baseline for subsequent asynchronous task execution and enhancing data consistency and operational stability in asynchronous scenarios.

[0034] In another embodiment of this application, when a user triggers an asynchronous operation on a target component instance, the method may further include, in response to an asynchronous operation triggering event on the target component instance: Based on the index value of the target component instance, extract the target asynchronous task manager instance from the task instance collection at the position corresponding to the index value; Execute the target asynchronous task manager instance to trigger asynchronous data fetching logic; During the execution of the target asynchronous task manager instance, the execution status of the asynchronous task is updated to the position corresponding to the index value in the loading status set, and the task result of the asynchronous task is updated to the position corresponding to the index value in the task result set, thereby ensuring the accurate mapping between the UI state and the underlying data.

[0035] In another embodiment of this application, when a user triggers a delete command for a target component instance, to prevent memory leaks and data corruption, an indivisible atomic removal and reindexing operation is performed; in response to the delete command for the target component instance, the method may further include: Get the target asynchronous task manager instance at the position corresponding to the index value in the task instance collection, and call the default cancellation method of the target asynchronous task manager instance to terminate the asynchronous task in the delayed waiting state, so as to prevent the asynchronous task with deleted component instance from continuing to occupy resources or attempting to operate on the destroyed component instance. Clear the asynchronous task manager instance, execution status, and task result at the index corresponding to the target component instance in the task instance set, loading status set, and task result set, respectively. Specifically, clear the asynchronous task manager instance at the index corresponding to the target component instance in the task instance set, clear the execution status at the index corresponding to the target component instance in the loading status set, and clear the task result at the index corresponding to the target component instance in the task result set. All data corresponding to this index value in all three sets is removed, and the set length is reduced by one accordingly. Asynchronous task manager instances whose index values ​​are greater than the index value of the target component instance are designated as asynchronous task manager instances to be adjusted. Specifically, since the index values ​​of all component instances that were originally arranged after the target component instance are deleted, they will all move forward one position. The old index values ​​that these subsequent component instances originally held are no longer consistent with their actual positions in the dynamic list. Therefore, all the remaining asynchronous task manager instances in the task instance set are traversed, and asynchronous task manager instances whose index values ​​are greater than the index value of the deleted component instance are designated as asynchronous task manager instances to be adjusted. The asynchronous task manager instance to be adjusted is reindexed to obtain the updated index value of the asynchronous task manager instance. Through this reindexing mechanism, the problem of subsequent component index offset and data update disorder caused by component deletion is completely solved.

[0036] In the above embodiments of this application, reindexing the asynchronous task manager instance to be adjusted to obtain the updated index value of the asynchronous task manager instance to be adjusted may include: For any asynchronous task manager instance to be adjusted, obtain the current index value corresponding to that instance, and the new index value corresponding to the position of the component instance corresponding to that instance in the dynamic component list. The relationship between the old and new index values ​​is: the new index value equals the old index value minus one, because after deleting a component instance, all component instances arranged after the deleted component instance move forward one position. For example, if there are three component instances with index values ​​of 0, 1, and 2 in the dynamic list, and the user deletes the component instance with index value 1, the component instance with index value 2 will move forward to the position of index value 1. When performing reindexing, obtain the old index value (2) currently bound to the asynchronous task manager instance corresponding to the component instance, obtain its new index value (1) in the dynamic list, and then update the index value bound to the asynchronous task manager instance from 2 to 1.

[0037] In the above embodiments, the re-indexing process includes destroying the asynchronous task manager instance to be adjusted and creating a new asynchronous task manager instance, binding the updated index value to the new instance. Specifically, first, the asynchronous task manager instance to be adjusted is destroyed to release its resources. Then, a brand new asynchronous task manager instance is created using the updated index value as an internal parameter, and the updated index value is bound to the new instance. Finally, the new instance is stored in the task instance collection at the position corresponding to the updated index value. Through the above operations, the asynchronous task manager instances of all subsequent component instances hold index values ​​that are completely consistent with the actual positions in the dynamic list, ensuring the accuracy of data positioning in subsequent call operations.

[0038] This application presents an index-based asynchronous task lifecycle management method that uses a "cancel-clean up-reindex" mechanism to ensure the correct correspondence between asynchronous tasks and user interface elements, thereby avoiding memory leaks and data corruption.

[0039] In another embodiment of this application, to ensure that the state of complex user interfaces can be accurately saved and restored, this embodiment provides a mechanism for the serialization, persistence, and reconstruction of responsive states. In response to a state saving instruction for the user interface, the method may further include: Retrieves the component type and instance data of each component instance in the user interface. The component type identifies the category of the component, such as "time range," "event attribute," or "industry." Instance data is the current data stored internally within the component instance, such as the specific value selected by the user, entered keywords, or configured parameters. Instance data is unrelated to the component instance's index position in the dynamic list; it is the component instance's own business data. The component type and instance data of each component instance are serialized and stored to obtain the UI component data. Specifically, a recursive data unpacking function is called to traverse the reactive data model, identify and remove the reactive proxy tags injected by the framework, and finally return a clean JavaScript data object. This clean data object is then serialized and stored to obtain the UI component data. The UI component data contains all the information needed to reconstruct the current user interface, including the component type and instance data of each component instance. The serialized UI component data can be stored in local storage, a database, or exported as an external file for later recovery and use. In response to a state restoration command for the user interface, the method may further include: The process involves deserializing the UI component data and matching the corresponding target component class definitions based on a relationship table of different component types and class definitions. This generates target component instances for each component type, and updates these instances based on their data to restore the user interface. For example, a user saves a query interface containing three components: a "Time Range Filter," an "Industry Filter," and a "City Filter." The "Industry Filter" has "Automobile Manufacturing" selected, and the "City Filter" has "Beijing" selected. When the user subsequently loads this saved query, the three component instances are reconstructed sequentially based on the stored data. "Automobile Manufacturing" is assigned to the reconstructed "Industry Filter," and "Beijing" is assigned to the reconstructed "City Filter," thus restoring the user interface to its saved state. During this process, the restoration involves querying the relationship table to match the component class definition and instantiating it for each component data point, with the specific implementation method consistent with the aforementioned component creation process.

[0040] This application provides a secure serialization method for responsive states, which achieves accurate saving and reliable recovery of complex user interface states through recursive data extraction and state reconstruction mechanisms.

[0041] In another embodiment of this application, in response to a global context change event or a component containing a target component instance being destroyed, the method may further include: Iterate through all currently existing asynchronous task manager instances in the task instance collection; call the cancellation method of each asynchronous task manager instance in turn to release the corresponding memory resources and terminate any remaining asynchronous tasks in the background.

[0042] In yet another embodiment of this application, in response to a deletion instruction for a target component instance, the method may further include: Send a reindexing signal to each asynchronous task manager instance to be adjusted; when the asynchronous task manager instance to be adjusted receives the reindexing signal, it changes from the running state to the suspended state and stops receiving new asynchronous operation trigger events, but the asynchronous tasks that are already being executed continue to run; after completing all reindexing operations, send a reindexing completion signal to each asynchronous task manager instance to be adjusted, release the suspended state, and resume receiving asynchronous operation trigger events. If an exception occurs during the reindexing process (such as insufficient memory, instantiation failure, etc.), the system will automatically roll back to the state before the deletion operation. This means that the canceled Task Manager instance, the cleaned data structures, and the reindexed instance will all be restored to the state before the deletion operation, and an error message will be returned to the user interface to inform the user that the deletion operation failed.

[0043] In yet another embodiment of this application, in response to a deletion instruction for a target component instance, the method may further include: Calculate the number of subsequent component instances from the position to be deleted to the end of the dynamic component list; when the number of subsequent component instances exceeds a preset threshold, a progressive reindexing strategy is adopted. Under the progressive reindexing strategy, an offset marker is added to each asynchronous task manager instance to be adjusted, recording the offset information that the index value of each asynchronous task manager instance to be adjusted needs to be reduced by one; when each asynchronous task manager instance to be adjusted receives the offset marker, it changes from the pending update state to the marked state. When a user operation triggers an asynchronous task manager instance that is in the marked state to be adjusted, the index value of the asynchronous task manager instance to be adjusted is updated to the new index value according to the offset flag of the asynchronous task manager instance to be adjusted; after a single index update is completed, the offset flag of the asynchronous task manager instance to be adjusted is cleared, and the asynchronous task manager instance to be adjusted changes from the marked state to the updated state. During incremental reindexing, an index remapping table is maintained in the task instance set. This table records the mapping relationship between the old and new indexes of each marked asynchronous task manager instance to be adjusted. When an index-based data read / write operation is received, the index remapping table is queried. If a corresponding mapping is found, the data read / write operation is performed at the updated index position based on the mapping. If no corresponding mapping is found, the data read / write operation is performed directly based on the original index value. After each asynchronous task manager instance to be adjusted completes its index update, the corresponding mapping relationship for that instance is removed from the index remapping table.

[0044] The relationship table stores the mapping between component types and component class definitions. The component class definition is the file path or module identifier of the component class definition, not the class definition itself loaded into memory. At startup, only the relationship table is loaded into memory; no component class definition files are loaded.

[0045] In another embodiment of this application, the relationship table also includes the file path or module identifier corresponding to each component class. When a target component class definition is matched based on the relationship table, it is determined whether the component class corresponding to the target component class definition has been loaded into memory. If it has been loaded into memory, the component class definition is directly instantiated. If it has not been loaded into memory, the component class definition file is dynamically loaded into memory according to the file path or module identifier stored in the relationship table, and then the loaded component class definition is instantiated. After loading, the component class is cached in memory. When a component of the same type needs to be instantiated again, the cached component class is directly retrieved from memory for instantiation, without the need for repeated loading.

[0046] In another implementation, when dynamically loading component class definition files, an asynchronous loading method is adopted, that is, the file loading and class definition parsing operations are performed in a background thread, the user interface is not blocked, and the subsequent instantiation operation is triggered through a callback or event notification mechanism after loading is completed.

[0047] Through the aforementioned lazy loading mechanism, this application delays the loading of a large number of component class definitions from startup to the first use, significantly reducing startup time and memory usage. Furthermore, since newly added component class definition files only need to be placed in a specified directory or uploaded to a server, no modifications to the core code are required.

[0048] In another embodiment of this application, to further reduce the workload of maintaining the relational table and improve the fault tolerance of matching, this application also provides a wildcard-based component type matching strategy. Specifically, the component types stored in the relational table support wildcard matching. Component types can contain wildcards to match a class of component types. For example, a record can be configured in the relational table where the component type is "*_filter", and the corresponding component class definition is a general filter component class definition. When a user requests to create "industry_filter" or "city_filter", an exact match is first performed in the relational table; when the exact match fails, the requested component type is matched with the wildcard pattern in the relational table; when a matching wildcard pattern is found, the component class definition corresponding to the wildcard pattern is determined as the target component class definition. For example, the relational table is configured with a general selector component class definition corresponding to "filter" and a dedicated industry filter component class definition corresponding to "industry filter". When a user requests to create "industry_filter", an exact match is first performed, and if a dedicated industry filter component class definition is found, it is determined as the target component class definition. When a user requests to create a "city_filter", an exact match is first performed, but no corresponding component class definition is found. Then, a wildcard pattern match is performed, which matches the general selector component class definition corresponding to "filter" and is identified as the target component class definition.

[0049] By employing the wildcard matching strategy described above, this application can cover a group of component types without modifying the core code, eliminating the need to register each specific component type individually in the relational table. Only one wildcard pattern needs to be configured to cover all component types, significantly reducing the workload of maintaining the relational table. Furthermore, the priority given to exact matching over wildcard matching ensures that special component types can still use dedicated component class definitions, balancing both general and specific scenarios.

[0050] Corresponding to the above method, embodiments of this application also provide a component extension device for a user interface, such as... Figure 2 As shown, the component extension device of this user interface includes: Extraction unit 210 is used to extract the component type to be expanded from the received component creation instructions for the user interface; Matching unit 220 is used to match the target component class definition corresponding to the component type based on the relationship table of different component types and different component class definitions configured; Instance unit 230 is used to instantiate the target component class definition, generate a target component instance, and extend the target component instance to the user interface.

[0051] The functions of each functional unit of the component extension device for the user interface provided in the above embodiments of this application can be implemented through the above method steps. Therefore, the specific working process and beneficial effects of each unit in the component extension device for the user interface provided in the embodiments of this application will not be repeated here.

[0052] This application also provides an electronic device, such as... Figure 3 As shown, it includes a processor 310, a communication interface 320, a memory 330, and a communication bus 340, wherein the processor 310, the communication interface 320, and the memory 330 communicate with each other through the communication bus 340.

[0053] Memory 330 is used to store computer programs; When the processor 310 executes the program stored in the memory 330, it performs the following steps: Extract the component types to be expanded from the received component creation instructions for the user interface; Based on the relationship table of different component types and different component class definitions configured, the target component class definition corresponding to the component type is matched; Instantiate the target component class definition to generate a target component instance, and extend the target component instance to the user interface.

[0054] The communication bus mentioned above can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0055] The communication interface is used for communication between the aforementioned electronic devices and other devices.

[0056] The memory may include random access memory (RAM) or non-volatile memory (NVM), such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0057] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be 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, or discrete hardware components.

[0058] The implementation methods and beneficial effects of the various components of the electronic device in the above embodiments for solving the problem can be found in [reference needed]. Figure 1 The steps in the illustrated embodiments are used to implement the electronic device. Therefore, the specific working process and beneficial effects of the electronic device provided in this application will not be repeated here.

[0059] In another embodiment provided in this application, a computer-readable storage medium is also provided, which stores instructions that, when executed on a computer, cause the computer to perform any of the user interface component extension methods described in the above embodiments.

[0060] In another embodiment provided in this application, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to execute the component extension method of the user interface described in any of the above embodiments.

[0061] Those skilled in the art will understand that the embodiments in this application can be provided as methods, systems, or computer program products. Therefore, the embodiments in this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the embodiments in this application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0062] This application describes embodiments of methods, apparatus (systems), and computer program products according to embodiments of this application with reference to flowchart illustrations and / or block diagrams. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0063] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0064] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0065] Although preferred embodiments have been described in this application, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the embodiments of this application.

[0066] Obviously, those skilled in the art can make various modifications and variations to the embodiments of this application without departing from the spirit and scope of the embodiments of this application. Therefore, if these modifications and variations to the embodiments of this application fall within the scope of the claims in this application and their equivalents, then this application also intends to include these modifications and variations.

Claims

1. A method for extending user interface components, characterized in that, The method includes: Extract the component types to be expanded from the received component creation instructions for the user interface; Based on the relationship table of different component types and different component class definitions configured, the target component class definition corresponding to the component type is matched; The target component class definition is instantiated to generate a target component instance, and the target component instance is extended to the user interface.

2. The method as described in claim 1, characterized in that, When the relationship table based on different component types and different component class definitions does not match the target component class definition corresponding to the component type, the method further includes: Obtain the component class definition corresponding to the component type from the pre-built component library; Add the correspondence between the component type and the corresponding component class definition to the relationship table of different component types and different component class definitions to obtain the updated relationship table of different component types and different component class definitions; From the updated table of relationships between different component types and different component class definitions, match the target component class definition corresponding to the component type; Instantiate the target component class definition to generate the corresponding target component instance.

3. The method as described in claim 1, characterized in that, After generating the corresponding target component instance, the method further includes: Obtain the index value of the target component instance in the dynamic component list of the user interface; Based on the index value, a corresponding asynchronous task manager instance is created for the target component instance; the asynchronous task manager instance is used to manage the asynchronous tasks of the target component instance; An asynchronous task manager instance of the target component instance is stored at the position corresponding to the index value in the pre-built set of task instances; The preset initial execution state and preset initial task result of the target component instance are stored in the positions corresponding to the index value in the pre-built loading state set and task result set, respectively.

4. The method as described in claim 3, characterized in that, In response to an asynchronous operation trigger event for the target component instance, the method includes: Based on the index value of the target component instance, extract the target asynchronous task manager instance from the task instance set at the position corresponding to the index value; Execute the target asynchronous task manager instance to trigger asynchronous data retrieval logic; During the execution of the target asynchronous task manager instance, the execution status of the asynchronous task is updated to the position corresponding to the index value in the loading status set, and the task result of the asynchronous task is updated to the position corresponding to the index value in the task result set.

5. The method as described in claim 4, characterized in that, In response to a deletion instruction for the target component instance, the method includes: Obtain the target asynchronous task manager instance at the position corresponding to the index value in the task instance set, and call the preset cancellation method of the target asynchronous task manager instance to terminate the asynchronous task in the delayed waiting state; Clear the asynchronous task manager instance, execution status, and task result at the position corresponding to the index value of the target component instance in the task instance set, the loading status set, and the task result set, respectively.

6. The method as described in claim 5, characterized in that, After clearing the asynchronous task manager instance, execution status, and task result at the position corresponding to the index value of the target component instance in the task instance set, the loading status set, and the task result set, respectively, the method further includes: The asynchronous task manager instance whose index value is greater than the index value of the target component instance is used as the asynchronous task manager instance to be adjusted; Reindex the asynchronous task manager instance to be adjusted to obtain the updated index value of the asynchronous task manager instance.

7. The method as described in claim 1, characterized in that, In response to a state saving instruction for the user interface, the method includes: Obtain the component type and instance data of each component instance in the user interface; The component type and instance data of each component instance are serialized and stored to obtain the interface component data; In response to a state restoration instruction for the user interface, the method includes: The interface component data is deserialized, and the corresponding target component class definition is matched with each component type in the interface component data based on the relationship table of different component types and different component class definitions. Target component instances corresponding to each component type are generated, and the corresponding target component instances are updated according to the instance data to restore the user interface.

8. A component extension device for a user interface, characterized in that, The device includes: The extraction unit is used to extract the component type to be expanded from the received component creation instructions for the user interface; The matching unit is used to match the target component class definition corresponding to the component type based on the configured relationship table of different component types and different component class definitions. An instance unit is used to instantiate the target component class definition, generate a target component instance, and extend the target component instance to the user interface.

9. An electronic device, characterized in that, The electronic device includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements the method of any one of claims 1-7.

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

Images