A cross-application data responsive sharing method and device based on a qiankun micro front end

Abstract

This invention relates to the field of micro-frontend architecture technology, providing a method and device for cross-application data reactive sharing based on the Qiankun micro-frontend. The method includes: encapsulating a data sharing hook module and creating a cross-application shared data scope on a global window object; exposing an initialization method within the data sharing hook module; the initialization method receiving a unique identifier for reactive data and default values ​​for reactive data initialization as parameters, creating or retrieving a corresponding reactive data storage object within the cross-application shared data scope, attaching the reactive object to the storage object, and simultaneously returning the reactive data of the current application and its setting function; when any Qiankun micro-frontend application calls the setting function to update data, the data sharing hook module locates the corresponding reactive data storage object based on the unique identifier of the reactive data, triggering reactive updates in each application view. This invention simplifies the development process and enables synchronous updates across application views.

Description

Technical Field

[0001] This invention relates to the field of micro-frontend architecture technology, and in particular to a cross-application data reactive sharing method and device based on Qiankun micro-frontend. Background Technology

[0002] In large-scale front-end systems built on the Qiankun micro-front-end architecture, the main application typically handles common logic such as login, logout, user information, header navigation, and left-side navigation, while each sub-application focuses on specific business functions within the main content area. In this architecture, sub-applications frequently need to access common data from the main application, and may even need to display this data responsively directly in the sub-application's view. Therefore, how to efficiently and concisely achieve data sharing between the main and sub-applications, especially implementing responsive data binding across applications, becomes a key technical problem that such systems need to solve.

[0003] Currently, the industry mainly adopts the following two solutions to address the above needs:

[0004] The first approach involves sub-applications directly calling the backend API corresponding to the public data to retrieve the required data. This approach suffers from significant code redundancy: the main application and sub-applications need to repeatedly write the same data retrieval logic; if the public data includes certain computational logic, the sub-applications also need to replicate that logic. When product requirements change, both the main and sub-applications need to be modified and maintained synchronously, leading to a substantial increase in workload. Furthermore, in mainstream front-end frameworks like React and Vue, if shared data needs to be reactively bound to the sub-application's view, the framework's state management tools are required, further increasing the code complexity of the sub-applications. Additionally, there is a risk of logical implementation discrepancies when multiple people maintain the same sub-application.

[0005] The second approach utilizes the communication methods provided by the Qiankun Micro Frontend Framework itself to transfer data from the main application to the sub-application. Compared to the first approach, this eliminates the step of the sub-application repeatedly calling the interface, but it still requires additional communication logic code between the main and sub-applications. Furthermore, this approach also lacks the ability to directly and reactively bind shared data to the sub-application view; achieving this still requires the frontend framework's state management tools. Overall, this approach remains relatively cumbersome and fails to fundamentally simplify the development cost of cross-application reactive data sharing.

[0006] Chinese patent CN119848007A discloses a data sharing method. This method, centered on the main application, achieves data synchronization between the main and sub-applications through global state management tools, field subscriptions, and callback notification mechanisms. However, this solution suffers from a single point of failure in its system architecture, requires additional tools and complex subscription logic for implementation, exhibits latency in data synchronization real-time performance, and is limited to iframe scenarios, failing to efficiently achieve cross-application responsive data sharing and view synchronization updates.

[0007] Therefore, how to provide a simple and efficient technical solution for cross-application data responsive sharing has become an urgent technical problem to be solved. Summary of the Invention

[0008] In view of this, in order to overcome the shortcomings of the prior art, the present invention aims to provide a cross-application data responsive sharing method and device based on Qiankun micro front-end.

[0009] According to a first aspect of the present invention, a cross-application data reactive sharing method based on Qiankun micro-frontend is provided, the method comprising:

[0010] In the Qiankun Micro Frontend runtime environment, a data sharing hook module is encapsulated. When this module is initialized, a cross-application shared data scope is created on the global window object.

