A general basic capability adaptation method, device and storage medium for micro front-ends

Abstract

The present application discloses a general basic capability adaptation method, device and storage medium for micro-frontends, including: determining the sub-application to be loaded currently and obtaining the characteristic parameters of the sub-application; calculating the characteristic parameters through a preset adapter matching algorithm, and determining the adapter that matches the sub-application based on the calculation result; setting the configuration items of the adapter based on the characteristic parameters of the sub-application; and when the sub-application is activated, mounting the page content of the sub-application to the micro-frontend framework for display through the adapter. The general micro-frontend adapter proposed in the present application can automatically adapt the front-end framework according to the sub-application framework, and judge the micro-frontend technology and base implementation to be adopted according to the operating environment, thereby solving the adaptation problem of different micro-frontend technology frameworks and base implementations, and increasing the flexibility and scalability of micro-frontend framework integration by processing differences such as gateway authentication and request headers through the adapted requester.

Description

Technical Field

[0001] The present application relates to the technical field of micro-frontend frameworks, and in particular to a general basic capability adaptation method, device, and storage medium for micro-frontends. Background Art

[0002] When a base system integrates multiple sub-applications on its main site, if these sub-applications use different front-end frameworks, the micro-frontend of the front-end architecture model should be used to integrate the sub-applications, such as React, Vue, and Angular.

[0003] Because different frameworks use different technology stacks, micro-frontend integration can only adapt to one technology framework and not multiple. If the base system needs to integrate sub-applications with different technology stacks, specific configuration and code modifications must be made based on the different technologies and bases, which increases the complexity of the system.

[0004] The above content is only used to assist in understanding the technical solution of this application and does not constitute an admission that the above content is prior art. Summary of the Invention

[0005] The main purpose of this application is to provide a general basic capability adaptation method, device and storage medium for micro-frontends, aiming to solve the technical problem that the existing micro-frontend integration cannot adapt to front-end frameworks of various technical types, resulting in the inability of the base system to seamlessly integrate multiple sub-applications.

[0006] To achieve the above objectives, this application proposes a general basic capability adaptation method for micro front-ends, which includes:

[0007] Determine the sub-application currently to be loaded and obtain characteristic parameters of the sub-application;

[0008] Calculating the characteristic parameters using a preset adapter matching algorithm, and determining an adapter that matches the sub-application based on the calculation result;

[0009] Setting configuration items of the adapter according to characteristic parameters of the sub-application;

[0010] When the sub-application is activated, the page content of the sub-application is mounted to the micro-frontend framework for display through the adapter.

[0011] In one embodiment, the step of determining the sub-application to be loaded and obtaining characteristic parameters of the sub-application includes:

[0012] Reading a loading event of the sub-application to determine a loading status of the sub-application;

[0013] If the sub-application is not loaded, obtaining the static resources of the sub-application and extracting the characteristic parameters from the static resources;

[0014] If the sub-application has been loaded, the behavior characteristic data of the sub-application is detected, and the characteristic parameters are extracted through the behavior characteristic data.

[0015] In one embodiment, the step of calculating the characteristic parameters using a preset adapter matching algorithm and determining an adapter matching the sub-application according to the calculation result includes:

[0016] Determine a weight allocation algorithm based on the business requirements of the sub-application;

[0017] Assigning weight values corresponding to the characteristic parameters using the weight assignment algorithm, and calculating the comprehensive score of the sub-application using the weight values;

[0018] An adapter matching the sub-application is determined according to the comprehensive score and the characteristic parameters.

[0019] In one embodiment, the step of determining an adapter matching the sub-application based on the comprehensive score and the characteristic parameters includes:

[0020] determining whether the comprehensive score and the characteristic parameters satisfy a matching rule of the adapter;

[0021] When it is determined that the conditions are met, the adapter is used as the adapter matched with the sub-application.

[0022] In one embodiment, the step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes:

[0023] Obtaining demand data of the sub-application;

[0024] Setting the routing path of the adapter according to the URL data extracted from the demand data;

[0025] The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

[0026] In one embodiment, when the sub-application is activated, the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter includes:

[0027] Reading the decoration parameter set embedded in the routing path of the adapter, and selecting a matching page framework from the micro-frontend framework according to the decoration parameter set;

[0028] When the page frame is not selected, creating the page frame according to the decoration parameter set;

[0029] The page content of the sub-application is displayed through the created page frame.

[0030] In one embodiment, after the step of calculating the characteristic parameters using a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes:

[0031] Calling the initialization method of the adapter to initialize the adapter and register the event detector;

[0032] Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes:

[0033] After detecting that the base system has been loaded, detecting the activation state of the sub-application.

[0034] In one embodiment, before the step of calculating the characteristic parameters using a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes:

[0035] Create a new adapter and store the adapter in the micro front-end framework;

[0036] According to the sub-application integration requirements of the base system, real-time communication is carried out with the micro-frontend framework through the base system communication interface.

[0037] In addition, to achieve the above-mentioned purpose, the present application also proposes a general basic capability adaptation device for micro-frontends, which includes: a memory, a processor, and a computer program stored on the memory and runnable on the processor, and the computer program is configured to implement the steps of the general basic capability adaptation method for micro-frontends as described above.

[0038] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the general basic capability adaptation method for micro-frontends as described above are implemented.

[0039] One or more technical solutions proposed in this application have at least the following technical effects:

[0040] The technical solution of the present application determines the sub-application that needs to be loaded currently and obtains the characteristic parameters of the sub-application; calculates the characteristic parameters through a preset adapter matching algorithm, and determines the adapter that matches the sub-application based on the calculation result; sets the configuration items of the adapter based on the characteristic parameters of the sub-application; and when the sub-application is activated, mounts the page content of the sub-application to the micro-frontend framework for display through the adapter. The present application proposes a universal micro-frontend adapter that can automatically adapt to the frontend framework according to the framework of the sub-application, and determines the micro-frontend technology and base implementation to be used based on the operating environment, solving the adaptation problem of different micro-frontend technology frameworks and base implementations. By providing an adapted requester to handle differences such as gateway authentication and request headers, the technical effect of increasing the flexibility and scalability of micro-frontend framework integration is achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0042] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0043] Figure 1 A flowchart illustrating the first embodiment of the general basic capability adaptation method for micro-frontends of this application;

[0044] Figure 2 This is a schematic diagram of the model architecture of a multimodal large model;

