Component style setting method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application provide a component style setting method and device, electronic equipment and storage medium, and relate to the technical field of computers. Different event buses correspond to each sub-application under the micro-front-end framework, and the component library registered by each sub-application listens to events through the corresponding event bus; when each sub-application determines to change the style according to the received style change message, the sub-application sends a style change event to the corresponding event bus according to the target style in the style change message, so that the component library registered by the sub-application changes the style of the component mounted on the page body to the target style. Since the event bus corresponding to each sub-application is unique to each sub-application, the style change event sent by each sub-application through the event bus will only trigger the component library registered by the sub-application to change the component style, and will not affect other sub-applications, thereby realizing that the escape component can have the style of the sub-application to which it belongs, and will not cause style pollution of other sub-applications.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to a component style setting method and device, electronic equipment and storage medium. BACKGROUND

[0002] The existing micro-frontend framework mechanism requires that the sub-applications therein are isolated from each other, that is, each sub-application is unaware of the existence of other sub-applications, and the developer only needs to be concerned about the function development of the sub-application and does not need to worry about the scope problem. However, some components that escape from the sub-application, such as pop-up boxes, prompt information, drop-down panels and the like, are directly mounted on the page body, thereby losing the style scope of the sub-application.

[0003] In the prior art, in order to add the style of the sub-application to the escaped component, the style of the sub-application is usually directly mounted on the page body, which can solve the problem in the sense, but is essentially a scope pollution, that is, the style scope of the sub-application runs to the page body, which will produce some unpredictable side effects, such as style pollution to other sub-applications. SUMMARY

[0004] Therefore, the purpose of the present application is to provide a component style setting method and device, electronic equipment and storage medium, so that the escaped component can have the style of the sub-application, and at the same time, the style pollution to other sub-applications is avoided.

[0005] In order to achieve the above purpose, the technical solutions adopted by the embodiments of the present application are as follows:

[0006] In a first aspect, the present application provides a component style setting method applied to a plurality of sub-applications under a micro-frontend framework, each sub-application corresponding to a different event bus, and a component library registered by each sub-application listening to events through the event bus corresponding to each sub-application; the method comprises:

[0007] determining whether to change the style of the sub-application according to the received style change message; the style change message comprising a target style;

[0008] in the case of determining to change the style of the sub-application, sending a style change event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style change event, and changes the style of the component mounted on the page body in the component library to the target style according to the style change event.

[0009] In an optional embodiment, the determination of whether to change the style of the sub-application according to the received style change message comprises:

[0010] If the target style exists in the currently stored style data of the sub-application and the current style of the sub-application is different from the target style, it is determined to change the style of the sub-application.

[0011] If the target style does not exist in the currently stored style data of the sub-application or the current style of the sub-application is the same as the target style, it is determined not to change the style of the sub-application.

[0012] In an optional implementation, the method further includes:

[0013] After the sub-application and the event bus corresponding to the sub-application are registered, the component library is registered by the sub-application, so that the component library can obtain the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus.

[0014] In an optional implementation, the method further includes:

[0015] After the component library is registered, a responsive object is injected into the component library through a global mixin, and the responsive object includes style data; wherein the component library changes the style of the component mounted on the page body in the component library by changing the style data in the responsive object.

[0016] In an optional implementation, the style of the component mounted on the page body in the component library is set using an intersection selector.

[0017] In a second aspect, the application provides a component style setting device, which is applied to a plurality of sub-applications under a micro-front-end framework, each sub-application corresponds to a different event bus, and a component library registered by each sub-application listens to events through the event bus corresponding to the sub-application; the device includes:

[0018] A judgment module is configured to determine whether to change the style of the sub-application according to a received style change message; the style change message includes a target style.

[0019] An event sending module is configured to, in a case where it is determined to change the style of the sub-application, send a style change event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application obtains the style change event and changes the style of the component mounted on the page body in the component library to the target style according to the style change event.

[0020] In an optional implementation, the device further includes:

[0021] The component library registration module is configured to, after the sub-application and the event bus corresponding to the sub-application are registered, register a component library through the sub-application, so that the component library can obtain the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus.

[0022] In an optional embodiment, the apparatus further comprises:

