Micro-front-end system, communication method, electronic equipment and storage medium

Abstract

The invention provides a micro-front-end system, a communication method, electronic equipment and a storage medium, and the method comprises the steps that a sub-application sends a first request message to a frame module, the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; the sub-application receives a first response message returned by the framework module; wherein the first response message carries a first identifier; and the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier. The communication between the sub-application and the framework module can be realized without depending on a post Message API (Application Program Interface). And meanwhile, the first iframe object serving as a communication party can be accurately positioned through the first identifier, so that the problem that the framework module cannot accurately respond when a plurality of iframe objects in the sub-application communicate with the framework module at the same time is avoided.

Description

Technical Field

[0001] The present application relates to the field of micro-front-end technology, and in particular to a micro-front-end system, a communication method, an electronic device and a storage medium. Background Art

[0002] Micro frontend is a modern web frontend integration solution that provides methods and strategies to integrate multiple independently developed applications into a unified framework. The micro frontend architecture aims to solve the problem of unmaintainability of applications after a monolithic application evolves from an ordinary application to a monolithic application (FrontendMonolith) over a relatively long period of time due to the increase in the number of participants and teams, technological changes, etc.

[0003] At present, the more popular micro-frontend frameworks include: MicroApp, Qiankun. Both do not use iframe (inline frame) technology. Their main problems are that they are not friendly to old applications and the isolation between applications is not thorough enough. With the use of iframe technology in micro-frontends, it can achieve good isolation and has been widely recognized.

[0004] However, iframe technology also brings a new problem, that is, the micro-frontend system mainly relies on the postMessage API (Application Programming Interface) provided by the browser to achieve communication, which has great limitations. Summary of the invention

[0005] Based on the above technical status, the present application proposes a micro-front-end system, a communication method, an electronic device and a storage medium, which can realize accurate communication between the frame and the iframe object in the micro-front-end system.

[0006] According to a first aspect of an embodiment of the present application, a communication method of a micro-front-end system is provided, the micro-front-end system comprising: a sub-application and a framework module, the method comprising: the sub-application sending a first request message to the framework module, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; the sub-application receives a first response message returned by the framework module; wherein the first response message carries the first identifier; the sub-application instructs the first iframe object to consume data in the first response message through the first identifier.

[0007] In some embodiments, before the sub-application sends the first request message to the framework module, the method further includes: generating a random string; and adding the random string as the first identifier to the first request message.

[0008] In some embodiments, the first request message also carries a target application programming interface; the first response message also carries data to be consumed; wherein the data to be consumed is data determined by the framework module based on an application programming interface that successfully matches the target application programming interface; the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, including: the sub-application instructs the first iframe object to consume the data to be consumed in the first response message through the first identifier.

[0009] In some embodiments, after the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, the method also includes: when the sub-application monitors the second message, sending a second message to the shared work process, so that the shared work process sends the second message to the second iframe object of the sub-application; wherein the first iframe object and the second iframe object of the sub-application are both registered in the shared work process.

[0010] According to a second aspect of an embodiment of the present application, a communication method of a micro-front-end system is provided, the micro-front-end system comprising: a sub-application and a framework module, the method comprising: the framework module receiving a first request message sent by the sub-application, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; the framework module responds to the first request message, and sends a first response message to the sub-application, so that the sub-application instructs the first iframe object to consume data in the first response message through the first identifier; wherein the first response message carries the first identifier.

[0011] In some embodiments, the first request message carries a target application programming interface; before the framework module receives the first request message sent by the sub-application, the method further includes:

[0012] The framework module registers multiple application programming interfaces; in response to the first request message, sends a first response message to the sub-application, including: the framework module matches the target application programming interface through the multiple application programming interfaces; the framework module determines the data to be consumed based on the application programming interface that successfully matches the target application programming interface; adds the data to be consumed to the first response message, and sends the first response message to the sub-application.

[0013] In some embodiments, after the framework module sends a first response message to the sub-application in response to the first request message, the method also includes: determining a recipient of the broadcast message; determining a sending mode of the broadcast message based on the recipient; and sending the broadcast message based on the sending mode of the broadcast message.

[0014] In some embodiments, the sending mode includes: a first sending mode of sending to all sub-applications, a second sending mode of sending to any sub-application, and a third sending mode of sending to any iframe object.

[0015] According to a third aspect of an embodiment of the present application, a micro-front-end system is provided, comprising: a sub-application and a framework module; the sub-application is used to send a first request message to the framework module, wherein the first request message carries a first identifier, which is an identifier of a first iframe object in the sub-application; the sub-application is also used to receive a first response message returned by the framework module; wherein the first response message carries the first identifier; the sub-application is also used to instruct the first iframe object to consume data in the first response message through the first identifier.

[0016] According to a fourth aspect of an embodiment of the present application, a micro-front-end system is provided, comprising: a sub-application and a framework module; the framework module is used to receive a first request message sent by the sub-application, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; the framework module is also used to send a first response message to the sub-application in response to the first request message, so that the sub-application instructs the first iframe object to consume data in the first response message through the first identifier; wherein the first response message carries the first identifier.

[0017] According to the fifth aspect of an embodiment of the present application, an electronic device is provided, comprising a memory and a processor; the memory is connected to the processor and is used to store programs; the processor is used to implement the communication method of the micro-front-end system as described in the first aspect or the second aspect by running the program in the memory.

[0018] According to a sixth aspect of an embodiment of the present application, a storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the communication method of the micro-front-end system as described in the first aspect or the second aspect is implemented.

[0019] According to a seventh aspect of an embodiment of the present application, a computer program product is provided, including: a computer program, which, when executed by a processor, implements the communication method of the micro-front-end system as described in the first aspect or the second aspect.