[0045] Figure 3 This is a schematic diagram of the device structure of the hardware operating environment involved in the general basic capability adaptation method for micro-frontends in an embodiment of the present application.

[0046] The purpose, features and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0047] It should be understood that the specific embodiments described herein are merely used to explain the technical solutions of the present application and are not intended to limit the present application.

[0048] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0049] The main solution of the embodiment of the present application is: determine the sub-application that needs to be loaded currently and obtain the characteristic parameters of the sub-application; calculate the characteristic parameters through a preset adapter matching algorithm, and determine the adapter that matches the sub-application based on the calculation results; set the configuration items of the adapter according to the characteristic parameters of the sub-application; when the sub-application is activated, mount the page content of the sub-application to the micro-front-end framework for display through the adapter.

[0050] Since the current micro-frontend integration can usually only adapt to one technical framework and does not support adaptation to multiple frameworks, the base system needs to be manually adapted when integrating applications with different micro-frontends, and perform specific configurations and code modifications based on different technologies and base implementations. This operation increases the complexity and development time of integration, resulting in the base system being unable to seamlessly integrate multiple sub-applications to work.

[0051] This application provides a solution and proposes a universal micro-frontend adapter, which can automatically adapt to the front-end framework according to the framework of the sub-application, and determine the micro-frontend technology and base implementation to be adopted according to the operating environment, thereby solving the adaptation problem of different micro-frontend technology frameworks and base implementations. By providing an adapted requester to handle differences such as gateway authentication and request headers, the technical effect of increasing the flexibility and scalability of micro-frontend framework integration is achieved.

[0052] Based on this, the embodiment of the present application provides a general basic capability adaptation method for micro front-ends, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the general basic capability adaptation method for micro front-ends of this application. In this embodiment, the general basic capability adaptation method for micro front-ends includes steps S10 to S40:

[0053] Step S10, determining the sub-application to be loaded currently and obtaining characteristic parameters of the sub-application;

[0054] Step S20, calculating the characteristic parameters using a preset adapter matching algorithm, and determining an adapter that matches the sub-application based on the calculation result;

[0055] Step S30, setting configuration items of the adapter according to characteristic parameters of the sub-application;

[0056] Step S40: When the sub-application is activated, the page content of the sub-application is mounted to the micro-front-end framework for display through the adapter.

[0057] In this embodiment, the application data platform operates normally through the base system, which is the basic configuration and system architecture that supports the normal operation of the application data platform. The above-mentioned application data platforms may include enterprise data platforms, financial data platforms, medical and health data platforms, unit data platforms, education data platforms, social media data platforms, industrial data platforms, transportation data platforms, and energy data platforms.

[0058] In actual applications, in addition to its own functional settings, the base system can also achieve collaborative work with the application data platform by loading third-party sub-applications. Therefore, the base system can also include its own system functions and application functions developed by third parties. The application functions developed by third parties can include user review systems, product recommendation modules, order management interfaces, and other related functions that can assist in the use of the application data platform. For example, in the base system, the integration of third-party applications can realize system functions including data processing, storage, analysis, and user interaction.

[0059] To this end, a micro-frontend architecture connected to the base system is pre-created for applications based on the base system for integrated use of third-party applications.

[0060] Optionally, applications based on the base system can be connected to the created micro-frontend architecture, allowing the base station system to be integrated with third-party applications.

[0061] The micro-frontend architecture shown above, when connected to the base station system and enabling the base station system to implement the integrated use of third-party applications, implements the isolation and mounting of the third-party applications through the stored adapters to implement the integrated use of third-party applications. Therefore, before the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation results, it also includes:

[0062] Create a new adapter and store the adapter in the micro front-end framework;

[0063] According to the sub-application integration requirements of the base system, real-time communication is carried out with the micro-frontend framework through the base system communication interface.

[0064] In this embodiment, based on the requirements for integrating third-party sub-applications with the current base system, a micro-frontend framework is created to seamlessly integrate the third-party sub-applications of the base system. When building a micro-frontend framework, a suitable framework is customized. Micro-frontend frameworks used in actual applications include Single-SPA, Qiankun, and Module Federation (Webpack 5). Qiankun is a micro-frontend framework based on Single-SPA.

[0065] Single-SPA supports the mixed use of multiple front-end frameworks (such as React, Vue, Angular, etc.), provides powerful lifecycle management functions, and has an active community and detailed documentation. Qiankun is an improved framework based on Single-SPA;

[0066] Module Federation (Webpack 5) allows different applications to share modules and can be configured directly with Webpack without the need for an additional framework.

[0067] Specifically, the selection of the framework can be based on the technology stack type of the third-party sub-application to be integrated in the base system and the loading method of the sub-application, and the most matching framework can be selected from the above-mentioned micro-frontend framework to create the micro-frontend framework.

[0068] In creating the micro-frontend framework, the environment is configured according to the selected framework shown above. The specific process of environment configuration is actually related to the specific framework.

[0069] Optionally, taking the qiankun framework as an example for the process of environment configuration, first use npm or yarn to install the qiankun framework, create a new Vue project as the main application, introduce the qiankun framework in main.js to configure the registration and startup of the main application; then create a sub-application, add the lifecycle hook of the qiankun in main.js, and the lifecycle hook includes content such as bootstrap, mount, unmount, etc.; after that, set publicPath in the vue.config.js of the sub-application as the packaging path of the sub-application. The main application indicated here can be defined as a base system connected to the micro-frontend framework, that is, after the base system is connected to the framework to realize real-time communication, the base system is used as the main application of the micro-frontend framework, and the sub-application is defined as a third-party application to be integrated and used by the base system. Optionally, according to the usage requirements of the current micro-frontend framework, an application can be customized as the main application, and related sub-applications can be created based on the main application.

[0070] As shown above, based on the created micro-frontend framework, the integration of a third-party sub-application into the main application needs to be achieved through the configuration of routing and layout. In this embodiment, it specifically refers to the integration of the third-party sub-application into the base system, that is, the integration of the third-party sub-application into the base system is achieved by configuring routing and layout; the specific process of configuring routing and layout includes: configuring routing in the base system to load the sub-application; creating a container in the view of the base system for loading the sub-application; and processing the routing prefix problem in the sub-application so that the sub-application can run independently.