[0023] The responsive object generation module is configured to, after the component library is registered, inject a responsive object into the component library through a global mixin, the responsive object comprising style data; and wherein the component library replaces the style of a component mounted on a page body in the component library by changing the style data in the responsive object.

[0024] In a third aspect, the present application provides an electronic device comprising a processor, a memory, and a computer program stored on the memory and executable on the processor, wherein the computer program, when executed by the processor, implements the steps of the component style setting method according to any one of the preceding embodiments.

[0025] In a fourth aspect, the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and the computer program, when executed by a processor, implements the steps of the component style setting method according to any one of the preceding embodiments.

[0026] The component style setting method, apparatus, electronic device, and storage medium provided by the embodiments of the present application are characterized in that each sub-application under the micro-front-end framework corresponds to a different event bus, and the component library registered by each sub-application listens to events through the event bus corresponding to each sub-application; each sub-application determines whether to replace the style according to the received style replacement message, the style replacement message comprising a target style, and in the case of determining to replace the style of the sub-application, sends a style replacement event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application obtains the style replacement event and replaces the style of a component mounted on a page body in the component library with the target style. Since the event bus corresponding to each sub-application is unique to each sub-application, the style replacement event sent by each sub-application through the event bus will only trigger the component library registered by the sub-application to replace the component style, and will not affect other sub-applications, thereby realizing a component mounted on a page body from a sub-application, which can have the style of the sub-application and will not pollute the styles of other sub-applications.

[0027] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, the following preferred embodiments are described in detail below, and the accompanying drawings are described as follows. BRIEF DESCRIPTION OF DRAWINGS

[0028] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required to be used in the embodiments will be briefly introduced as follows. It should be understood that the following drawings only show some of the embodiments of the present application, and therefore should not be regarded as a limitation to the scope, and other related drawings can also be obtained by those of ordinary skill in the art without any creative effort.

[0029] Figure 1 A structural schematic diagram of an existing micro-frontend framework is shown;

[0030] Figure 2 A schematic diagram showing that an escape component in a sub-application is mounted to the body is shown;

[0031] Figure 3 A schematic diagram showing a scenario in which the escape component loses the skin scope is shown;

[0032] Figure 4 A schematic diagram showing the escape component and the skin of the sub-application in the scenario in which the escape component loses the skin scope is shown;

[0033] Figure 5 A schematic diagram showing a scenario in which the prior art directly mounts the skin of a sub-application to the body is shown;

[0034] Figure 6 A schematic diagram showing the scenario in which the prior art directly mounts the skin of a sub-application to the body and affects the styles of other sub-applications is shown;

[0035] Figure 7 A schematic diagram showing a flow of a component style setting method provided by an embodiment of the present application is shown;

[0036] Figure 8 A schematic diagram showing another flow of a component style setting method provided by an embodiment of the present application is shown;

[0037] Figure 9 A schematic diagram showing that the escape component in an embodiment of the present application has the skin scope of the sub-application is shown;

[0038] Figure 10 A schematic diagram showing the escape component and the skin of the sub-application in an embodiment of the present application is shown;

[0039] Figure 11 A schematic diagram showing the escape component and the skin of other sub-applications in an embodiment of the present application is shown;

[0040] Figure 12 A functional module diagram of a component style setting device provided by an embodiment of the present application is shown;

[0041] Figure 13This invention provides another functional block diagram of the component style setting device.

[0042] Figure 14 A block diagram of an electronic device provided in an embodiment of the present invention is shown.

[0043] Icons: 100 - Electronic device; 600 - Component style setting device; 110 - Memory; 120 - Processor; 130 - Communication module; 610 - Judgment module; 620 - Event sending module; 630 - Component library registration module; 640 - Responsive object generation module. Detailed Implementation

[0044] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0045] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0046] It should be noted that relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0047] like Figure 1 As shown, existing micro-frontend frameworks require that sub-applications be isolated from each other. This means that each sub-application is unaware of the existence of others, and developers only need to focus on developing the functionality of their own sub-application without worrying about scope issues. However, components that "escape" from sub-applications, such as pop-ups, tooltips, and dropdowns, are directly mounted onto the page body (e.g., ...).Figure 2 As shown in FIG. 1, the current micro-frontend framework cannot guarantee the style scope of these escaped components. Among them, body represents the main part of the page, that is, the content that users can see, which can include text, pictures, audio, video and various content.