[0020] In an embodiment of the present application, a new communication method is provided for a micro-front-end system implemented based on iframe technology, and communication does not need to be performed in accordance with the specifications of the postMessage API. The identifier of the first iframe object can be carried in the first request message sent by the sub-application. Then, after receiving the first response message returned by the framework module, the first identifier is used to indicate that the first iframe object consumes the data in the first response message. Without relying on the postMessage API, communication between the sub-application and the framework module can be achieved. At the same time, the first identifier can also be used to accurately locate the first iframe object as a communicating party, thereby avoiding the problem that the framework module cannot respond accurately when multiple iframe objects in the sub-application communicate with the framework module at the same time. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0022] Figure 1 A UML class diagram of the EventBus tool provided in the embodiment of the present application;

[0023] Figure 2 A schematic diagram of data flow of a micro front-end system provided in an embodiment of the present application;

[0024] Figure 3 One of the flow charts of a communication method of a micro front-end system provided in an embodiment of the present application;

[0025] Figure 4 A flow chart of the communication process in accordance with the specific properties and methods of EventBus in the embodiment of the present application;

[0026] Figure 5 A flow chart of the communication process between tabs / iframe objects provided in an embodiment of the present application;

[0027] Figure 6 A second flow chart of a communication method for a micro front-end system provided in an embodiment of the present application;

[0028] Figure 7A flowchart of the implementation process of reducing the complexity of the framework module communication process by using the post method provided in the embodiment of the present application;

[0029] Figure 8 A schematic diagram of the structure of a micro front-end system provided in an embodiment of the present application;

[0030] Fig. 9 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0031] The technical solution proposed in the embodiment of the present application is applicable to the communication scenario in the micro-frontend system. By adopting the technical solution proposed in the embodiment of the present application, the communication between the sub-application and the framework module can be realized without relying on the postMessage API. At the same time, it can also avoid the problem that the framework module cannot respond accurately when multiple iframe objects in the sub-application communicate with the framework module at the same time.

[0032] As described in the background technology, with the development of web front-end technology, modularization and engineering development have gradually become the mainstream. As the scale of front-end applications becomes larger and larger, the difficulty of maintenance is also increasing. The traditional single application approach is full of difficulties in adding, modifying, migrating, and refactoring functions. In order to solve these problems, the micro-front-end solution came into being. It integrates front-end applications developed with different technology stacks and even at different times, so that they can cooperate, communicate, and coordinate with each other to form a complex front-end system. Based on a stable framework and corresponding integration specifications, multiple single applications can be independently developed, released, and maintained, and can also be run as a whole to provide customers with consistent experience functions and services.

[0033] In order to solve the problem of insufficient isolation in the micro-frontend system implemented by MicroApp and Qiankun technology, some technical solutions began to use iframe technology to implement the micro-frontend system. The iframe technology can achieve good window isolation, style isolation, element isolation, etc.

[0034] However, using iframe technology to implement a micro-frontend system also brings new problems. That is, it is necessary to rely on the postMessage API provided by the browser. Native postMessage can safely implement cross-source communication. In a broad sense, a window obtains a reference to another window (such as an iframe object), and then calls the iframe.contentWindow.postMessage method on the window to distribute a MessageEvent event. The iframe object that receives the message can listen to the MessageEvent event as needed, and can also carry string type parameters. Similarly, in the iframe object, the parent window object that references the iframe object can be obtained through the parent object, and the MessageEvent event can be distributed through the parent.postMessage method. In this way, the purpose of mutual communication between the framework and the sub-application is achieved. It can be seen that the entire communication process is cumbersome. At the same time, when multiple iframe objects of a sub-application communicate with the framework at the same time, the framework cannot respond accurately. In other words, the message responded by the framework cannot be accurately returned to the correct iframe object.

[0035] In view of the above technical status, the embodiment of the present application proposes a communication method of a micro-frontend system, which can realize the communication between the sub-application and the framework module without relying on the postMessage API. At the same time, it can also avoid the problem that the framework module cannot respond accurately when multiple iframe objects in the sub-application communicate with the framework module at the same time.

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

[0037] To facilitate understanding, the relevant terms and concepts mainly involved in the embodiments of the present application are first introduced below.

[0038] Framework: The foundation of the micro-frontend architecture, providing basic UI (user interface) layout, components, interaction mechanisms, communication methods, integration specifications, etc. for connected applications. The framework module that makes up the micro-frontend system described below is the framework.

[0039] Sub-application: A subsystem in a micro-frontend system that needs to be integrated into the framework.

[0040] iframe: An inline frame element that can embed another HTML (Hypertext Markup Language) page into the current page. It is one of the optional technologies for implementing a micro-frontend framework.

[0041] SharedWorker: is a specific type of worker that can be accessed in multiple browsing contexts, such as multiple windows, iframes, or other workers. It can solve the global communication problem in front-end integration.

[0042] PostMessage: A message passing method for front-end communication. It is divided into window.postMessage and worker.postMessage. Window.postMessage can safely implement cross-source communication. One window obtains a reference to another window and calls the targetWindow.postMessage() method to distribute a MessageEvent message. Worker.postMessage can send JavaScript object data to the worker.

[0043] Event bus: Event bus is an implementation of the publish-subscribe model. It is a centralized event processing mechanism that allows different components to communicate with each other without relying on each other, thereby achieving the purpose of decoupling between applications.

[0044] EventBus: The name of the event bus in this application, which is a communication tool program actually written according to the method of this application.

[0045] In the case where the communication method of the micro front-end system provided in the embodiment of the present application is implemented by the EventBus tool, for ease of understanding, the EventBus tool can be first described from multiple dimensions. It is worth noting that the EventBus tool is only one implementation method of the communication method of the micro front-end system provided in the embodiment of the present application.

[0046] Specifically, the UML (Unified Modeling Language) class diagram of the EventBus tool can be as follows Figure 1 As shown in the figure, the EventBus class has private properties such as _emitter, _fromName, _children, ..., _devMode, etc.

[0047] The explanation of this private attribute is shown in Table 1 below:

[0048]

[0049] Table 1

[0050] When using the EventBus tool, you need to instantiate EventBus and pass in the relevant configuration items of BusOption.

[0051] The structure of BusOption is shown in Table 2 below:

[0052]