[0071] Furthermore, considering the service life of the micro-frontend framework, large applications can be split into small modules for the framework of the micro-frontend framework so that each module can be independently developed, tested and deployed, thereby improving development efficiency and reducing code complexity. In the micro-frontend framework, the small modules obtained by splitting the large application are used as micro-applications, and independent deployment and maintenance in different micro-applications are set up. The micro-applications communicate through interfaces or events, and the corresponding technology stack is selected according to the needs of the micro-applications. Technologies such as lazy loading and code splitting are used to reduce the loading time of the main application and sub-applications. In addition, a unified CSS framework or design system is used to create the main application and sub-applications, and a log system and monitoring tools are integrated to promptly discover and solve problems.

[0072] In the micro-frontend framework, communication between the base system and third-party sub-applications is achieved via WebSocket. As described above, in the micro-frontend framework, the base system, as the main application, uses a WebSocket server to communicate in real time with the third-party sub-application to be integrated. Therefore, for this communication, a WebSocket server must first be determined. A WebSocket server provided by the base system detects and processes connection requests and data transmissions from the sub-application. The WebSocket server's address and port are then configured to ensure that the sub-application can correctly connect to it.

[0073] As shown above, when implementing a communication application integrating the base system and a third-party application based on the WebSocket server, the specific configuration process based on the communication application specifically includes the following:

[0074] 1) WebSocket server configuration process;

[0075] Select a WebSocket server framework: Based on the technology stack and project requirements, choose a suitable WebSocket server framework, such as the ws module of Node.js or Spring WebSocket of Java.

[0076] Build a WebSocket server using the selected framework, configure the server's detection port, domain name, and other basic information; write the core code of the WebSocket server, including the logic for handling connections, receiving and sending messages.

[0077] Configure security settings: Configure SSL / TLS encryption for the WebSocket server to ensure the security of communication data. Set up appropriate firewall rules and access control policies to restrict unauthorized access.

[0078] Test and deploy: Test the WebSocket server locally or in a test environment to ensure it functions properly. Once the test passes, deploy the server to the production environment and configure the appropriate domain name and port.

[0079] 2) WebSocket client configuration process (in the base system);

[0080] Initialize the WebSocket connection: In the base system code, initialize the WebSocket client, specify the address and port of the WebSocket server, establish the connection using the WebSocket API, and set up the processing logic for events such as connection establishment, message reception, and connection closing.

[0081] Processing message reception: When the base system receives a message from the WebSocket server, it decides how to handle it based on the message content. If the message contains data required by the sub-application, it can forward the message to the corresponding sub-application.

[0082] Sending messages to the server: When the base system needs to communicate with the server or other sub-applications, it sends messages through the WebSocket connection. Different types of messages can be sent as needed, such as text messages, binary messages, etc.

[0083] Implement a heartbeat mechanism: To maintain the stability of the WebSocket connection, implement a heartbeat mechanism. Periodically send heartbeat packets to the server and update the connection status when receiving a heartbeat response from the server.

[0084] Optionally, according to the specific configuration process of the above communication application, the following processing logic is provided during implementation:

[0085] Connection Management: In the base system, a WebSocket connection pool is maintained to manage all connections to the WebSocket server. When a new connection is established, it is added to the connection pool; when a connection is closed, it is removed from the connection pool.

[0086] Message routing: Implement a message routing mechanism to forward messages to the corresponding sub-application or server based on message type, destination address, and other information. Message routing can be implemented using middleware or proxy mode.

[0087] Error handling: Implement an error handling mechanism in the base system to capture and handle errors that may occur during WebSocket communication. When an error occurs, appropriate action can be taken based on the error type, such as retrying the connection or logging.

[0088] Cross-domain handling: The base system and the WebSocket server are located in different domains, so cross-domain handling is required. You can add fields such as Access-Control-Allow-Origin to the WebSocket server's response header to allow the base system to make cross-domain requests.

[0089] Through the above configuration process and processing logic, you can use the base system as the main application in a micro-frontend framework, integrate multiple third-party sub-applications, and use a WebSocket server for efficient, real-time communication. This implementation involves setting up and configuring the WebSocket server, initializing and processing the WebSocket client in the base system, connection management, message routing, error handling, and cross-domain processing. Ensuring the correct configuration and implementation of each link is key to achieving stable and reliable WebSocket communication.

[0090] Furthermore, according to the configuration and implementation process shown above, testing and verification based on the communication is required, specifically including:

[0091] 1) Functional testing to ensure that the base system can successfully connect to the WebSocket server and can send and receive data.

[0092] 2) Performance testing: testing the latency, throughput, and other performance indicators of the WebSocket connection to ensure they meet application requirements.

[0093] 3) Stability test: Test the stability of the WebSocket connection under long-term operation to avoid problems such as frequent disconnection or data loss.

[0094] 4) Security testing to determine the security of the WebSocket connection. Based on the security test, WSS (WebSocket Secure) protocol and other methods can be used for encrypted transmission to prevent data leakage and unauthorized access.

[0095] In actual applications, the WebSocket server needs to be implemented using specific software, including but not limited to the ws module of Node.js, the websockets library of Python, and Spring WebSocket of Java. The rich functionality and configuration options it provides can meet the communication connection requirements between the micro-frontend framework and the base system in different application scenarios.

[0096] Furthermore, based on the technology stack supported by the micro-frontend framework, a new adapter is created so that the sub-application based on the technology stack can run normally in the micro-frontend framework. The technology stack includes but is not limited to React, Vue, Angular, etc., and can be specifically determined based on the sub-application used by the base system, that is, the sub-application is essentially determined based on the functional use of the base system to which the micro-frontend framework is connected. Therefore, when creating the new adapter, it is necessary to determine the technology stacks used by the sub-applications used in the micro-frontend framework, and determine the relevant information based on the application of the sub-application in the micro-frontend framework, including technology stack differences, state management, style isolation, and communication mechanisms. Then, the function and performance requirements of the adapter are determined based on the relevant information.

[0097] Afterwards, according to the determined functional and performance requirements of the adapter, the corresponding technology stack and tool chain are selected, including front-end frameworks such as React, Vue, Angular, and creation tools such as Webpack and Vite. Based on the micro-front-end framework and construction tools, the functional library and framework type to be used by the adapter are determined to be implemented in the micro-front-end framework. The framework types include but are not limited to qiankun, micro-app, etc. The functional design of the adapter is carried out according to the selected framework type and functional library. The functional design includes technology stack adaptation design, router adaptation design, state management adaptation design, style isolation adaptation design, and communication mechanism adaptation design. As described above, a design document is formed according to the functional design content, and the code of the adapter is written based on the design document. Based on the code coding of the adapter, an adapter that meets the requirements is generated so that the function of the adapter is correct and the performance meets the use requirements when applied.

