组件样式设置方法、装置、电子设备和存储介质与流程

本发明涉及计算机，具体而言，涉及一种组件样式设置方法、装置、电子设备和存储介质。

背景技术：

1、现有的微前端框架机制要求其中的子应用是相互隔离的，也就是说各个子应用感知不到其他子应用的存在，开发人员只需要关心自己这个子应用的功能开发就行，不需要担心作用域问题。但是对于那些从子应用中“逃逸”出来的一些组件，比如弹框、提示信息、下拉面板等，这些组件会直接挂载到页面主体上，从而丢失所属子应用的样式作用域。

2、现有技术中，为了给逃逸组件添加上所属子应用的样式，通常是直接把子应用的样式挂载到页面主体上，在感官上能解决问题，但是本质上是一种作用域污染，即子应用的样式作用域跑到了页面主体上，会产生一些不可预知的副作用，如对其他子应用的样式污染等。

技术实现思路

1、有鉴于此，本发明的目的在于提供一种组件样式设置方法、装置、电子设备和存储介质，以使逃逸组件能够拥有所属子应用的样式，同时不会造成其他子应用的样式污染。

2、为了实现上述目的，本发明实施例采用的技术方案如下：

3、第一方面，本发明提供一种组件样式设置方法，应用于微前端框架下的多个子应用，各子应用分别对应不同的事件总线，各子应用注册的组件库通过各子应用对应的事件总线监听事件；所述方法包括：

4、根据接收的样式更换消息确定是否更换所述子应用的样式；所述样式更换消息包括目标样式；

5、在确定更换所述子应用的样式的情况下，根据所述目标样式向所述子应用对应的事件总线发送样式更换事件，以使所述子应用注册的组件库获取到所述样式更换事件，并根据所述样式更换事件将所述组件库中挂载到页面主体上的组件的样式更换为所述目标样式。

6、在可选的实施方式中，所述根据接收的样式更换消息确定是否更换所述子应用的样式，包括：

7、若所述子应用当前存储的样式数据中存在所述目标样式且所述子应用当前的样式与所述目标样式不同，则确定更换所述子应用的样式；

8、若所述子应用当前存储的样式数据中不存在所述目标样式或者所述子应用当前的样式与所述目标样式相同，则确定不更换所述子应用的样式。

9、在可选的实施方式中，所述方法还包括：

10、在所述子应用以及所述子应用对应的事件总线注册完成后，通过所述子应用注册组件库，以使所述组件库能够获取当前所属子应用对应的事件总线，并通过所述事件总线监听当前所属子应用发送的各类事件。

11、在可选的实施方式中，所述方法还包括：

12、在注册所述组件库后，通过全局混入的方式在所述组件库中注入响应式对象，所述响应式对象包括样式数据；其中，所述组件库通过更改所述响应式对象中的样式数据，对所述组件库中挂载到页面主体上的组件的样式进行更换。

13、在可选的实施方式中，所述组件库中挂载到页面主体上的组件的样式使用交集选择器设置。

14、第二方面，本发明提供一种组件样式设置装置，应用于微前端框架下的多个子应用，各子应用分别对应不同的事件总线，各子应用注册的组件库通过各子应用对应的事件总线监听事件；所述装置包括：

15、判断模块，用于根据接收的样式更换消息确定是否更换所述子应用的样式；所述样式更换消息包括目标样式；

16、事件发送模块，用于在确定更换所述子应用的样式的情况下，根据所述目标样式向所述子应用对应的事件总线发送样式更换事件，以使所述子应用注册的组件库获取到所述样式更换事件，并根据所述样式更换事件将所述组件库中挂载到页面主体上的组件的样式更换为所述目标样式。

17、在可选的实施方式中，所述装置还包括：

18、组件库注册模块，用于在所述子应用以及所述子应用对应的事件总线注册完成后，通过所述子应用注册组件库，以使所述组件库能够获取当前所属子应用对应的事件总线，并通过所述事件总线监听当前所属子应用发送的各类事件。

19、在可选的实施方式中，所述装置还包括：

20、响应式对象生成模块，用于在注册所述组件库后，通过全局混入的方式在所述组件库中注入响应式对象，所述响应式对象包括样式数据；其中，所述组件库通过更改所述响应式对象中的样式数据，对所述组件库中挂载到页面主体上的组件的样式进行更换。

21、第三方面，本发明提供一种电子设备，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如前述实施方式中任一项所述的组件样式设置方法的步骤。

22、第四方面，本发明提供一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如前述实施方式中任一项所述的组件样式设置方法的步骤。

23、本发明实施例提供的组件样式设置方法、装置、电子设备和存储介质，微前端框架下的各子应用分别对应不同的事件总线，各子应用注册的组件库通过各子应用对应的事件总线监听事件；各子应用根据接收的样式更换消息确定是否更换样式，样式更换消息包括目标样式，在确定更换子应用的样式的情况下，根据目标样式向子应用对应的事件总线发送样式更换事件，以使子应用注册的组件库获取到样式更换事件，并根据样式更换事件将组件库中挂载到页面主体上的组件的样式更换为目标样式。由于各子应用对应的事件总线是各子应用所独有的，故每个子应用通过事件总线发送的样式更换事件只会触发该子应用注册的组件库更换组件样式，而不会影响到其他子应用，从而实现从子应用中逃逸出去直接挂载到页面主体上的组件，既能够拥有所属子应用的样式，又不会造成其他子应用的样式污染。

24、为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

技术特征：

1.一种组件样式设置方法，其特征在于，应用于微前端框架下的多个子应用，各子应用分别对应不同的事件总线，各子应用注册的组件库通过各子应用对应的事件总线监听事件；所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述根据接收的样式更换消息确定是否更换所述子应用的样式，包括：

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

4.根据权利要求3所述的方法，其特征在于，所述方法还包括：

5.根据权利要求1-4任一项所述的方法，其特征在于，所述组件库中挂载到页面主体上的组件的样式使用交集选择器设置。

6.一种组件样式设置装置，其特征在于，应用于微前端框架下的多个子应用，各子应用分别对应不同的事件总线，各子应用注册的组件库通过各子应用对应的事件总线监听事件；所述装置包括：

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

9.一种电子设备，其特征在于，包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1-5中任一项所述的组件样式设置方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1-5中任一项所述的组件样式设置方法的步骤。

技术总结
本发明实施例提出一种组件样式设置方法、装置、电子设备和存储介质，涉及计算机技术领域。微前端框架下的各子应用分别对应不同的事件总线，各子应用注册的组件库通过对应的事件总线监听事件；各子应用根据接收的样式更换消息确定更换样式时，根据样式更换消息中的目标样式向对应的事件总线发送样式更换事件，以使子应用注册的组件库根据样式更换事件将挂载到页面主体上的组件的样式更换为目标样式。由于各子应用对应的事件总线是各子应用所独有的，故每个子应用通过事件总线发送的样式更换事件只会触发该子应用注册的组件库更换组件样式，而不会影响到其他子应用，从而实现逃逸组件既能拥有所属子应用的样式，又不会造成其他子应用的样式污染。

技术研发人员：吕天丁,阙光伟,周宇,芮正云,王婷,俞超
受保护的技术使用者：恒生电子股份有限公司
技术研发日：
技术公布日：2024/1/12