[0053] Table 2

[0054] In order to standardize the data structure during the communication process, it can be agreed that the data structure transmitted during the communication process is mainly the TransferData structure.

[0055] The structure of TransferData is shown in Table 3 below:

[0056]

[0057] Table 3

[0058] The methods of the EventBus class include but are not limited to Figure 1 The all method, on method, off method, etc. shown in . It can also include the emit method, post method, etc. Figure 2 As shown in the figure, in the scheme of using EventBus tool to realize micro-frontend system communication, the data flow mainly includes three directions. First, the data flow within the current EventBus instance. In the same EventBus instance, subscribing to an event through the on method can trigger the event anywhere through the emit method. Second, the data flow between the EventBus instance of the framework and the EventBus instance of the sub-application is realized through the post method and the on method. Third, the data flow between EventBus instances with the same SharedWorker URL is also realized through the emit method and the on method.

[0059] Here, we first briefly explain the post method, on method, and emit method. Among them, the parameters that the emit method needs to transmit include type and data in Table 3. Data communication is implemented inside the EventBus instance. The post method and on method are a set of methods for sending / receiving messages. The parameters can be used to distinguish whether the data is sent from the framework to the sub-application or from the sub-application to the framework. Example of using the post method: bus.post(data:transferData,target:'global'|string|string[],byId:boolean). The post method includes three parameters, namely data, target, and byId. When the sender calls the post method, the data flow direction is determined by whether there is a target parameter. If there is a target parameter, it means that the framework sends a message to the sub-application. At this time, the iframe object with the name attribute of target will be searched in the current framework environment. If it can be found, the data will be sent to the found iframe object. If there is no target parameter, it means that the sub-application sends a message to the framework. In the process of the framework sending data to the sub-application, the post method matches the target parameter by the name attribute of the iframe object by default. If the byId parameter is true, the target parameter is matched by the id attribute of the iframe object. The on method can monitor and receive messages outside the EventBus instance. The receiver receives messages through the on method, such as bus.on('xxx', (data)=>…), where the second parameter is the callback function, and the parameter in the callback function is the transmitted data.

[0060] It is worth noting that the communication between the framework module and the iframe object usually uses the postMessage method, and the communication based on the postMessage method needs to obtain the reference relationship of the page. When the iframe object sends a message to the framework module, the page reference can be easily obtained directly through window.parent. However, when the framework module sends a message to the sub-application, it has to manually find the corresponding iframe object. In a micro-frontend environment based on iframe technology, there will be multiple or even dozens of iframe objects. Finding a specified iframe object is a tedious and error-prone task. The EventBus tool of this application can be regarded as formulating a communication specification, and it is very necessary to simplify the communication process through a certain encapsulation, so that the framework module does not need to pay attention to the specific iframe object when sending messages to the sub-application.

[0061] It is understandable that this application does not limit the usage of the above-mentioned EventBus tool in engineering. For ease of understanding, an exemplary explanation is provided here. For example, write a tool class EventBus in utils and export it through export. Create a new bus.ts file, import the tool class EventBus, initialize it, and then export the bus instance. The framework module imports the bus instance in the app.vue file, and provides a token query interface through bus.registryApi('user-info',data). The sub-application imports the bus instance in the app.vue file and obtains the token information through bus.getData('user-info').then(res=>res.data.token). The framework module and sub-application import the bus instance where needed, receive messages through bus.on('xxx',()=>{…}), and send messages through bus.post({type:'xxx',data:data}).

[0062] Exemplary Methods

[0063] See also Figure 3 In an exemplary embodiment, a communication method of a micro front-end system is provided, wherein the micro front-end system includes: a sub-application and a framework module. For the sub-application and the framework module, please refer to the description of the above terms, which will not be repeated here. The communication method of the micro front-end system may include:

[0064] S301: The sub-application sends a first request message to the framework module.

[0065] In this step, the sub-application can be any sub-application in the micro-frontend system, which is not limited here. The first request message is a message sent by the sub-application to request data from the framework module. Among them, the first request message carries a first identifier, and the first identifier is the identifier of the first iframe object in the sub-application. Regarding the identifier of the first iframe object, it can be a unique identifier composed of at least one of numbers, letters, and special symbols. In addition, different iframe objects have different identifiers.

[0066] It should be noted that, in addition to the first iframe object, the sub-application may also include at least one iframe object. Furthermore, the sub-application may send a request message for other iframe objects when sending the first request message. Among them, the request message for a certain iframe object usually carries the identifier of the iframe object. For example, when multiple tabs are opened in the sub-application, each tab is equivalent to an iframe object. Although the program interface can only display one tab at a time, the undisplayed tabs are still alive. In the process of the currently displayed tab communicating with the framework module (for example, sending a request message), these alive tabs can communicate with the framework module at the same time.

[0067] S302: The sub-application receives a first response message returned by the framework module.

[0068] In this step, the first response message carries the first identifier. The framework module can generate and feed back the first response message in response to the first request message. In addition, to ensure that the first response message can accurately reach the first iframe object, the first identifier in the first request message needs to be added to the first response message.

[0069] S303: The sub-application instructs the first iframe object to consume the data in the first response message through the first identifier.

[0070] In the case where the sub-application includes multiple iframe objects, the sub-application receives the first response message, which is equivalent to all iframe objects receiving the first response message. However, the first response message is a response to the first request message, and the data in the first response message should be consumed by the iframe object targeted by the first request message, that is, it should be consumed by the first iframe object. To this end, the first identifier in the first response message can be directly used to match each iframe object respectively, and the iframe object that successfully matches is regarded as the first iframe object. For example, each iframe object uses the first identifier in the first response message to match its own identifier. If the match is successful, the data in the first response message can be consumed; otherwise, the consumption of the data in the first response message is prohibited. The data in the first response message consumed by the first iframe object and the way of consuming the data are related to the specific business carried by the micro-front-end system, and this application does not limit it.