[0048] For example, if the style of the sub-application is added to the sub-application container, these components escaped from the sub-application will lose the style scope in the source sub-application container. Taking the skin style as an example, as shown in FIG. 2, the skin of sub-application A is added to the sub-application container, and the current sub-application A has a black skin, but the skin of the pop-up component escaped from the sub-application A is white, thereby losing the skin scope in the source sub-application container. Figure 3 and Figure 4 As shown in FIG. 2, the skin of sub-application A is added to the sub-application container, and the current sub-application A has a black skin, but the skin of the pop-up component escaped from the sub-application A is white, thereby losing the skin scope in the source sub-application container.

[0049] In order to add the style of the escaped component to the sub-application, the current technology usually directly mounts the style of the sub-application to the body, which can solve the problem in the sense, but it is essentially a scope pollution, that is, the style scope of the sub-application runs to the global body, which will produce some unpredictable side effects, such as style pollution of other sub-applications.

[0050] Taking the skin style as an example again, as shown in FIG. 3, the skin of sub-application A is directly mounted to the body, which can make the components escaped from the sub-application A have the same skin as sub-application A, but since the skin of sub-application A is mounted to the body, if other sub-applications (such as sub-application B) do not have the skin of sub-application A, but some components in other sub-applications have the skin of sub-application A, it will cause the skin of part of the components in other sub-applications to be replaced, thereby causing style pollution. Figure 5

[0051] As shown in FIG. 4, assuming that the current sub-application A has a black skin, sub-application B currently has a white skin and sub-application B does not have a black skin, but part of the components in sub-application B have a black skin, after the skin of sub-application A is mounted to the body, the skin of the components escaped from sub-application A will become black, and part of the components in sub-application B will be switched from white skin to black skin. Figure 6

[0052] ​​In order to enable the escape component to have the style of the sub-application to which the escape component belongs without causing style pollution of other sub-applications, an embodiment of the present application provides a component style setting method, device, electronic equipment and storage medium, different event buses corresponding to each sub-application under a micro-frontend framework are set, and a component library registered by each sub-application listens to events through the event bus corresponding to the sub-application; each sub-application determines whether to change the style according to a received style change message, the style change message includes a target style, in a case where it is determined to change the style of the sub-application, a style change event is sent to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style change event, and the style of a component mounted on a page body in the component library is changed to the target style according to the style change event. Since the event bus corresponding to each sub-application is unique to the sub-application, the style change event sent by each sub-application through the event bus will only trigger the component library registered by the sub-application to change the component style, and will not affect other sub-applications, thereby realizing that the component escaped from the sub-application is directly mounted on the page body, which can have the style of the sub-application to which the escape component belongs without causing style pollution of other sub-applications.

[0053] In the following, each embodiment of the present application will be described in detail with reference to the accompanying drawings.

[0054] Please refer to Figure 7 A flowchart of a component style setting method provided by an embodiment of the present application. It should be noted that the component style setting method of the embodiment of the present application is not limited to the specific order of Figure 7 and the following, it should be understood that in other embodiments, the order of some steps of the component style setting method of the embodiment of the present application can be exchanged according to actual needs, or some steps can be omitted or deleted. The component style setting method can be applied in personal computers (PCs), tablet computers, smart phones and other electronic equipment. In the following, the specific process shown in Figure 7 will be described in detail.

[0055] Step S701, determine whether to change the style of the sub-application according to the received style change message; the style change message includes a target style.

[0056] In this embodiment, a user opens a page in an electronic device, the page is built by a micro-frontend framework, and the page includes multiple sub-applications. The micro-frontend framework sends a style change message to all sub-applications on the page according to a style change operation of the user on the page, and each sub-application receives the style change message and determines whether to change the style according to its actual situation.

[0057] In the embodiment, the style can be skin, font size, and the like. The target style in the style replacement message refers to the replaced style. Taking skin as an example, it is assumed that the target style is black skin, which indicates that the current skin needs to be replaced with black skin.

[0058] In step S702, in a case where it is determined that the style of the sub-application needs to be replaced, a style replacement event is sent to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style replacement event, and the style of the component mounted on the page body in the component library is replaced with the target style according to the style replacement event.