[0011] In the data sharing hook module, a unique identifier is generated for each Qiankun micro-frontend application, and an initialization method is exposed to the outside world;

[0012] The initialization method receives a unique identifier for the reactive data and default values ​​for the reactive data initialization as parameters. It creates or retrieves the corresponding reactive data storage object in the cross-application shared data scope, attaches the reactive object to the storage object, and returns the reactive data of the current application and its setting function.

[0013] When any Qiankun micro-frontend application calls the settings function to update data, the data sharing hook module locates the corresponding reactive data storage object based on the unique identifier of the reactive data, and updates the reactive data corresponding to all application unique identifiers on the storage object, triggering the reactive update of each application view.

[0014] Optionally, the present invention is based on the cross-application data reactive sharing method of Qiankun micro-frontend. The cross-application shared data scope is an independent JavaScript object, which is mounted on the window object and is used to centrally store the reactive data of all Qiankun micro-frontend applications participating in data sharing. Moreover, this scope is globally accessible among multiple micro-frontend applications.

[0015] Optionally, the present invention is based on the cross-application data responsive sharing method of Qiankun Micro Frontend. The unique identifier of the Qiankun Micro Frontend application is generated when the data sharing hook module is first imported by the current Qiankun Micro Frontend application. Whether it has been initialized is recorded by the state variable inside the data sharing hook module. If it already exists, it will not be generated again.

[0016] Optionally, the present invention is based on the cross-application data reactive sharing method of Qiankun Micro Frontend. When running the initialization method, it first checks whether there is a reactive data storage object corresponding to the unique identifier of the reactive data in the cross-application shared data scope; if it does not exist, a new reactive data storage object is created in the scope; if it already exists, the reactive data storage object is directly obtained.

[0017] Optionally, the present invention is based on the cross-application data reactive sharing method of Qiankun Micro Frontend. The reactive object is generated by the reactive data creation method of the frontend framework based on the default value of reactive data initialization. The reactive object is mounted in the reactive data storage object with the current application's unique identifier as the attribute name.

[0018] Optionally, the present invention is based on the cross-application data responsive sharing method of Qiankun Micro Frontend. The responsive data corresponding to the current application returned by the initialization method is used to bind to the view layer of the current application, and the setting function returned by the initialization method is used to update the responsive data of the current application or other applications.

[0019] Optionally, the present invention is based on the cross-application data reactive sharing method of Qiankun Micro Frontend. When the Qiankun Micro Frontend application calls the setting function to update data, it receives the new data value as a parameter. Based on the unique identifier of reactive data passed in when calling the setting function, it locates the corresponding reactive data storage object in the cross-application shared data scope, traverses all attributes in the reactive data storage object named with different application unique identifiers, and updates the corresponding reactive data to the new data value.

[0020] Optionally, the present invention is based on the cross-application data reactive sharing method of Qiankun Micro Frontend. The data sharing hook module can call the initialization method multiple times within the same Qiankun Micro Frontend application, passing in different reactive data unique identifiers and initialization default values, and manage multiple independent cross-application shared data channels, each channel corresponding to a different business data model.

[0021] Optionally, the present invention is based on the Qiankun micro-frontend cross-application data responsive sharing method, which is applied to a frontend framework with responsive data creation and automatic view update capabilities. By encapsulating a unified data sharing hook module, the main application and any number of sub-applications do not need to write additional interface call code or micro-frontend communication code, thus realizing cross-application responsive data sharing and view synchronization.

[0022] According to a second aspect of the present invention, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in the first aspect of the present invention.

[0023] The cross-application data responsive sharing method and device of the Qiankun micro-frontend of this invention have the following beneficial technical effects:

[0024] 1. Simplify the development process and reduce usage complexity.