[0071] In an embodiment of the present application, a new communication method is provided for a micro-front-end system implemented based on iframe technology, and communication does not need to be performed in accordance with the specifications of the postMessage API. The identifier of the first iframe object can be carried in the first request message sent by the sub-application. Then, after receiving the first response message returned by the framework module, the first identifier is used to indicate that the first iframe object consumes the data in the first response message. Without relying on the postMessage API, communication between the sub-application and the framework module can be achieved. At the same time, the first identifier can also be used to accurately locate the first iframe object as a communicating party, thereby avoiding the problem that the framework module cannot respond accurately when multiple iframe objects in the sub-application communicate with the framework module at the same time.

[0072] The same iframe object may have multiple request data needs at different times or at the same time. Accordingly, multiple request messages will be generated for the iframe object, and the data requested by each request message is not exactly the same. At this time, if the identifiers carried by each request message are the same, it will be impossible to accurately determine the correspondence between the multiple request messages and the multiple response messages returned by the framework module. Even if it is known that these response messages should be consumed by a certain iframe object. However, since the correspondence between the request message and the response message is unclear, the iframe object will not be able to correctly consume the data in the response message. To this end, in some embodiments of the present application, before the sub-application sends the first request message to the framework module, the method also includes:

[0073] Generate a random string; and add the random string as a first identifier to the first request message.

[0074] It should be noted that the random string is random, and it can be a random string composed of at least one of numbers, letters, and special symbols. For example, the random string can be the concatenation result of a timestamp and a random number, but is not limited to this. Due to the randomness of the random string, even if the request message generated for the same iframe object, its first identifier will be different at different times or the same time. In this way, the first identifier can distinguish different iframe objects and ensure that the correct iframe object can consume the corresponding data. It can also distinguish different request messages to ensure that the iframe object can correctly consume the data in the response message.

[0075] For example, the sub-application sends two request messages at the same time—request message A and request message B. Moreover, the data requested by request message A needs to be consumed according to the first business logic. The data requested by request message B needs to be consumed according to the second business logic. Assume that the first identifier in request message A is 2022-2-23-1156 and the first identifier in request message B is 2022-2-23-1346. Then, the response message a of the framework module to request message A will carry 2022-2-23-1156, and the response message b of the framework module to request message B will carry 2022-2-23-1346. After the sub-application receives the two response messages and determines the corresponding iframe object, it can determine that response message a is a response to request message A and response message b is a response to request message b by comparing the first identifiers in the request message and the response message. Then, the data in response message a will be consumed based on the first business logic, and the data in response message b will be consumed based on the second business logic.

[0076] In this embodiment, by setting the first identifier to a random string, not only can different iframe objects be distinguished to ensure that the correct iframe object can consume the corresponding data, but also different request messages can be distinguished to ensure that the iframe object can correctly consume the data in the response message.

[0077] To improve the flexibility of the data to be consumed, in some embodiments of the present application, the first request message also carries a target application programming interface; the first response message also carries the data to be consumed; wherein the data to be consumed is data determined by the framework module based on the application programming interface that successfully matches the target application programming interface;

[0078] The sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, including: the sub-application instructs the first iframe object to consume the data to be consumed in the first response message through the first identifier.

[0079] It should be noted that multiple application programming interfaces can be pre-registered in the framework module based on the business needs of the micro-frontend system. Different application programming interfaces can be mapped to different callback functions, and different data can be obtained through different callback functions. In this way, when the sub-application generates a request message, it can add the application programming interface mapped by the callback function of the required data to the request message based on business needs. Then the framework module can use the corresponding application programming interface to obtain the required data to be consumed for the sub-application to consume. Among them, the corresponding application programming interface is the one that successfully matches the target application programming interface among the multiple pre-registered application programming interfaces.

[0080] For example, a sub-application needs to consume data D in the framework. Assume that the application programming interface mapped to the callback function for obtaining data D is API01. Then, API01 can be added to the request message. In this way, the data to be consumed carried in the response message will be based on the data D obtained by API01. After receiving the response message, the sub-application consumes data D.

[0081] In this embodiment, a target application programming interface can be added to the request message, so as to obtain the data to be consumed in a targeted manner, which greatly improves the flexibility of the data to be consumed.

[0082] The following is an exemplary description of the communication method of the micro-frontend system provided in this embodiment in combination with the specific properties and methods of EventBus. Specifically, a specific method can be designed in EventBus to achieve accurate communication between the framework module and the iframe object of the sub-application. For example, the method can be a getData method and a registryApi method. Among them, the getData method can be a further encapsulation result of the aforementioned post method.

[0083] like Figure 4 As shown, the sub-application calls the getData method to execute S401: Generate a random string based on the timestamp and the random number, and assign it to timestamp. S402: Use the aforementioned post method and combine relevant attributes to send a request message to the framework. Among them, the value of the type parameter is 'get-data', the fromName parameter is set to the name of the sub-application, and the timestamp parameter is set to the random string of S401. The data parameter is set to the target API. Among them, when the sub-application has a communication requirement in the first iframe object, it can determine the API corresponding to the required data and the name of the sub-application. Among them, the name of the sub-application is the same as the name of the EventBus instance in the first iframe object. The API corresponding to the required data is the target API.

[0084] S403: The framework module listens to the get-data event through the on method. The framework module calls the setData method to read the target API, finds the corresponding callback function from the locally registered API list, and executes the callback function. S404: The framework module uses the post method to send a response message to the sub-application. Among them, the type parameter value is 'set-data', the fromName parameter is the name of the sub-application in the get-data event, and the timestamp parameter is also set to the corresponding data in the get-data event. The data parameter is set to the data obtained using the callback function.

[0085] S405: The sub-application listens to the set-data event. S406: For the first iframe object, determine whether the parameter value of the timestamp parameter in the set-data event / response message is the same as the random string in S401. If they are the same, execute S407: consume the data in the set-data event / response message and destroy the set-data event. It is worth noting that the framework module pre-registers an API list locally using the registryApi method. Each API in the API list corresponds to a callback function.