[0059] In the embodiment, when the page is loaded, an event bus pool (since the sub-applications need to be strictly isolated from each other, a pool is used instead of one bus) is initialized in the micro front-end framework, so that each sub-application has a corresponding event bus. When the sub-application is registered, the event bus corresponding to the sub-application is also registered, and the event bus is unique to the sub-application. In this way, different event buses correspond to different sub-applications, and the component library registered by each sub-application can listen to events through the event bus corresponding to the sub-application.

[0060] In the embodiment, when the sub-application determines that the style needs to be replaced, a style replacement event can be sent to the corresponding event bus according to the target style, and the component library registered by the sub-application can acquire the style replacement event by listening to the event bus, and replace the style of the component mounted on the page body in the component library with the target style according to the style replacement event.

[0061] It can be seen that, in the component style setting method provided in the embodiment, since the event bus corresponding to each sub-application is unique to the sub-application, the style replacement event sent by each sub-application through the event bus only triggers the component library registered by the sub-application to replace the component style, and does not affect other sub-applications, so that the component mounted on the page body directly from the sub-application can have the style of the sub-application and will not cause the style pollution of other sub-applications.

[0062] Optionally, the style of the component mounted on the page body in the component library is set using an intersection selector.

[0063] In the embodiment, for the component (escape component) in the component library which will be mounted on the page body directly, since there is no sub-application container, there is no parent-child structure. When performing operations such as construction, compilation, and injection of the style, the compilation capability of webpack (a kind of module packaging tool) can be used to generate an intersection selector unique to the escape component, to convert the upper and lower parent-child structure into a same-level flat structure, and then the generated intersection selector is automatically injected into the corresponding component style.

[0064] Optionally, the sub-application can determine whether to replace the style according to the currently stored style data. That is, the step S701 can include: if the target style exists in the currently stored style data of the sub-application and the current style of the sub-application is different from the target style, determining to replace the style of the sub-application; and if the target style does not exist in the currently stored style data of the sub-application or the current style of the sub-application is the same as the target style, determining not to replace the style of the sub-application.

[0065] Taking the skin as an example, it is assumed that the skin data currently stored by the sub-application A includes white skin, red skin and black skin, if the target style in the style replacement message is red skin and the current skin of the sub-application A is white skin, it is determined that the sub-application A needs to replace the white skin with the red skin. If the red skin does not exist in the skin data currently stored by the sub-application B or the current skin of the sub-application B is red skin, it is determined that the sub-application B does not need to replace the skin.

[0066] Optionally, referring to Figure 8 The component style setting method provided by the embodiment of the application can further include:

[0067] In step S801, after the sub-application and the event bus corresponding to the sub-application are registered, the component library is registered by the sub-application, so that the component library can obtain the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus.

[0068] In this embodiment, when a page is loaded, the sub-application and the event bus corresponding to the sub-application are registered. After the sub-application and the event bus corresponding to the sub-application are registered, the component library is registered by the sub-application and the identifier of the sub-application is transmitted, so that the component library can obtain the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus, such as a skin replacement event.

[0069] In step S802, after the component library is registered, a responsive object is injected into the component library through global mixing, and the responsive object includes style data. The component library replaces the style of the component mounted on the page body by changing the style data in the responsive object.

[0070] In this embodiment, after the component library is registered by the sub-application, a responsive object is injected into the component library through the global mixing function of the vue, and the responsive object includes style data. After the component library listens to the style replacement event through the event bus, the style data in the responsive object is changed to automatically replace the component style by using the responsive capability of the vue.

[0071] Next, the component style setting method provided by the embodiment of the application is exemplarily described by taking the skin style as an example. As shown in Figure 9As shown, the sub-application A sends the style changing event through the event bus, so that the component escaped from the sub-application A does not lose the skin scope in the source sub-application container, and does not affect the skin of other sub-applications, thereby avoiding style pollution. For example, Figure 10 In the middle, the component escaped from the sub-application A is black skin, and the sub-application A is also black skin, Figure 11 In the middle, the component escaped from the sub-application A is black skin, and the sub-application B is still white skin, and the component in the sub-application B does not switch the skin, that is, no style pollution is caused to the sub-application B.

[0072] In this way, the escaped component can also have the skin scope of the source sub-application without destroying the current page DOM structure and style structure, and without polluting other sub-applications; and not only the skin, but also other attribute states, have good scalability.