[0098] Furthermore, based on the design of the adapter, the interface definitions of the target micro-application and the source micro-application need to be clarified. The target micro-application is a micro-application that expects to receive data, and the source micro-application is a micro-application that provides data. When implementing the interface of the target micro-application, the method of the source micro-application is called or its properties are accessed inside it to obtain the required data. Therefore, based on the data conversion between the target micro-application and the source micro-application, the data provided by the source micro-application is converted into the format desired by the target micro-application by designing an adapter. This data conversion action involves operations such as data type conversion, data structure adjustment, or data filtering and mapping.

[0099] Furthermore, when data conversion between micro-applications is implemented in the micro-frontend architecture, data can be correctly transferred between micro-applications through an integrated communication protocol mechanism. In addition, the adapter is also provided with an error capture mechanism and fallback logic executed based on each error message.

[0100] In this way, according to the designed adapter, according to the micro-frontend architecture type represented in the characteristic parameters of the sub-application, the corresponding adapter is determined, and operations are performed based on the adapter. Taking the qiankun feature as an example, when the qiankun object is detected in the characteristic parameters of the sub-application, the sub-application is defined as a sub-application of the qiankun micro-frontend framework. Through the preset adapter matching algorithm, based on the identified qiankun feature, the adapter designed for the qiankun feature is retrieved and matched in the adapter library as the adapter of the sub-application, and the processing and transformation of the adapter is used to achieve seamless integration of the sub-application with the base system.

[0101] According to the newly created adapter, the adapter is stored in the created preset adapter library, which is a data storage space provided in the micro front-end framework and can call the adapter in the preset adapter library.

[0102] Furthermore, when the adapter is stored in the preset adapter library, it can be stored as an identifier based on information such as the technology stack type of the adapter, so that when the base system loads the sub-application of the corresponding technology stack through the identifier, the corresponding adapter can be selected through the relevant identifier of the sub-application.

[0103] In this embodiment, a micro-frontend framework is designed to communicate with the base system based on the sub-application type to be applied, and a plurality of adapters suitable for various technology stack types are newly created to provide an adaptive requester to handle gateway authentication and request header differences, thereby increasing the flexibility and scalability of the sub-application when loading the application.

[0104] As shown above, the communication of the sub-applications integrated into the base system is realized based on the micro-frontend architecture. In response to the sub-application integration of the base system, multiple different page frameworks are provided to mount the sub-applications. Based on the mounting of the sub-applications, data type conversion is performed through the adapter shown above so that the base system can integrate sub-applications with multiple different data stacks. According to the application of the adapter, the corresponding adapter needs to be selected based on the currently enabled sub-application. Optionally, an environmental monitoring mechanism is provided in the micro-frontend framework to monitor the sub-application loading events of the base system, so that according to the detected sub-application loading events, a matching adapter is selected by reading the characteristic parameters of the sub-application.

[0105] Optionally, based on the detection of the sub-application loading event of the base system by the environmental monitoring mechanism, characteristic parameters of the sub-application can be obtained according to the specific loading status. That is, the step of determining the sub-application currently to be loaded and obtaining the characteristic parameters of the sub-application includes:

[0106] Reading a loading event of the sub-application to determine a loading status of the sub-application;

[0107] If the sub-application is not loaded, obtaining the static resources of the sub-application and extracting the characteristic parameters from the static resources;

[0108] If the sub-application has been loaded, the behavior characteristic data of the sub-application is detected, and the characteristic parameters are extracted through the behavior characteristic data.

[0109] According to the established environment monitoring mechanism, the sub-application loading events of the base system are monitored. The sub-application loading event is the registration and loading process of the sub-application. In the base system, the sub-application is registered with the base system through the API provided by the micro-frontend framework (such as Single-SPA, Qiankun, etc.). This usually includes specifying the entry file of the sub-application (such as a JavaScript file), activity conditions (such as routing matching rules), etc. Loading event detection: The micro-frontend framework provides the ability to detect sub-application loading events, namely the environment monitoring mechanism. Optionally, detection can also be performed by registering a sub-application loading event detector. The base system can obtain the loading status of the sub-application by detecting the event.

[0110] Among them, in the judgment based on the loading status of the sub-application and the acquisition of characteristic parameters, the loading status is limited to the pre-loading state and the loading state, and the loading state is the loading process. Based on this pre-loading state and the loading state, the characteristic parameters of the sub-application are extracted by reading static resources and behavioral characteristic data respectively.

[0111] Before loading a sub-application, the base system pre-retrieves the sub-application's static resources (such as HTML, CSS, JavaScript files, etc.) through HTTP requests based on the sub-application's configuration information. These static resources are typically stored on a remote server. The retrieved static resources are used for subsequent feature parameter extraction or for optimization during sub-application loading (such as caching, preloading, etc.). Before loading, the base system may also prepare corresponding behavioral feature data. This data comes from the base system's configuration, the user's historical behavior records, or other sources, and can be used for subsequent comparison and analysis with the sub-application's behavioral feature data.

[0112] When a sub-application is loaded, the base system dynamically loads its resources and parses them to obtain characteristic parameters. These resources include JavaScript files, HTML, and CSS files. Based on the JavaScript files, the base system executes them to obtain the characteristic parameters (e.g., through global variables, function return values, etc.). Based on the HTML and CSS files, the base system extracts the characteristic parameters (e.g., HTML structure, CSS style rules, etc.) by parsing their contents.

[0113] Optionally, feature parameter extraction for static resources specifically involves extracting feature parameters from the sub-application's static resources, such as specific tags, attributes, or content fragments in HTML files; style rules, selectors, or media queries in CSS files, etc. The feature parameters are used to describe the sub-application's appearance, layout, or style.

[0114] Optionally, feature parameter extraction for behavioral feature data is as follows: during the sub-application loading process, the base system collects data related to the sub-application behavior, such as page loading time, number of resource requests, user interaction events, etc. as the feature parameters. This feature parameter is used to describe the performance, user experience or behavior pattern of the sub-application.