[0025] When using the Qiankun Micro Frontend, the main application or any sub-application only needs to import the module and call the initialization method to obtain the current application's reactive data and its corresponding setting functions. Developers do not need to concern themselves with the internal implementation details of cross-application data synchronization, significantly reducing the development threshold and usage complexity of cross-application data sharing functionality.

[0026] 2. Eliminate code redundancy and reduce maintenance costs.

[0027] When business requirements change, only one piece of code needs to be modified, and all related applications will automatically take effect, effectively avoiding the increased workload and potential human error risks caused by modifying multiple applications simultaneously.

[0028] 3. No additional state management tools are required.

[0029] Sub-applications can directly use the returned reactive data-bound views without needing to import additional state management tools such as Redux and Vuex, reducing the code complexity and dependency size of sub-applications.

[0030] 4. Enable cross-application view synchronization updates

[0031] When any application calls the settings function to update shared data, the function will locate the corresponding reactive data storage object and update the reactive data copies of all applications on that object. With the help of the front-end framework's reactive system, the views of all related applications will be automatically refreshed synchronously, achieving true cross-application reactive data sharing.

[0032] 5. Supports multiple independent data channels

[0033] This allows the same application to call the initialization method multiple times and pass in different unique identifiers for reactive data, thereby creating multiple independent reactive data storage objects in a shared data scope across applications.

[0034] 6. Frame independence, wide applicability

[0035] It does not depend on any specific front-end framework, only requiring the framework to have basic responsive data creation and automatic view update capabilities. Attached Figure Description

[0036] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0037] Figure 1 This is a schematic diagram illustrating the technical principle of the cross-application data responsive sharing method based on Qiankun micro-frontend according to an exemplary embodiment 2 of the present invention.

[0038] Figure 2 This is a schematic diagram illustrating the technical principle of the cross-application data responsive sharing method based on Qiankun micro-frontend according to an exemplary embodiment 3 of the present invention for data updating and view synchronization.

[0039] Figure 3 This is a schematic diagram of the structure of the device provided by the present invention. Detailed Implementation

[0040] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0041] It should be noted that, in the absence of conflict, the following embodiments and features can be combined with each other; and, based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0042] It should be noted that various aspects of embodiments within the scope of the appended claims are described below. It will be apparent that the aspects described herein can be embodied in a wide variety of forms, and any particular structure and / or function described herein is merely illustrative. Based on this disclosure, those skilled in the art will understand that one aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number of aspects set forth herein can be used to implement the device and / or practice the method. Additionally, this device and / or method can be implemented using structures and / or functionalities other than one or more of the aspects set forth herein.

[0043] Example 1

[0044] Exemplary Example 1 of the present invention provides a cross-application data reactive sharing method based on Qiankun micro-frontend. In this embodiment, the method of the present invention is implemented in the following manner:

[0045] First, in the runtime environment of Qiankun Micro Frontend, a data sharing hook module is encapsulated. When this module is initialized, a cross-application shared data scope is created on the global window object.

[0046] In this embodiment, the cross-application shared data scope is an independent JavaScript object mounted on the window object. It is used to centrally store the reactive data of all Qiankun micro-frontend applications participating in data sharing, and this scope is globally accessible among multiple micro-frontend applications.

[0047] Secondly, in the data sharing hook module, a unique identifier is generated for each Qiankun micro-frontend application, and an initialization method is exposed to the outside world.

[0048] In this embodiment, the unique identifier of the Qiankun Micro Frontend Application is generated when the data sharing hook module is first imported by the current Qiankun Micro Frontend Application. Whether it has been initialized is recorded by the state variable inside the data sharing hook module. If it already exists, it will not be generated again.

[0049] Then, the initialization method receives the unique identifier of the reactive data and the default value of the reactive data as parameters, creates or obtains the corresponding reactive data storage object in the cross-application shared data scope, attaches the reactive object to the storage object, and returns the reactive data of the current application and its setting function.