[0086] It should be noted that in the micro-frontend system implemented by iframe technology, the sub-application needs to obtain the token of the framework module for gateway verification during the loading process. This involves the timing of when the framework module sends the token to the sub-application. Because the framework module cannot determine when the sub-application is fully loaded, the sub-application needs to notify the framework module when the loading is complete, and then the framework module sends the token information to the sub-application. In such a scenario, the registryApi method and getData can be used. According to Figure 4 The process shown realizes the communication between the sub-application and the framework module. At the same time, when multiple iframe objects under the sub-application initiate getData requests to the framework module at the same time, the timeStamp attribute can be used to accurately determine which request message initiated each response message, and the data can be accurately responded to.

[0087] When using native postMessage to send messages, different iframe objects can only communicate with each other with the help of the framework module, and the communication efficiency is relatively low. In order to improve the communication efficiency between different iframe objects, in some embodiments of the present application, after the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, the method also includes:

[0088] When the sub-application monitors the second message, it sends the second message to the shared work process, so that the shared work process sends the second message to the second iframe object of the sub-application; wherein the first iframe object and the second iframe object of the sub-application are both registered in the shared work process.

[0089] It should be noted that the second message can be a message obtained from the first iframe object, or a message obtained from a shared work process. Among them, the shared work process can be a sharedWorker process. For sharedWorker, please refer to the relevant description of the aforementioned terms. It can be understood that SharedWorker is a special webworker that can share data among multiple pages of the same origin, and a sharedWorker process is created or joined by configuring a sharedWorker URL. Only one sharedWorker will be created for the same URL, and other pages using the same URL will be added to the existing sharedWorker process. Then the pages can communicate with each other through the sharedWorker process.

[0090] Similarly, iframe objects in sub-applications can also communicate with each other with the help of sharedWorker. For example, a sharedWorker URL can be configured during EventBus initialization to create a shared worker process, namely a sharedWorker process. In this way, when the same browser opens the same system in multiple tabs, when one of the browser tabs receives a message sent by emit or post through the on method, it will determine whether the sharedWorker process has been created. If it has been created, it will send a message to the sharedWorker process. When the sharedWorker process receives the message, it will broadcast the message to other tabs except the one that sent the message (such as a new tab). After the new tab listens to the message through worker.port.addEventListener, it can attach a tab-tag tag to the message, and then send an emit event, which will be listened to by the EventBus instance of the new tab, completing the cross-tab communication. In addition, when the emit event is listened, it is determined whether the tab-tag tag exists. If the tab-tag tag exists, no message will be sent to the sharedWorker process to avoid falling into the event loop.

[0091] Since each iframe object is equivalent to a browser tab, each iframe object corresponds to an EventBus instance. The behavior of the tab can be regarded as the behavior of the iframe object that constitutes the tab. Therefore, the iframe object can be equivalent to the tab, and the above cross-tab communication can also be regarded as cross-iframe object communication, that is, communication between iframe objects. It is worth noting that when the tab is closed, a page-unload message will be sent. When the sharedWorker process listens to this message, it will clear the connection of the tab from the port list. For the specific process of the above example, please refer to Figure 5 . Figure 5 Only two tabs are used as an example for explanation, where tab A includes a first iframe object and tab B includes a second iframe object. The EventBus instantiation process is the same in tab A / first iframe object and tab B / second iframe object, using the workerPath parameter in Table 2 above. With this parameter, sharedWorker is instantiated, a worker instance is created in the sharedWorker process, and the worker is connected to the sharedWorker process. In this way, whether it is tab A or tab B, when judging whether there is work during the communication process, it can be determined based on the instance in the sharedWorker process that a worker exists without creating a new one.

[0092] like Figure 5As shown, when tab A uses the emit method to send the 'test-event' event / message, the 'test-event' event can be monitored through step S501: monitoring all events and step S502 monitoring the 'test-event' event. The 'test-event' event monitored inside the EventBus instance of tab A needs to be determined whether it has the tabTag tag. If there is no such tag, the 'test-event' event can be sent to the worker instance of the sharedWorker process through step S504. The worker instance can monitor the 'test-event' event through step S505. Then, it is determined whether the tab is closed through step S506. For closed tabs, the connection of the tab is cleared through step S507. For unclosed tabs (such as tab B), the 'test-event' event is broadcast to its instance through step S508. Tab B executes step S509 and can monitor the 'test-event' event through worker.port.addEventListener. For the event monitored by worker.port.addEventListener, first execute step S510 to add a tabTag tag to the event to avoid falling into an event loop. Then, in step S511, the 'test-event' event is sent using the emit method. Finally, in step S512, the 'test-event' event is received using the on method. The communication between tab A and tab B, that is, the communication between the first iframe object and the second iframe object, is realized.

[0093] In this embodiment, different iframe objects can communicate with each other without the aid of a framework module, thereby improving the communication efficiency between different iframe objects.

[0094] Taking the application to the framework module as an example, another embodiment of the present application provides a communication method of a micro front-end system, such as Figure 6 As shown, the communication method of the micro front-end system includes:

[0095] S601: The framework module receives a first request message sent by a sub-application.

[0096] The first request message carries a first identifier, which is an identifier of a first iframe object in the sub-application.

[0097] S602: The framework module sends a first response message to the sub-application in response to the first request message, so that the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier.

[0098] The first response message carries a first identifier.

[0099] For feasible execution methods of step S601 and step S602 and possible beneficial effects, reference may be made to the relevant description in the embodiment of step S301 to step S303 described above, which will not be elaborated in this embodiment.

[0100] To improve the flexibility of the data to be consumed, in some embodiments of the present application, the first request message carries a target application programming interface; before the framework module receives the first request message sent by the sub-application, the method further includes: the framework module registers multiple application programming interfaces;

[0101] In response to the first request message, sending a first response message to the sub-application includes:

[0102] The framework module matches the target application programming interface through multiple application programming interfaces; the framework module determines the data to be consumed based on the application programming interface that successfully matches the target application programming interface; adds the data to be consumed to the first response message, and sends the first response message to the sub-application.