[0073] In order to perform the corresponding steps in the above embodiments and various possible manners, an implementation manner of a component style setting device is given below. Please refer to Figure 12 A functional module diagram of the component style setting device 600 provided in the embodiment of the application. It should be noted that the component style setting device 600 provided in the embodiment has the same basic principle and technical effects as the above embodiments, and for brief description, the part not mentioned in the embodiment can be referred to the corresponding content in the above embodiments. The component style setting device 600 includes a judgment module 610 and an event sending module 620.

[0074] The judgment module 610 is configured to determine whether to change the style of the sub-application according to the received style changing message; the style changing message includes a target style.

[0075] It can be understood that the judgment module 610 can perform the above step S701.

[0076] The event sending module 620 is configured to, in the case of determining to change the style of the sub-application, send a style changing event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style changing event, and changes the style of the component mounted on the page body in the component library to the target style according to the style changing event.

[0077] It can be understood that the event sending module 620 can perform the above step S702.

[0078] Optionally, the judging module 610 is specifically configured to determine to replace the style of the sub-application if the target style exists in the currently stored style data of the sub-application and the current style of the sub-application is different from the target style; and determine not to replace the style of the sub-application if the target style does not exist in the currently stored style data of the sub-application or the current style of the sub-application is the same as the target style.

[0079] Optionally, referring to Figure 13 The component style setting device 600 can further include a component library registration module 630 and a responsive object generation module 640.

[0080] The component library registration module 630 is configured to register a component library through a sub-application after the sub-application and the event bus corresponding to the sub-application are registered, so that the component library can obtain the event bus corresponding to the currently belonging sub-application and listen to various events sent by the currently belonging sub-application through the event bus.

[0081] It can be understood that the component library registration module 630 can perform the above step S801.

[0082] The responsive object generation module 640 is configured to inject a responsive object into the component library through a global mixin after the component library is registered, the responsive object including style data; and the component library replaces the style of a component mounted on a page body in the component library by changing the style data in the responsive object.

[0083] It can be understood that the responsive object generation module 640 can perform the above step S802.

[0084] It can be seen that the embodiment of the application provides a component style setting device applied to a plurality of sub-applications under a micro front-end framework, each sub-application corresponding to a different event bus, and a component library registered by each sub-application listening to events through the event bus corresponding to each sub-application. The device includes a judging module and an event sending module, the judging module is configured to determine whether to replace the style of a sub-application according to a received style replacement message; the style replacement message includes a target style; and the event sending module is configured to send a style replacement event to the event bus corresponding to the sub-application according to the target style in the case of determining to replace the style of the sub-application, so that the component library registered by the sub-application obtains the style replacement event and replaces the style of a component mounted on a page body in the component library with the target style. Since the event bus corresponding to each sub-application is unique to each sub-application, the style replacement event sent by each sub-application through the event bus will only trigger the component library registered by the sub-application to replace the component style, and will not affect other sub-applications, thereby realizing that the component mounted on the page body from the sub-application escapes, which can have the style of the belonging sub-application and will not cause the style pollution of other sub-applications.

[0085] Please refer to Figure 14 A block schematic diagram of an electronic device 100 according to an embodiment of the present application is shown. The electronic device 100 includes a memory 110, a processor 120 and a communication module 130. The memory 110, the processor 120 and the communication module 130 are electrically connected with each other directly or indirectly to achieve data transmission or interaction. For example, the memory 110, the processor 120 and the communication module 130 can be electrically connected with each other through one or more communication buses or signal lines.

[0086] The memory 110 is configured to store programs or data. The memory 110 can be, but is not limited to, a random access memory (RAM), a read only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), etc.

[0087] The processor 120 is configured to read / write the data or programs stored in the memory 110 and perform corresponding functions. For example, when the computer program stored in the memory 110 is executed by the processor 120, the component style setting method disclosed in the above embodiments can be implemented.

[0088] The communication module 130 is configured to establish a communication connection between the electronic device 100 and other devices through a network and to receive / transmit data through the network.

[0089] It should be understood that, Figure 14 The structure shown is only a schematic diagram of the structure of the electronic device 100. The electronic device 100 can further include more or fewer components than those shown in the figures, or have a different configuration from that shown in the figures. Figure 14 The components shown in the figures can be implemented in hardware, software or a combination thereof. Figure 14 Figure 14 The components shown in the figures can be implemented in hardware, software or a combination thereof.