[0050] It should be noted that when the initialization method is run, it first checks whether a reactive data storage object corresponding to the unique identifier of the reactive data exists in the cross-application shared data scope; if it does not exist, a new reactive data storage object is created in that scope; if it already exists, the reactive data storage object is directly obtained.

[0051] In this embodiment, the reactive object is generated based on the default values ​​of the reactive data initialization using the reactive data creation method of the front-end framework. The reactive object is mounted in the reactive data storage object with the current application's unique identifier as the attribute name.

[0052] In this embodiment, the reactive data corresponding to the current application returned by the initialization method is used to bind to the view layer of the current application, and the setting function returned by the initialization method is used to update the reactive data of the current application or other applications.

[0053] Finally, when any Qiankun micro-frontend application calls the settings function to update data, the data sharing hook module locates the corresponding reactive data storage object based on the unique identifier of the reactive data, and updates the reactive data corresponding to all application unique identifiers on the storage object, triggering the reactive update of each application view.

[0054] In this embodiment, when the Qiankun Micro front-end application calls the setting function to update data, it receives the new data value as a parameter, locates the corresponding reactive data storage object in the cross-application shared data scope based on the unique identifier of the reactive data passed when calling the setting function, traverses all attributes in the reactive data storage object named with different application unique identifiers, and updates the corresponding reactive data to the new data value.

[0055] In practical applications, the data sharing hook module of this embodiment can call the initialization method multiple times within the same Qiankun micro front-end application, passing in different reactive data unique identifiers and initialization default values, and manage multiple independent cross-application shared data channels, each corresponding to a different business data model.

[0056] The method in this embodiment is not limited to a specific front-end framework, but only requires that the front-end framework has the ability to create responsive data and update views automatically. By encapsulating the unified data sharing hook module, the main application and any number of sub-applications can achieve cross-application responsive data sharing and view synchronization without writing additional interface call code or micro-frontend communication code.

[0057] Example 2

[0058] Exemplary Example 2 of the present invention provides a cross-application data responsive sharing method based on Qiankun micro-frontend. Figure 1 This is a schematic diagram illustrating the technical principle of the cross-application data responsive sharing method based on Qiankun micro-frontend according to an exemplary embodiment 2 of the present invention.

[0059] like Figure 1 As shown in this embodiment, the cross-application data reactive sharing model based on the Qiankun micro-frontend architecture takes the global window object as the core carrier and builds a unified "cross-application shared data scope" on it to realize reactive data sharing between the main application and multiple sub-applications.

[0060] In the Qiankun micro-frontend architecture, all main applications and sub-applications share the same global window object of the browser page. This embodiment uses the window object as the physical carrier for cross-application data sharing. Since all micro-frontend applications run in the same window context, any data attached to this object can be accessed and modified by any application, thus providing the basic conditions for cross-application data sharing.

[0061] Above the window object, this embodiment creates a cross-application shared data scope through a data sharing hook module. This scope is essentially a JavaScript object mounted on the window object, internally organizing the storage structure of different business data according to unique identifiers for reactive data. This scope serves as the logical hub for data interaction between the main application and sub-applications. All reactive data that needs to be shared is encapsulated within this scope. External applications do not directly manipulate the window object but interact with this scope through the initialization methods and setup functions provided in this embodiment, ensuring both the standardization of data access and avoiding naming conflicts between different business modules.

[0062] like Figure 1 As shown in this embodiment, during initialization, the main application calls the initialization method, passing in the corresponding unique identifier of the reactive data and the initialization default value, to create its own reactive data storage entry in the cross-application shared data scope. "Shared data a" represents the reactive data copy of the main application under the current shared channel.

[0063] The sub-application also calls the initialization method of this embodiment, using the same unique reactive data identifier, to find the same reactive data storage object as the main application in the cross-application shared data scope, and creates a reactive data copy belonging to the sub-application on that object with its own unique identifier as the attribute name. "Shared data b" represents the reactive data copy of the sub-application under the same shared channel.