[0103] It should be noted that multiple application programming interfaces can be pre-registered in the framework module based on the business needs of the micro-frontend system. Different application programming interfaces can be mapped to different callback functions, and different data can be obtained through different callback functions. In this way, when the sub-application generates a request message, it can add the application programming interface mapped by the callback function of the required data to the request message based on business needs. Then the framework module can use the corresponding application programming interface to obtain the required data to be consumed for the sub-application to consume. Among them, the corresponding application programming interface is the one that successfully matches the target application programming interface among the multiple pre-registered application programming interfaces.

[0104] In this embodiment, a target application programming interface can be added to the request message, so as to obtain the data to be consumed in a targeted manner, which greatly improves the flexibility of the data to be consumed.

[0105] To reduce the complexity of the framework module communication process, in some embodiments of the present application, after the framework module responds to the first request message and sends the first response message to the sub-application, the method further includes:

[0106] Determine a receiver of the broadcast message; determine a sending mode of the broadcast message based on the receiver; and send the broadcast message based on the sending mode of the broadcast message.

[0107] It should be noted that the broadcast message is the message to be sent by the framework module. As the sender of the message, the framework module can obtain the relevant information of the receiver to accurately locate the receiver. The sending mode is determined based on the relevant information of the receiver. It is understandable that in the scenario where the framework module communicates with the sub-application, different sub-applications or different iframe objects in the same sub-application can serve as the receiver of the message. In different communication scenarios, the differences in the message receivers are quite obvious. To this end, different sending modes can be set, and then after determining the receiver, a suitable sending mode is selected to send the broadcast message. For example, the post method of the aforementioned embodiment is used to send a broadcast message.

[0108] In this embodiment, different sending modes can be set based on the differences of message receivers in different communication scenarios. Selecting a suitable sending mode to send a broadcast message can reduce the complexity of the communication process of the framework module.

[0109] In some embodiments, the sending modes include: a first sending mode of sending to all sub-applications, a second sending mode of sending to any sub-application, and a third sending mode of sending to any iframe object.

[0110] It should be noted that the post method in the aforementioned embodiment can be used as an example for explanation. Example of post method usage: bus.post(data:transferData,target:'global'|string|string[],byId:boolean). The post method includes three parameters, namely data, target, and byId. If the target parameter is 'global', the sending mode belongs to the first sending mode. If the target parameter is the name of a sub-application, the sending mode belongs to the second sending mode. If the target parameter is the name of an iframe object, the sending mode belongs to the third sending mode. Of course, the target parameter can also be the names of multiple sub-applications, then messages will be sent to these sub-applications in batches. For example, post(data,['subApp1','subapp2',…]).

[0111] The following is a specific example to illustrate the implementation process of reducing the complexity of the framework module communication process using the post method. Figure 7 As shown, including:

[0112] Step S701: Determine the name of the EventBus instance, for example, data.from = this.fromName.

[0113] Step S702: Determine whether the taget parameter in the post method exists. If yes, execute step S703

[0114] Step S703: Determine whether the taget parameter is 'global'. If not, execute step S704; if yes, execute step S705.

[0115] Step S704: Determine the message sending mode as: sending a message to a specified sub-application.

[0116] Step S705: Determine the message sending mode as: sending messages to all sub-applications.

[0117] Step S706: Search the iframe object whose name attribute is target in the current frame environment.

[0118] Step S707: Determine whether there is an iframe object with a name attribute of target. If not, report an error. If yes, execute step S708.

[0119] Step S708: Send a message to a specified iframe object, which is the iframe object found in S706.

[0120] It should be noted that when the taget parameter does not exist in the post method, it means that the data flow is from the sub-application to the framework module. You can send messages directly to the recipient of the message. Regardless of whether the sender of the message is a sub-application or a framework module, the recipient of the message can use the on method to receive the message after listening to it.

[0121] In this embodiment, a set of methods (post / on) can be used to support two-way communication between the iframe object of the sub-application and the framework module, and also support the framework module to send batch messages to multiple sub-applications.

[0122] Example micro-frontend system

[0123] Accordingly, the embodiment of the present application also provides a micro front-end system, such as Figure 8 As shown, the micro front-end system includes: a sub-application 801 and a framework module 802;

[0124] The sub-application 801 is used to send a first request message to the framework module 802, wherein the first request message carries a first identifier, which is an identifier of a first iframe object in the sub-application 801;

[0125] The sub-application 801 is further used to receive a first response message returned by the framework module 802; wherein the first response message carries a first identifier;

[0126] The sub-application 801 is further used to instruct the first iframe object to consume the data in the first response message through the first identifier.

[0127] In some embodiments, the sub-application 801 is further used to: generate a random string; and add the random string as a first identifier to the first request message.

[0128] In some embodiments, the first request message also carries a target application programming interface; the first response message also carries data to be consumed; wherein the data to be consumed is data determined by the framework module 802 based on the application programming interface that successfully matches the target application programming interface; the sub-application 801 is specifically used for: the sub-application 801 indicates through a first identifier that the first iframe object consumes the data to be consumed in the first response message.

[0129] In some embodiments, the sub-application 801 is also used to: upon monitoring a second message, send a second message to the shared work process, so that the shared work process sends the second message to the second iframe object of the sub-application 801; wherein the first iframe object and the second iframe object of the sub-application 801 are both registered in the shared work process.

[0130] Accordingly, another embodiment of the present application provides a micro front-end system, see Figure 8 , the micro front-end system includes: a sub-application 801 and a framework module 802;

[0131] The framework module 802 is used to receive a first request message sent by the sub-application 801, wherein the first request message carries a first identifier, and the first identifier is the identifier of the first iframe object in the sub-application 801; the framework module 802 is used to send a first response message to the sub-application 801 in response to the first request message, so that the sub-application 801 instructs the first iframe object to consume the data in the first response message through the first identifier; wherein the first response message carries the first identifier.