[0115] Furthermore, when acquiring static resources from a sub-application, the base system must ensure that cross-domain access is permitted for the sub-application's resources, or resolve cross-domain issues through proxy servers, etc. When extracting feature parameters, it is important to avoid excessive calculations or resource requests during the sub-application's loading process, as this can affect the sub-application's loading speed and user experience.

[0116] According to the above, the adapter matching is performed based on the characteristic parameters obtained based on the loading status of the sub-application, that is, the step of calculating the characteristic parameters using a preset adapter matching algorithm and determining the adapter matching the sub-application based on the calculation results includes:

[0117] Determine a weight allocation algorithm based on the business requirements of the sub-application;

[0118] Assigning weight values corresponding to the characteristic parameters using the weight assignment algorithm, and calculating the comprehensive score of the sub-application using the weight values;

[0119] An adapter matching the sub-application is determined according to the comprehensive score and the characteristic parameters.

[0120] In this embodiment, based on the detected startup status of the sub-application, the acquired characteristic parameters come from the static resources or behavioral characteristic data of the sub-application respectively. The characteristic data acquired based on this data source includes global variable information, specific API and configuration information. Among them, the front-end framework type used by the sub-application based on micro-front-end technology is determined based on the global variable information. The micro-front-end technology includes complete isolation based on iframe, routing hijacking based on single-spa, micro-app based on WebComponent idea, qiankun and other micro-front-end frameworks. To this end, the specific technology type can be determined by reading the global variable information of the page in the sub-application; optionally, the micro-front-end framework technology of the sub-application can also be determined by the specific API and configuration information.

[0121] Based on the identified micro-frontend framework technology of the sub-application, a corresponding adapter is determined using a preset adapter matching algorithm to determine the technology type represented by the sub-application. In this embodiment, the preset adapter matching algorithm is a weighted allocation algorithm, wherein an appropriate weighted allocation algorithm is selected based on business requirements, such as the Analytic Hierarchy Process (AHP) or the Entropy Method.

[0122] The acquired characteristic parameters of the sub-application are cleaned, denoised and standardized, and a weight allocation algorithm is applied to assign weight values to the characteristic parameters. The priority of each feature is determined according to business needs, and a weight allocation algorithm that meets the business needs is selected.

[0123] Among them, the business requirements are used to characterize the functionality of the sub-application, including functional requirements, performance requirements, technical requirements and security requirements. Different business requirements will take into account the different functional tendencies of the sub-application. For example, functional requirements are used to determine the core functions of the sub-application, such as data display, user interaction, etc.; performance requirements are used to clarify performance requirements, such as loading speed, response time, etc.; technical requirements are used to determine the technology stack, framework, dependency library, etc.; security requirements are used to consider data security, permission control, etc.

[0124] According to the limitations of the business requirements shown above, when assigning weight values to the characteristic parameters, more weight values need to be assigned to the characteristic parameters represented by each business requirement. For example, in performance requirements, higher weights need to be assigned to characteristic parameters representing performance indicators; in technical requirements, if technology stack compatibility is more important, a higher weight should be assigned to the technology stack.

[0125] Optionally, in the weight distribution algorithm, the priority of the feature parameters is determined by means of a hierarchical analysis method, and the weight value of each feature parameter is calculated by the eigenvector method. It is necessary to ensure that the sum of all weights is 1 (or 100%) to ensure the rationality of the weight distribution.

[0126] A weight value is assigned to each characteristic parameter according to business requirements, and the comprehensive score of the sub-application is calculated based on the weight value of the characteristic parameter. The calculation formula of the comprehensive score is:

[0127] Comprehensive score = i = 1∑n(feature parameter i × weight i);

[0128] The comprehensive score calculated according to the above comprehensive score calculation formula can be used to represent the specific usage information of the sub-application. For example, the technology stack score is 90, the weight is 0.3, and the contribution value is 27; the performance score is 85, the weight is 0.4, and the contribution value is 34; the security score is 95, the weight is 0.2, and the contribution value is 19; the user experience score is 80, the weight is 0.1, and the contribution value is 8; the comprehensive score is 27 + 34 + 19 + 8 = 88.

[0129] After obtaining the comprehensive score of the sub-application, selecting an adapter that matches the sub-application based on the comprehensive score and the characteristic parameters, that is, the step of determining the adapter that matches the sub-application based on the comprehensive score and the characteristic parameters, includes:

[0130] determining whether the comprehensive score and the characteristic parameters satisfy a matching rule of the adapter;

[0131] When it is determined that the conditions are met, the adapter is used as the adapter matched with the sub-application.

[0132] In actual applications, the adapter has predefined matching rules, which include comprehensive scoring conditions and feature parameter determination. Therefore, when matching the most suitable adapter based on the sub-application's comprehensive score and feature parameters, the adapter whose comprehensive score and feature parameters meet the matching rules can be used as the adapter that matches the sub-application. In other words, the matching process based on the adapter's matching rules is essentially the process of dynamically selecting an adapter based on the sub-application's feature parameters and comprehensive score. This process can be described as follows:

[0133] If the overall score is greater than 80 and the characteristic parameters indicate that the sub-application's technology stack is React, select the WebComponents adapter;

[0134] If the overall score is greater than 60 and the characteristic parameters indicate that the sub-application requires high isolation, select the iframe adapter;

[0135] If the comprehensive score is greater than 70 and the characteristic parameters indicate that the sub-application needs to be dynamically loaded, select the ModuleFederation adapter.

[0136] Optionally, the matching rules can be set based on the specific conditions of each adapter. Figure 2 , Figure 2 The specific adaptation process for the general micro front-end adapter. Figure 2 The content indicated in the specific adaptation process of the micro-frontend adapter shown, based on the adapter modules that can be detected by the micro-frontend base technology detection module include: iframes adapter module, qiankun adapter module and wujie adapter module, among which the iframes adapter module is suitable for traditional isolation solutions, the qiankun adapter module is suitable for micro-frontend frameworks based on Single-SPA, and the wujie adapter module is suitable for micro-frontend solutions based on Web Components.

[0137] As shown above, the loading status of the base system is detected by the detector and callback function of the event processing adapter module, and after detecting that the loading of the base system is complete, the activation status of the sub-application is detected, so that the functional parameters of the adapter are configured according to the acquired demand data of the sub-application, that is, the step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes:

[0138] Obtaining demand data of the sub-application;

[0139] Setting the routing path of the adapter according to the URL data extracted from the demand data;