[0064] In this embodiment, the workflow of the cross-application data reactive sharing model based on the Qiankun micro-frontend architecture is as follows:

[0065] Initialization Phase: The main application and the sub-application each call the initialization method, passing in the same unique identifier for reactive data (e.g., "userInfo"). This method creates or retrieves the corresponding reactive data storage object within the cross-application shared data scope, and stores their respective reactive data copies using the unique identifier of the main application and the sub-application as the property name.

[0066] Data update phase: When the main application calls the setting function to update "shared data a", the setting function locates the corresponding reactive data storage object based on the unique identifier of the reactive data, and then iterates through all attributes on the object, i.e., all reactive data copies of all applications, and updates them uniformly to the new values. The update operation of the main application is passed to the "shared data b" of the child application through the cross-application shared data scope.

[0067] View synchronization phase: Since both "shared data a" and "shared data b" are reactive objects of the front-end framework, they are bound to the view layers of the main application and the sub-application, respectively. When the values ​​of these reactive objects are updated, the front-end framework automatically triggers the re-rendering of the relevant view components in the main application and the sub-application, thereby achieving synchronized refresh of views across applications.

[0068] This embodiment of the cross-application data reactive sharing model based on the Qiankun micro-frontend architecture uses the window object as a foundation. It manages the reactive data copies of each micro-frontend application in a unified manner through the cross-application shared data scope, realizing cross-application data reactive sharing between the main application and sub-applications without additional interface calls, explicit communication, or state management tools.

[0069] Example 3

[0070] Exemplary embodiment 3 of the present invention provides a cross-application data responsive sharing method based on Qiankun micro-frontend. Figure 2 This is a schematic diagram illustrating the technical principle of the cross-application data responsive sharing method based on Qiankun micro-frontend according to an exemplary embodiment 3 of the present invention for data updating and view synchronization.

[0071] like Figure 2 As shown, when the main application and sub-application use the method of this embodiment, they first need to import the data sharing hook module and call the initialization method exposed by the module.

[0072] The execution process of this initialization method is as follows:

[0073] When the main application calls the initialization method, it passes in the first reactive data unique identifier (e.g., identifier data a) and its initial default value. The method searches for or creates a reactive data storage object corresponding to data a in the cross-application shared data scope, that is, the reactive data mounting object of data a. Then, on the storage object, the reactive object of reactive data a is created and mounted with the unique identifier of the main application as the property name.

[0074] When the sub-application calls the initialization method, it passes in the same unique identifier of the reactive data (data a) and its initial default value. The method locates the existing reactive data mounting object of data a, and on that object, it creates and mounts the reactive sub-reactive object of reactive data a with the unique identifier of the sub-application as the property name.

[0075] Similarly, if the main application and the sub-application need to share another set of business data (e.g., data b), the initialization method is called again, passing in data b as the unique identifier of the reactive data. This creates a reactive data mount object for data b in the cross-application shared data scope and generates the reactive b main and reactive b sub respectively.

[0076] When the main application needs to update shared data, it calls the setting function (i.e., the set function) returned by the initialization method in this embodiment, passing in the new data value. The execution logic of this setting function is as follows:

[0077] The setter function locates the corresponding reactive data mount object for data 'a' within the cross-application shared data scope, based on the unique identifier of the reactive data associated with it at the time of the call (e.g., data 'a'). Then, the setter function iterates through all properties on that mount object, including the primary and child reactive data 'a', and updates their values ​​uniformly to the new data value passed in to the setter function. A single setter call can simultaneously update all application-specific copies of reactive data under the same mount object.

[0078] Similarly, if a sub-application calls its own set function to update data, its execution logic is exactly the same as that of the main application: locate the corresponding reactive data mount object, and then update all reactive data copies on that object (including the copy of the main application).

[0079] When the value of a reactive main object or a reactive child object is updated, the framework will automatically detect the data change and trigger the corresponding view component to re-render because these reactive objects have been bound to the view layer through the reactive system of the front-end framework (such as React or Vue).