[0090] The embodiment of the present application further provides a computer readable storage medium, which stores a computer program. The computer program is executed by the processor 120 to implement the component style setting method disclosed in the above embodiments.

[0091] ​In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can also be implemented by other manners. The apparatus embodiments described above are merely illustrative, for example, the flowcharts and block diagrams in the drawings show the possible implementation architecture, function and operation of the apparatus, method and computer program product according to the embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, a program segment or a part of code, which contains one or more executable instructions for implementing the specified logic function. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur in different orders from those noted in the drawings. For example, two consecutive blocks can actually be executed substantially in parallel, and they can also be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and the combination of blocks in the block diagrams and / or flowcharts, can be implemented by a dedicated hardware-based system for executing the specified functions or actions, or can be implemented by a combination of dedicated hardware and computer instructions.

[0092] In addition, the function modules in the embodiments of the present application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0093] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application or the part of the present application that essentially contributes to the prior art or the part of the technical solutions can be embodied in the form of a software product, which is stored in a storage medium and includes a number of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in the embodiments of the present application. The aforementioned storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0094] The above only describes the preferred embodiments of the present application and is not intended to limit the present application. For those skilled in the art, the present application can have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. An assembly style setting method characterized by, The method is applied to multiple sub-applications under a micro-frontend framework, each sub-application corresponds to a different event bus, and a component library registered by each sub-application listens to events through the event bus corresponding to the sub-application; the method comprises: determining whether to change the style of the sub-application according to a received style change message; the style change message comprises a target style; in a case where it is determined to change the style of the sub-application, sending a style change event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style change event, and the style of a component mounted on a page body in the component library is changed to the target style according to the style change event; the method further comprises: after the sub-application and the event bus corresponding to the sub-application are registered, registering a component library through the sub-application, so that the component library can acquire the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus.

2. The method of claim 1, wherein, the determining whether to change the style of the sub-application according to a received style change message comprises: if the target style exists in the currently stored style data of the sub-application and the current style of the sub-application is different from the target style, it is determined to change the style of the sub-application; if the target style does not exist in the currently stored style data of the sub-application or the current style of the sub-application is the same as the target style, it is determined not to change the style of the sub-application.

3. The method of claim 1, wherein, the method further comprises: after registering the component library, a reactive object is injected into the component library through a global mixin, and the reactive object comprises style data; wherein the style of the component mounted on the page body in the component library is changed by changing the style data in the reactive object.

4. The method according to any one of claims 1 to 3, characterized in that, The style of the component mounted on the page body in the component library is set using an intersection selector.

5. An assembly style setting apparatus characterized by comprising: The method is applied to multiple sub-applications under a micro-frontend framework, each sub-application corresponds to a different event bus, and a component library registered by each sub-application listens to events through the event bus corresponding to the sub-application; the method comprises: a judging module configured to determine whether to change the style of the sub-application according to a received style change message; the style change message comprises a target style; an event sending module configured to, in a case where it is determined to change the style of the sub-application, send a style change event to the event bus corresponding to the sub-application according to the target style, so that the component library registered by the sub-application acquires the style change event, and the style of a component mounted on a page body in the component library is changed to the target style according to the style change event; the device further comprises: a component library registration module configured to, after the sub-application and the event bus corresponding to the sub-application are registered, register a component library through the sub-application, so that the component library can acquire the event bus corresponding to the current sub-application and listen to various events sent by the current sub-application through the event bus.

6. The apparatus of claim 5, wherein, the device further comprises: A responsive object generation module is configured to inject a responsive object into the component library by means of global mixing after the component library is registered, the responsive object comprising style data; wherein the component library replaces the style of a component mounted on a page body in the component library by changing the style data in the responsive object.

7. An electronic device, comprising: A computer program product comprising a processor, a memory, and a computer program stored on the memory and executable on the processor, the computer program, when executed by the processor, implementing the steps of the component style setting method according to any one of claims 1-4.

8. A computer-readable storage medium, characterized in that, A computer program product comprising a processor, a memory, and a computer program stored on the memory and executable on the processor, the computer program, when executed by the processor, implementing the steps of the component style setting method according to any one of claims 1-4.

Images