[0140] The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

[0141] After the sub-application loaded by the base system selects an adapter, the routing path of the adapter is configured with the requirement data of the sub-application, wherein the routing path of the adapter is used to define the process of loading and rendering the corresponding sub-application when accessing a certain URL, and the requirement data includes the basic information of the sub-application (name, ID, version), routing configuration information (path, mode, default route, dynamic routing), entry file information (URL, loading method), dependency information (dependency library, shared dependency), permission and security information (permission requirements, security configuration), performance and loading strategy (preloading, lazy loading), lifecycle hooks (lifecycle methods, routing switching hooks), environment and configuration (environment variables, global configuration), communication mechanism (communication method, protocol), error handling configuration, and logging and monitoring.

[0142] Configuration methods based on the adapter's routing path include front-end routing library-based configuration and back-end gateway-based configuration. Front-end routing library configuration uses a front-end routing library (such as react-router, vue-router, etc.) to define routing rules. The adapter's routing path is configured based on one or more routing paths corresponding to the sub-application. Back-end gateway-based configuration, on the other hand, involves the back-end gateway (such as Spring Cloud Gateway, Nginx, etc.) associating the request route with the sub-application based on the URL pattern of the user request. The routing path configuration defines the sub-application's loading page, enabling more fine-grained routing control and load balancing. Furthermore, since routing configuration is performed on the back-end, cross-domain requests and security controls can be more easily implemented.

[0143] In addition, considering the application page where the sub-application is loaded, the identification parameters and decoration parameter sets carried in the demand data of the sub-application are embedded in the routing path. The identification parameters generally refer to key attributes or information used to identify or distinguish the sub-application, including the application name, version number, developer information, application icon, and application description; the decoration parameter sets include additional parameters or settings for beautifying or enhancing the appearance and functionality of the application, including theme settings, layout settings, animation effects, custom styles, and internationalization settings, etc., to improve the availability, accessibility, and user experience of the sub-application. After the identification parameters and decoration parameter sets are embedded in the routing path of the adapter, the page features of the sub-application can be obtained by reading the routing path and loaded and displayed.

[0144] Optionally, when embedding the flag parameter and decoration parameter set into the adapter's routing path, they can be encoded to ensure they can be securely embedded into the routing path, i.e., the URL. The embedding logic is as follows: encodeURIComponent is used to encode the parameter value to prevent illegal characters from appearing in the URL, for example, theme=dark → theme=dark (no encoding required); lang=en-US → lang=en%2DUS.

[0145] In addition, the decoration parameter set is a complex parameter and can be serialized into a string and then encoded. For example:

[0146] config={"theme":"dark","lang":"en"}→config=%7B%22theme%22%3A%22dark%22%2C%22lang%22%3A%22en%22%7D.

[0147] When embedding encoded parameters into the routing path, you need to select query parameters to append the parameters to the query string of the routing path; select path parameters to embed the parameters directly into the routing path; and append path parameters to the hash portion of hash parameters, which is applicable to hash routing mode. The above is the parameter embedding process for the routing path. The specific embedding process can also be selected according to specific needs.

[0148] After setting the configuration parameters of the adapter according to the demand data of the sub-application, the base system activates the sub-application according to the service name to load the page frame of the sub-application. That is, when the sub-application is activated, the adapter is used to mount the page content of the sub-application to the micro-frontend framework for display, including:

[0149] Reading the decoration parameter set embedded in the routing path of the adapter, and selecting a matching page framework from the micro-frontend framework according to the decoration parameter set;

[0150] When the page frame is not selected, creating the page frame according to the decoration parameter set;

[0151] The page content of the sub-application is displayed through the created page frame.

[0152] After startup, the base system activates the currently loaded sub-application in order to view the page content of the sub-application. Particularly, since the base system carries a large number of resources and components, when the sub-application is started, the sub-application is activated through the service name of the sub-application in order to view the page. Since the page content of the sub-application is configured in the routing path of the adapter, after the base system activates the sub-application, the micro-frontend framework detects the activation of the sub-application, and loads the page content of the sub-application into the corresponding page frame through the adapter matched to the sub-application. Particularly, the micro-frontend framework pre-builds or pre-selects the page frame corresponding to the sub-application based on the routing path configured by the adapter in order to load the sub-application. This limitation is determined by parsing the routing path of the adapter to obtain the flag parameters of the sub-application, that is, based on the flag parameters, a page frame that matches the flag parameters is selected from the page frame of the micro-frontend framework to load the page content of the sub-application;

[0153] Alternatively, a page frame including the required page sub-parts in the sub-application is constructed in the micro-frontend framework to adapt to the sub-application page content, which is specifically determined by the matching situation between the page content of the sub-page and the page frame in the micro-frontend framework. In actual applications, it can be determined based on the adaptation situation of the flag parameters of the page frame and the sub-application, that is, the relevant parameters of the page frame in the micro-frontend are compared with the flag parameters of the sub-application, and the page frame with the consistent comparison is used as the page frame for loading the sub-application. When the micro-frontend framework does not have a page frame that is consistent with the flag parameters of the sub-application, the corresponding page frame is rebuilt in the micro-frontend framework based on the flag parameters of the sub-application.

[0154] As shown above, after the base system activates the sub-application, the page content of the sub-application is loaded through the page frame of the micro-front-end framework, and based on the real-time communication connection between the base system and the micro-front-end framework, the sub-application page content loaded by the page frame is displayed in the base system. Due to the real-time communication between the micro-front-end framework and the base system, when displaying the page content loaded by the page frame, considering the security of the use of the sub-application integrated by the base system, the page frame and the base system need to be integrated based on the general information of the base information, so that the user can view the sub-application page consistent with the style of the system page in the base system.

[0155] According to the real-time communication between the base system and the micro-frontend framework, after the sub-application is loaded into the page frame in the micro-frontend framework, the general data of the sub-application activated by the base system is obtained. The general data is the general information of the sub-application integrated by the base system, including permission item data, user login token and base view information. In this embodiment, a general information acquisition module can be set to obtain the information. Specifically, corresponding acquisition methods are provided in the general information acquisition module, including getAuthority(), getToken() and getView(). The following content is a targeted functional description of the acquisition method:

