前端应用的样式处理方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术提供了一种前端应用的样式处理方法、装置、电子设备及存储介质，所述处理方法当运行前端应用的特定钩子函数时，确定所述钩子函数所对应的虚拟DOM中的第一元素；生成与所述第一元素对应的特定标记；在所述第一元素的属性中添加所述特定标记；依据包含所述特定标记的虚拟DOM创建真实DOM；所述真实DOM中的第二元素携带有所述特定标记；确定样式选择器中的目标元素；设置所述目标元素的属性中包括所述特定标记。本发明专利技术实施例可以通过拦截虚拟DOM渲染成真实DOM的过程中特定生命周期，配合样式选择器给当前应用产生的符合条件的DOM元素添加特定标记，形成应用级作用域，可以与未标记的元素隔离，实现子应用之间的样式隔离，解决了样式污染的问题。解决了样式污染的问题。解决了样式污染的问题。

【技术实现步骤摘要】
前端应用的样式处理方法、装置、电子设备及存储介质


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

技术介绍

[0002]目前，采用React/Vue等框架开发的前端应用越来越多，功能也越来越丰富。
[0003]其中，前端应用可以分为主应用和子应用，而不同的子应用有各自的样式结构和js逻辑。如果主应用的样式对子应用生效，或者子应用的样式对其他主应用的子应用生效，就会造成样式污染。
[0004]同时，前端应用都会使用到DOM来实现前端应用的元素渲染。但是，真实DOM频繁排版与重绘的效率是很低的，因此，框架本身通常都使用虚拟DOM来进行缓存，然后一次性渲染成真实DOM，来减少操作真实DOM的频率。
[0005]但是，虚拟DOM来渲染成真实DOM时，主应用的样式不可避免的会对子应用生效，或者子应用的样式对其他主应用的子应用生效，造成样式污染，没有实现样式隔离。

技术实现思路

[0006]鉴于上述问题，本专利技术提供一种克服上述问题或者至少部分地解决微前端应本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端应用的样式处理方法，其特征在于，包括：当运行前端应用的特定钩子函数时，确定所述钩子函数所对应的虚拟DOM中的第一元素；所述特定钩子函数为所述前端应用在执行虚拟DOM转换到真实DOM过程中特定生命周期所执行的函数；生成与所述第一元素对应的特定标记；在所述第一元素的属性中添加所述特定标记；确定样式选择器中的目标元素；设置所述目标元素的属性中包括所述特定标记；使所述目标元素的样式与所述特定标记对应的样式相同；依据包含所述特定标记的虚拟DOM创建真实DOM；所述真实DOM中的第二元素携带有所述特定标记，以使得带有所述特定标记的第二元素具有相同的样式。2.根据权利要求1所述的处理方法，其特征在于，所述生成与所述第一元素对应的特定标记包括：获取预设元素标记生成规则；按照所述预设元素标记生成规则中的前缀生成方式生成所述元素标记的前缀字符串；生成随机字符串作为所述元素标记中前缀字符串之外的字符串。3.根据权利要求1所述的处理方法，其特征在于，所述在所述第一元素的属性中添加所述特定标记包括：确定所述第一元素所依赖的样式规则；将所述样式规则的属性中添加所述特定标记。4.根据权利要求3所述的处理方法，其特征在于，所述将所述样式规则的属性中添加所述特定标记包括：确定所述样式规则是否属于特定元素；所述特定元素为所述前端应用的全部元素或所述前端应用中预先设定的目标元素；将属于特定元素的样式规则中添加所述特定标记。5.一种前端应用的样式处理装置，其特征在于，包括：确定单元，用于当运行前端应用的特定钩子函数时，确定所述钩子函数所对应的虚拟DOM中的第一元素；所述特定钩子函数为所述前端应用在执行虚拟DOM转换到真实DOM过程中特定生命周期所执行的函数；生成单元，用于生成与所述第一...

【专利技术属性】
技术研发人员：张强，
申请(专利权)人：北京千里日成科技有限公司，
类型：发明
国别省市：