[0132] In some embodiments, the first request message carries a target application programming interface; the framework module 802 is also used for the framework module 802 to register multiple application programming interfaces; match the target application programming interface through multiple application programming interfaces; determine the data to be consumed based on the application programming interface that successfully matches the target application programming interface; add the data to be consumed to the first response message, and send the first response message to the sub-application 801.

[0133] In some embodiments, the framework module 802 is further used to determine a recipient of the broadcast message; determine a sending mode of the broadcast message based on the recipient; and send the broadcast message based on the sending mode of the broadcast message.

[0134] In some embodiments, the sending modes include: a first sending mode of sending to all sub-applications 801 , a second sending mode of sending to any sub-application 801 , and a third sending mode of sending to any iframe object.

[0135] The micro-front-end system provided in this embodiment belongs to the same application concept as the communication method of the micro-front-end system provided in the above-mentioned embodiment of this application, and can execute the communication method of the micro-front-end system provided in any of the above-mentioned embodiments of this application, and has the functional modules and beneficial effects corresponding to the execution method. For the technical details not described in detail in this embodiment, please refer to the specific processing content of the communication method of the micro-front-end system provided in the above-mentioned embodiment of this application, which will not be repeated here.

[0136] It should be understood that the modules in the above devices can be implemented in the form of a processor calling software. For example, the device includes a processor, the processor is connected to a memory, and instructions are stored in the memory. The processor calls the instructions stored in the memory to implement any of the above methods or realize the functions of each unit of the device, wherein the processor can be a general-purpose processor, such as a CPU or a microprocessor, etc., and the memory can be a memory in the device or a memory outside the device. Alternatively, the unit in the device can be implemented in the form of a hardware circuit, and the functions of some or all units can be realized by designing the hardware circuit. The hardware circuit can be understood as one or more processors; for example, in one implementation, the hardware circuit is an ASIC, and the functions of some or all of the above units are realized by designing the logical relationship of the components in the circuit; for another example, in another implementation, the hardware circuit can be implemented by PLD, taking FPGA as an example, which can include a large number of logic gate circuits, and the connection relationship between the logic gate circuits is configured by a configuration file, so as to realize the functions of some or all of the above units. All units of the above devices can be implemented in the form of a processor calling software, or in the form of a hardware circuit, or in part by a processor calling software, and the remaining part is implemented in the form of a hardware circuit.

[0137] In an embodiment of the present application, a processor is a circuit with the ability to process signals. In one implementation, the processor may be a circuit with the ability to read and run instructions, such as a CPU, a microprocessor, a GPU, or a DSP; in another implementation, the processor may implement certain functions through the logical relationship of a hardware circuit, and the logical relationship of the hardware circuit is fixed or reconfigurable, such as a hardware circuit implemented by an ASIC or PLD, such as an FPGA. In a reconfigurable hardware circuit, the process of the processor loading a configuration document to implement the hardware circuit configuration can be understood as the process of the processor loading instructions to implement the functions of some or all of the above units. In addition, it can also be a hardware circuit designed for artificial intelligence, which can be understood as an ASIC, such as an NPU, TPU, DPU, etc.

[0138] It can be seen that each unit in the above device can be one or more processors (or processing circuits) configured to implement the above method, such as: CPU, GPU, NPU, TPU, DPU, microprocessor, DSP, ASIC, FPGA, or a combination of at least two of these processor forms.

[0139] In addition, all or part of the units in the above device can be integrated together, or can be implemented independently. In one implementation, these units are integrated together and implemented in the form of a SOC. The SOC may include at least one processor for implementing any of the above methods or implementing the functions of each unit of the device. The type of the at least one processor may be different, for example, including a CPU and an FPGA, a CPU and an artificial intelligence processor, a CPU and a GPU, etc.

[0140] Exemplary Electronic Devices

[0141] The present application embodiment provides an electronic device, see Fig. 9 As shown, the device includes: a memory 200 and a processor 210; wherein the memory 200 is connected to the processor 210 and is used to store programs; the processor 210 is used to implement the communication method of the micro-front-end system disclosed in any of the above embodiments by running the program stored in the memory 200.

[0142] Specifically, the electronic device may further include: a bus, a communication interface 220, an input device 230, and an output device 240. The processor 210, the memory 200, the communication interface 220, the input device 230, and the output device 240 are interconnected via a bus. The bus may include a path to transmit information between various components of the computer system.

[0143] The processor 210 may be a general-purpose processor, such as a general-purpose central processing unit (CPU), a microprocessor, etc., or an application-specific integrated circuit (ASIC), or one or more integrated circuits for controlling the execution of the program of the scheme of the present invention. It may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components.

[0144] The processor 210 may include a main processor, and may also include a baseband chip, a modem, and the like.

[0145] The memory 200 stores a program for executing the technical solution of the present invention, and may also store an operating system and other key services. Specifically, the program may include a program code, and the program code includes a computer operation instruction. More specifically, the memory 200 may include a read-only memory (ROM), other types of static storage devices that can store static information and instructions, a random access memory (RAM), other types of dynamic storage devices that can store information and instructions, a disk storage, a flash, and the like.

[0146] The input device 230 may include a device for receiving data and information input by a user, such as a keyboard, a mouse, a camera, a scanner, a light pen, a voice input device, a touch screen, a pedometer or a gravity sensor, etc. The output device 240 may include a device for outputting information to a user, such as a display screen, a printer, a speaker, etc.

[0147] The communication interface 220 may include any transceiver or the like to communicate with other devices or communication networks, such as Ethernet, Radio Access Network (RAN), Wireless Local Area Network (WLAN), etc.

[0148] The processor 210 executes the program stored in the memory 200 and calls other devices, which can be used to implement the various steps of the communication method of any micro-front-end system provided in the above embodiments of the present application.

[0149] Exemplary computer program products and storage media

[0150] In addition to the above-mentioned methods and devices, an embodiment of the present application may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps in the communication method of the micro-front-end system according to various embodiments of the present application described in any of the above embodiments of this specification.