[0156] getAuthority() is used to retrieve permission item data as a set of strings, for example, ["Permission Item 1", "Permission Item 2"]. A permission management system can be designed that contains all permission items and their corresponding data. By calling the corresponding interface or querying the database, the corresponding permission item data can be retrieved based on the input string.

[0157] getToken() is used to obtain the user login token in the base system. Token is defined as a string. Upon login, a token is generated for authentication and authorization. To obtain this token, call the authentication interface provided by the base system or use an appropriate authentication mechanism.

[0158] getView() is used to obtain the view information of the base system, including the view ID, view code, and view name. A view management system can be designed using JSON encoding to contain all view information. By calling the corresponding interface or querying the database, the corresponding view information is obtained based on the current state or identity of the base.

[0159] As shown above, the general data of the sub-application integrated into the base system is obtained through the acquisition method set in the general system acquisition module, and the page frame of the sub-application is loaded and processed based on the general data so as to merge the page style of the page frame with the base system, so that the user can view the sub-application page consistent with the base system page style in the base system, thereby realizing seamless integration of the base system and the sub-page.

[0160] In this embodiment, the universal micro-frontend adapter can automatically adapt the front-end framework according to the framework of the sub-application, and determine the micro-frontend technology and base implementation to be adopted according to the operating environment, thereby solving the adaptation problem of different micro-frontend technology frameworks and base implementations. By providing an adapted requester to handle differences such as gateway authentication and request headers, the technical effect of increasing the flexibility and scalability of micro-frontend framework integration is achieved.

[0161] Furthermore, in another embodiment of the general basic capability adaptation method for micro front-ends of the present invention, the initialization method of the adapter is called to initialize the adapter and register an event detector;

[0162] Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes:

[0163] After detecting that the base system has been loaded, detecting the activation state of the sub-application.

[0164] In this embodiment, the appropriate adapter is selected based on the sub-application's technology stack (such as React, Vue, Angular, etc.). In the micro-frontend framework, the selected adapter module is dynamically loaded to ensure that the adapter is fully compatible with the sub-application's technology stack.

[0165] Call the initialization method of the adapter based on the instance created. This method typically sets the adapter's basic configuration and initializes its internal state. When calling the initialization method, pass necessary parameters, such as the sub-application's entry URL, resource path, and lifecycle hooks.

[0166] Furthermore, the event types to be detected are clearly defined, and detection events based on these event types are defined. In particular, sub-application activation events are typically events that indicate a sub-application transitions from an inactive state to an active state, such as when a user switches to the sub-application's view. The triggering conditions for activation events are determined, such as routing changes and user interactions.

[0167] Register the detector according to the determined event type and trigger conditions. By registering the event detector on the adapter instance, the detector function is bound to the activation event to implement event detector binding. The detector function is responsible for processing the activation event, such as updating the UI, loading resources, triggering other business logic, etc.

[0168] To ensure that events propagate correctly within the micro-frontend framework, propagation can optionally be defined as the detected event being passed from the sub-application layer to the framework layer, or broadcasted from the framework layer to all sub-applications. Additionally, within the detector function, default event behavior can be prevented as needed, such as preventing event bubbling or default event handling.

[0169] As shown above, the event detector detects changes in the sub-app's activation state in real time. Based on the maintained storage state (such as the global state manager), the sub-app's activation state is recorded and updated. Based on the sub-app's activation state, corresponding actions are performed, such as loading sub-app resources, updating routes, and triggering animation effects.

[0170] Alternatively, in a micro-frontend framework, in order to detect route changes to determine the activation status of a sub-application, it is common to choose to detect browser route change events, including popstate and hashchange.

[0171] The popstate event is primarily used to detect changes in the browser's history. It is typically triggered when using the HTML5 History API (i.e., history mode). This event is triggered when the user clicks the browser's forward or back button, or when calling the history.pushState or history.replaceState methods via JavaScript.

[0172] The hashchange event is mainly used to detect changes in the hash portion of the URL. It is usually triggered when hash mode is used. This event is triggered when the hash portion of the URL changes.

[0173] During the initialization of the micro-frontend framework's adapter or main application, register a detector for the aforementioned route change event. This detector function is called when a route change event occurs. In the detector function, retrieve the path or hash portion of the current route using window.location.pathname or window.location.hash . Optionally, pre-define activation rules (activeRule) for each sub-application. These activation rules can be path prefixes, regular expressions, or other matching logic.

[0174] In the detector function, the current route path is matched against the sub-application's activation rules. Optionally, a match is considered successful if the URL path in the route matches the sub-application's URL data. If a match is successful, the sub-application is activated. Upon activation, the sub-application's loading logic is triggered. This may include loading the sub-application's entry point files (such as JavaScript and CSS) and rendering the sub-application's views.

[0175] In micro-frontend frameworks, sub-applications typically have a series of lifecycle hooks, such as bootstrap, mount, and unmount. When a sub-application is activated, its bootstrap and mount hooks are called for initialization and mounting. When a sub-application is uninstalled, its unmount hook is called for cleanup. In micro-frontend frameworks, to avoid duplicate registration of event detectors, deduplication can be performed during initialization. At the same time, to improve performance, event detector functions can be reused to reduce unnecessary memory consumption.

[0176] In this implementation, the micro-frontend framework detects route change events through an event detector, determines the activation status of the sub-application, and then performs the corresponding resource loading and lifecycle hook calls. This process ensures that sub-applications are correctly activated and uninstalled based on route changes, improving system flexibility and user experience.

[0177] It should be noted that the above examples are only used to understand this application and do not constitute a limitation on the general basic capability adaptation method for micro-frontends in this application. More forms of simple transformations based on this technical concept are all within the scope of protection of this application.

[0178] The present application provides a general basic capability adaptation device for micro front-ends, and the general basic capability adaptation device for micro front-ends includes: 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, and the instructions are executed by the at least one processor so that the at least one processor can execute the general basic capability adaptation method for micro front-ends in the above-mentioned embodiment one.