[0080] A responsive main application (a) has a responsive binding relationship with the main application view. When the main responsive application (a) is updated, all components in the main application view that depend on that data automatically refresh. Similarly, a responsive child application (a) has a responsive binding relationship with its child application view. When the child responsive application (a) is updated, all components in the child application view that depend on that data automatically refresh. Because the setter function updates both the main and child responsive applications (a), the main application view and the child application view will refresh synchronously, displaying the same latest data state.

[0081] It should be noted that in practical applications, the reactive data mount objects for data 'a' and 'b' can each correspond to two different sets of business data (such as user information and page configuration). The main application and sub-applications can call the initialization method multiple times, passing in different unique identifiers for the reactive data (data 'a', data 'b', etc.), thereby creating multiple independent reactive data mount objects within the cross-application shared data scope. Each mount object stores copies of the reactive data from both the main application and sub-applications according to the aforementioned mechanism. Update operations between data channels are independent of each other; updating data 'a' will not affect the reactive data copy of data 'b', and vice versa, allowing for flexible adaptation to the management needs of multiple sets of cross-application shared data in complex business scenarios.

[0082] The cross-application data reactive sharing method based on Qiankun micro-frontend in this invention has the following beneficial technical effects:

[0083] 1. Simplify the development process and reduce usage complexity.

[0084] By encapsulating a separate hooks module, only the initialization method is exposed. When using the main application or any sub-application in the Qiankun micro-frontend, simply import this module and call the initialization method to obtain the current application's reactive data and its corresponding setting functions. Developers do not need to concern themselves with the internal implementation details of cross-application data synchronization, significantly reducing the development threshold and usage complexity of cross-application data sharing functionality.

[0085] 2. Eliminate code redundancy and reduce maintenance costs.

[0086] This avoids the need for sub-applications to repeatedly call public data interfaces, and also eliminates the need to replicate the main application's business calculation logic within sub-applications. All shared data acquisition, calculation, and update logic is centrally managed in the main application's hooks module. When business requirements change, only one code modification is required, and all related applications automatically take effect, effectively avoiding the exponential workload and potential human error risks associated with simultaneous modifications across multiple applications.

[0087] 3. No additional state management tools are required.

[0088] By directly leveraging the built-in reactive data creation methods of front-end frameworks (such as React and Vue), shared data can be converted into reactive objects and mounted in the cross-application shared data scope. Sub-applications can directly use the returned reactive data to bind views, eliminating the need to import additional state management tools such as Redux and Vuex, thus reducing the code complexity and dependency size of sub-applications.

[0089] 4. Enable cross-application view synchronization updates

[0090] Leveraging the feature that the main and sub-applications of the Qiankun micro-frontend share the same window object, an independent scope is created on the window object, and a unified update mechanism is implemented through a set function. When any application calls the set function to update shared data, the function will locate the corresponding reactive data storage object and update the reactive data copies of all applications on that object. With the help of the frontend framework's reactive system, the views of all related applications are automatically triggered to refresh synchronously, achieving true cross-application reactive data sharing.

[0091] 5. Supports multiple independent data channels

[0092] This allows the same application to call the initialization method multiple times, passing in different unique identifiers for reactive data, thereby creating multiple independent reactive data storage objects within a cross-application shared data scope. Update operations between different data channels do not interfere with each other, flexibly adapting to the management needs of multiple sets of cross-application shared data in complex business scenarios.

[0093] 6. Frame independence, wide applicability

[0094] This method does not rely on any specific front-end framework, only requiring the framework to have basic reactive data creation and automatic view update capabilities. Regardless of whether the project is based on React, Vue, or other similar frameworks, the method of this invention can be implemented by encapsulating the corresponding hook modules, exhibiting good versatility and portability.