[0151] The computer program product may be written in any combination of one or more programming languages ​​to write program codes for performing the operations of the embodiments of the present application, including object-oriented programming languages, such as Java, C++, etc., and conventional procedural programming languages, such as "C" language or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as an independent software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0152] In addition, the embodiment of the present application may also be a storage medium on which a computer program is stored. The computer program is executed by a processor to execute the steps of the communication method of the micro front-end system according to various embodiments of the present application described in any of the above embodiments of this specification, and specifically the following steps may be implemented:

[0153] The sub-application sends a first request message to the framework module, wherein the first request message carries a first identifier, which is the identifier of the first iframe object in the sub-application; the sub-application receives a first response message returned by the framework module; wherein the first response message carries the first identifier; the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier.

[0154] Alternatively, the framework module receives a first request message sent by the sub-application, wherein the first request message carries a first identifier, and the first identifier is the identifier of the first iframe object in the sub-application; the framework module responds to the first request message and sends a first response message to the sub-application, so that the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier; wherein the first response message carries the first identifier.

[0155] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0156] It should be noted that each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the embodiments can be referred to each other. For the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0157] The steps in the methods of each embodiment of the present application can be adjusted in order, combined and deleted according to actual needs, and the technical features recorded in each embodiment can be replaced or combined.

[0158] The modules and sub-modules in the devices and terminals of the various embodiments of the present application can be combined, divided and deleted according to actual needs.

[0159] In the several embodiments provided in the present application, it should be understood that the disclosed terminals, devices and methods can be implemented in other ways. For example, the terminal embodiments described above are only schematic, for example, the division of modules or submodules is only a logical function division, and there may be other division methods in actual implementation, for example, multiple submodules or modules can be combined or integrated into another module, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interfaces, devices or modules, which can be electrical, mechanical or other forms.

[0160] The modules or submodules described as separate components may or may not be physically separated, and the components of the modules or submodules may or may not be physical modules or submodules, that is, they may be located in one place, or they may be distributed on multiple network modules or submodules. Some or all of the modules or submodules may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0161] In addition, each functional module or submodule in each embodiment of the present application may be integrated into one processing module, or each module or submodule may exist physically separately, or two or more modules or submodules may be integrated into one module. The above-mentioned integrated modules or submodules may be implemented in the form of hardware or in the form of software functional modules or submodules.

[0162] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0163] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly by hardware, software units executed by a processor, or a combination of the two. The software units may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0164] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0165] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A communication method of a micro front-end system, characterized in that: The micro front-end system includes: a sub-application and a framework module, and the method includes: The sub-application sends a first request message to the framework module, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; The sub-application receives a first response message returned by the framework module; wherein the first response message carries the first identifier; The sub-application instructs the first iframe object to consume the data in the first response message through the first identifier.

2. The method according to claim 1, characterized in that Before the sub-application sends the first request message to the framework module, the method further includes: Generate a random string; The random character string is added as the first identifier to the first request message.

3. The method according to claim 1, characterized in that The first request message also carries a target application programming interface; the first response message also carries data to be consumed; wherein the data to be consumed is data determined by the framework module based on the application programming interface that successfully matches the target application programming interface; The sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, including: The sub-application instructs the first iframe object to consume the data to be consumed in the first response message through the first identifier.

4. The method according to claim 1, characterized in that: After the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier, the method further includes: When the sub-application monitors the second message, the sub-application sends the second message to the shared working process, so that the shared working process sends the second message to the second iframe object of the sub-application; Wherein, the first iframe object and the second iframe object of the sub-application are both registered in the shared work process.

5. A communication method of a micro front-end system, characterized in that: The micro front-end system includes: a sub-application and a framework module, and the method includes: The framework module receives a first request message sent by the sub-application, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; The framework module sends a first response message to the sub-application in response to the first request message, so that the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier; wherein the first response message carries the first identifier.

6. The method according to claim 5, characterized in that The first request message carries a target application programming interface; Before the framework module receives the first request message sent by the sub-application, the method further includes: The framework module registers a plurality of application programming interfaces; In response to the first request message, sending a first response message to the sub-application includes: The framework module matches the target application programming interface through the multiple application programming interfaces; The framework module determines the data to be consumed based on the application programming interface that successfully matches the target application programming interface; The data to be consumed is added to the first response message, and the first response message is sent to the sub-application.

7. The method according to claim 5, characterized in that After the framework module sends a first response message to the sub-application in response to the first request message, the method further includes: Determine the recipients of the broadcast message; determining a sending mode of the broadcast message based on the receiving party; The broadcast message is sent based on the sending mode of the broadcast message.

8. The method according to claim 7, characterized in that The sending modes include: a first sending mode for sending to all sub-applications, a second sending mode for sending to any sub-application, and a third sending mode for sending to any iframe object.

9. A micro front-end system, characterized in that: The micro front-end system includes: sub-application and framework modules; The sub-application is used to send a first request message to the framework module, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; The sub-application is further used to receive a first response message returned by the framework module; wherein the first response message carries the first identifier; The sub-application is further used to instruct the first iframe object to consume the data in the first response message through the first identifier.

10. A micro front-end system, characterized in that: The micro front-end system includes: sub-application and framework modules; The framework module is configured to receive a first request message sent by the sub-application, wherein the first request message carries a first identifier, and the first identifier is an identifier of a first iframe object in the sub-application; The framework module is also used to send a first response message to the sub-application in response to the first request message, so that the sub-application instructs the first iframe object to consume the data in the first response message through the first identifier; wherein the first response message carries the first identifier.

11. An electronic device, characterized in that: including memory and processor; The memory is connected to the processor and is used to store programs; The processor is used to implement the communication method of the micro-front-end system as described in any one of claims 1 to 8 by running the program in the memory.

12. A storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by the processor, the communication method of the micro-front-end system according to any one of claims 1 to 8 is implemented.

13. A computer program product, characterized in that include: A computer program, wherein when the computer program is executed by a processor, the communication method of the micro-frontend system described in any one of claims 1 to 8 is implemented.

Images