[发明专利]前端应用的样式处理方法、装置、电子设备及存储介质

说明书

本发明提供了一种前端应用的样式处理方法、装置、电子设备及存储介质，首先获取前端应用的子项目的目标元素；然后依据预设规则修改所述目标元素的样式选择器的参数为目标参数；当确定所述子项目中DOM元素的插入样式标签插入到所述子项目的DOM节点时，获取所述DOM元素的DOM元素样式选择器；所述DOM元素为所述目标元素中的任意一个元素；修改所述DOM元素的初始样式参数为目标参数，使得所述样式标签对应的DOM元素依据所述目标参数渲染。因此，当该子项目插入到主项目中时，子项目中的样式选择器的参数与DOM插入事件的样式参数与其一致，因此，使得每个子项目的DOM节点的样式参数都具有唯一性，避免了样式的污染问题。

技术领域

本发明涉及数据处理技术领域，尤其是一种前端应用的样式处理方法、装置、电子设备及存储介质。

背景技术

在微前端应用的开发过程中，经常会遇到两个情景：

1.复用(嵌入)别人的项目页面，但是别人的项目运行在他自己的环境之上。

2.巨无霸应用拆分成一个个的小项目，这些小项目独立开发部署，又可以自由组合进行售卖。

为了解决这两个问题，微前端因此诞生，其中比较成熟的方案就是qiankun框架，它是蚂蚁金服开源的一款框架，基于single-spa的。它在single-spa的基础上，实现了开箱即用，除一些必要的修改外，子项目只需要做很少的改动，就能很容易的接入。

其中，采用qiankun框架的微前端应用可以分为主项目和子项目，主项目和子项目是独立的，具有各自的样式结构和js逻辑。如果主项目的样式对子项目生效，或者子项目的样式对其他主项目的子项目生效，就会造成样式污染。

因此，如何解决前端应用中的样式污染成为现有技术中亟需解决的技术问题。

发明内容

鉴于上述问题，本发明提供一种克服上述问题或者至少部分地解决微前端应用的样式污染问题的一种前端应用的样式处理方法、装置、电子设备及存储介质，来实现样式隔离，避免前端应用的样式污染，包括：

一种前端应用的样式处理方法，包括：

获取前端应用的子项目的目标元素；

依据预设规则修改所述目标元素的样式选择器的参数为目标参数；

当确定所述子项目中DOM元素的插入样式标签插入到所述子项目的DOM节点时，获取所述DOM元素的DOM元素样式选择器，所述DOM元素为所述目标元素中的任意一个元素；

修改所述DOM元素的初始样式参数为目标参数，使得所述样式标签对应的DOM元素依据所述目标参数渲染。

上述的方法，可选的，还包括：

当确定所述子项目的DOM元素的获取函数执行时，获得所述获取函数的DOM节点参数；

修改所述DOM节点参数中样式选择器的参数值为目标参数值。

上述的方法，可选的，所述样式选择器包括：ID选择器和class选择器；

则所述依据预设规则修改所述目标元素的样式选择器的参数为目标参数包括：

获取所述子项目的名称；

将包括所述子项目的名称的第一参数确定为所述ID选择器的参数；

将包括所述子项目的名称的第二参数确定为所述class选择器的参数。

上述的方法，可选的，所述当确定所述子项目中DOM元素的插入样式标签插入到所述子项目的DOM节点时包括：

当预设标签插入函数执行时；所述预设标签插入函数用于在所述DOM节点中插入动态样式标签；