[0095] like Figure 3 As shown, the present invention also provides a device including a processor 310, a communication interface 320, a memory 330 for storing processor-executable computer programs, and a communication bus 340. The processor 310, communication interface 320, and memory 330 communicate with each other via the communication bus 340. The processor 310 implements the aforementioned cross-application data responsive sharing method based on the Qiankun micro-frontend by running the executable computer program.

[0096] The computer program in memory 330, when implemented as a software functional unit and sold or used as an independent product, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0097] The system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected based on actual needs to achieve the purpose of this embodiment. Those skilled in the art can understand and implement this without any creative effort.

[0098] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods of various embodiments or some parts of embodiments.

[0099] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for cross-application data responsive sharing based on a dry and wet micro-frontend, characterized in that, The method includes: In the Qiankun Micro Frontend runtime environment, a data sharing hook module is encapsulated. When this module is initialized, a cross-application shared data scope is created on the global window object. In the data sharing hook module, a unique identifier is generated for each Qiankun micro-frontend application, and an initialization method is exposed to the outside world; The initialization method receives a unique identifier for the reactive data and default values ​​for the reactive data initialization as parameters. It creates or retrieves the corresponding reactive data storage object in the cross-application shared data scope, attaches the reactive object to the storage object, and returns the reactive data of the current application and its setting function. When any Qiankun micro-frontend application calls the settings function to update data, the data sharing hook module locates the corresponding reactive data storage object based on the unique identifier of the reactive data, and updates the reactive data corresponding to all application unique identifiers on the storage object, triggering the reactive update of each application view. 2.The method of claim 1, wherein, The created cross-application shared data scope is an independent JavaScript object, mounted on the window object, used to centrally store the reactive data of all Qiankun micro-frontend applications participating in data sharing, and this scope is globally accessible across multiple micro-frontend applications. 3.The method of claim 1, wherein, The unique identifier of the Qiankun Micro Frontend Application is generated when the data sharing hook module is first imported into the current Qiankun Micro Frontend Application. Whether it has been initialized is recorded by the state variable inside the data sharing hook module. If it already exists, it will not be generated again. 4.The method of claim 1, wherein, When the initialization method is run, it first checks whether a reactive data storage object corresponding to the unique identifier of the reactive data exists in the cross-application shared data scope; if it does not exist, a new reactive data storage object is created in the scope; if it already exists, the reactive data storage object is directly obtained.

5. The method of claim 1, wherein, Reactive objects are generated using the reactive data creation method of the front-end framework, based on the default values ​​of reactive data initialization. The reactive object is mounted in the reactive data storage object with the property name being the unique identifier of the current application.

6. The method of claim 1, wherein, The reactive data returned by the initialization method for the current application is used to bind to the view layer of the current application, and the setter function returned by the initialization method is used to update the reactive data of the current application or other applications.

7. The method of claim 1, wherein the method is implemented by a micro-frontend based on Dry-Run. When the Qiankun Micro front-end application calls the setting function to update data, it receives the new data value as a parameter. Based on the unique identifier of the reactive data passed in when calling the setting function, it locates the corresponding reactive data storage object in the cross-application shared data scope, traverses all properties in the reactive data storage object named with different application unique identifiers, and updates the corresponding reactive data to the new data value. 8.The method of claim 1, wherein, The data sharing hook module can call the initialization method multiple times within the same Qiankun micro-frontend application, passing in different reactive data unique identifiers and initialization default values, and manage multiple independent cross-application shared data channels, each corresponding to a different business data model. 9.The method of claim 1, wherein, The method is applied to a front-end framework with responsive data creation and view automatic updating capabilities, and through encapsulating a unified data sharing hook module, no additional interface calling code or micro front-end communication code needs to be written between a main application and any number of sub-applications, so that cross-application responsive data sharing and view synchronization are achieved.

10. A computer device, comprising: The computer device comprises a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the steps of the method in any one of claims 1-9 when executing the program.

Images