[0179] Reference below Figure 3 , which shows a schematic diagram of the structure of a general basic capability adaptation device for micro-frontends suitable for implementing the embodiments of the present application. The general basic capability adaptation device for micro-frontends in the embodiments of the present application may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), and PMPs (Portable Media Players), as well as fixed terminals such as digital TVs and desktop computers. Figure 3 The general basic capability adaptation device for micro-frontends shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0180] like Figure 3As shown, the general basic capability adaptation device for micro-frontends may include a processing device 1001 (e.g., a central processing unit, graphics processing unit, etc.), which can perform various appropriate actions and processes based on programs stored in a read-only memory (ROM) 1002 or programs loaded from a storage device 1003 into a random access memory (RAM) 1004. RAM 1004 also stores various programs and data required for the operation of the general basic capability adaptation device for micro-frontends. Processing device 1001, ROM 1002, and RAM 1004 are interconnected via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007, such as a touchscreen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, and gyroscope; output devices 1008, such as a liquid crystal display (LCD), speaker, and vibrator; storage devices 1003, such as a magnetic tape and hard disk; and communication devices 1009. Communication devices 1009 can allow the micro-frontend-oriented universal basic capability adapter device to communicate with other devices wirelessly or by wire to exchange data. While the figure shows the micro-frontend-oriented universal basic capability adapter device with various systems, it should be understood that implementation or presence of all the illustrated systems is not required. More or fewer systems may alternatively be implemented or present.

[0181] In particular, according to the embodiments disclosed in the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0182] The general basic capability adaptation device for micro-frontends provided by this application adopts the general basic capability adaptation method for micro-frontends in the above-mentioned embodiment, which can solve the technical problem that the existing micro-frontend integration cannot adapt to front-end frameworks of multiple technical types, thereby causing the base system to be unable to seamlessly integrate multiple sub-applications. Compared with the existing technology, the beneficial effects of the general basic capability adaptation device for micro-frontends provided by this application are the same as the beneficial effects of the general basic capability adaptation method for micro-frontends provided by the above-mentioned embodiment, and the other technical features of the general basic capability adaptation device for micro-frontends are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0183] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0184] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

[0185] The present application provides a storage medium, which is a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon. The computer-readable program instructions are used to execute the general basic capability adaptation method for micro-frontends in the above-mentioned embodiment.

[0186] The computer-readable storage medium provided herein may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems, or devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including, but not limited to, wires, optical cables, RF (Radio Frequency), etc., or any suitable combination thereof.

[0187] The above-mentioned computer-readable storage medium may be included in the general basic capability adapter device for micro front-ends; or it may exist independently without being assembled into the general basic capability adapter device for micro front-ends.

[0188] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the general basic capability adaptation device for micro-frontends, the general basic capability adaptation device for micro-frontends implements the technical content of the embodiment of the general basic capability adaptation method for micro-frontends as shown above.

[0189] Computer program code for performing the operations of the present application may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages such as Java, Smalltalk, C++, and conventional procedural programming languages such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0190] The flow charts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, program segment or a part of code, and the module, program segment or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented by a dedicated hardware-based system that performs the specified function or operation, or can be implemented by a combination of dedicated hardware and computer instructions.

[0191] The modules described in the embodiments of the present application may be implemented in software or hardware, wherein the name of a module does not necessarily limit the unit itself.

[0192] The computer-readable storage medium provided in this application stores computer-readable program instructions (i.e., a computer program) for executing the aforementioned general basic capability adaptation method for micro-frontends. This computer-readable storage medium can address the technical issue of existing micro-frontend integration being unable to adapt to frontend frameworks of various technology types, resulting in the base system being unable to seamlessly integrate multiple sub-applications. Compared to the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the general basic capability adaptation method for micro-frontends provided in the aforementioned embodiments, and are not further elaborated here.

Claims

1. A general basic capability adaptation method for micro front-ends, characterized in that: The method includes: Determine the sub-application currently to be loaded and obtain characteristic parameters of the sub-application, wherein a loading event of the sub-application is read to determine the loading status of the sub-application; if the sub-application is not loaded, obtain the static resources of the sub-application and extract the characteristic parameters from the static resources; if the sub-application is loaded, detect behavioral characteristic data of the sub-application and extract the characteristic parameters based on the behavioral characteristic data; Calculating the characteristic parameters using a preset adapter matching algorithm, and determining an adapter that matches the sub-application based on the calculation results, wherein a weight allocation algorithm is determined based on the business requirements of the sub-application; assigning weight values corresponding to the characteristic parameters using the weight allocation algorithm, and calculating a comprehensive score of the sub-application using the weight values; and determining an adapter that matches the sub-application based on the comprehensive score and the characteristic parameters; Setting configuration items of the adapter according to characteristic parameters of the sub-application; When the sub-application is activated, the page content of the sub-application is mounted to the micro-frontend framework for display through the adapter, wherein the decoration parameter set embedded in the routing path of the adapter is read, and a matching page frame is selected from the micro-frontend framework according to the decoration parameter set; when the page frame is not selected, the page frame is created according to the decoration parameter set; and the page content of the sub-application is displayed through the created page frame; Before the step of calculating the characteristic parameters by a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Create a new adapter and store the adapter in the micro front-end framework; According to the sub-application integration requirements of the base system, the base system communicates with the micro-front-end framework in real time through the base system communication interface. The base system serves as the main application and integrates multiple third-party sub-applications.

2. The general basic capability adaptation method for micro front-ends according to claim 1 is characterized in that: The step of determining an adapter matching the sub-application based on the comprehensive score and the characteristic parameters includes: determining whether the comprehensive score and the characteristic parameters satisfy a matching rule of the adapter; When it is determined that the conditions are met, the adapter is used as the adapter matched with the sub-application.

3. The general basic capability adaptation method for micro front-ends according to claim 1 is characterized in that: The step of setting the configuration items of the adapter according to the characteristic parameters of the sub-application includes: Obtaining demand data of the sub-application; Setting the routing path of the adapter according to the URL data extracted from the demand data; The flag parameter and the decoration parameter set carried in the demand data are embedded into the routing path.

4. The general basic capability adaptation method for micro front-ends according to claim 1, characterized in that: After the step of calculating the characteristic parameters using a preset adapter matching algorithm and determining the adapter matching the sub-application according to the calculation result, the method further includes: Calling the initialization method of the adapter to initialize the adapter and register the event detector; Before the step of mounting the page content of the sub-application to the micro-frontend framework for display through the adapter when the sub-application is activated, the method further includes: After detecting that the base system has been loaded, detecting the activation state of the sub-application.

5. A general basic capability adaptation device for micro front-ends, characterized in that: The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the general basic capability adaptation method for micro-frontends as described in any one of claims 1 to 4.

6. A storage medium, characterized in that The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the general basic capability adaptation method for micro-frontends as described in any one of claims 1 to 4 are implemented.

Images