影子文档对象模型的样式文件处理方法及样式更新方法与流程

专利2025-04-25  14


本公开涉及计算机网络,具体地涉及影子文档对象模型(shadow dom)的样式文件处理方法及样式更新方法。另外,本公开还涉及相关装置、电子设备和程序产品。


背景技术:

1、当前,文档对象模型(英文全称:document object model,缩写:dom)是在web开发中被广泛使用的文档模型,通常以树形结构表示。影子dom(shadow dom)作为dom的扩展,对于web页面中运行的编程语言和层叠样式表(英文全称:cascading style sheets,缩写:css)是隐藏的。

2、在开发环境中,shadow dom的css通常与shadow dom的超文本标记语言(英文全称:hyper text markup language,缩写:html)的处理流程高度耦合。因此,web页面中的shadow dom的层叠样式表(css)往往难以即时更新或实时刷新,即:当shadow dom的css更新时,该css与对应的html将整体上被一同重新编译,这导致每次css更新都需要很长的处理时间。

3、此外,同样因为shadow dom的css通常与shadow dom的html在编译时被一同处理,在处理shadow dom的css时往往也难以便捷地将不同css拆分。

4、本背景技术描述的内容仅为了便于了解本领域的相关技术,不视作对现有技术的承认。


技术实现思路

1、对此,本公开实施例提供了影子文档对象模型(shadow dom)的样式文件处理及样式更新的解决方案,其能够克服或减轻shadow dom的样式难以即时更新和/或难以拆分的技术问题。

2、在第一方面,本公开实施例提供了影子文档对象模型的样式文件处理方法,其可包括:

3、根据预设条件获取目标源样式文件,所述目标源样式文件包括影子文档对象模型中的待处理的层叠样式表;

4、针对所述待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中所述待处理的层叠样式表对应的原生样式更新逻辑;

5、基于所述前端开发框架中已替换的所述目标样式更新逻辑,从所述目标源样式文件提取所述待处理的层叠样式表到目标样式表文件中。

6、在一些实施例中,所述根据预设条件获取目标源样式文件,包括:

7、根据所述预设条件中的过滤条件,对所述前端开发框架中的源样式文件执行过滤操作,得到包含所述待处理的层叠样式表的所述目标源样式文件。

8、在一些实施例中,所述针对所述待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中所述待处理的层叠样式表对应的原生样式更新逻辑,包括:

9、获取包含所述待处理的层叠样式表的所述目标源样式文件的容器标识;

10、获取对应于所述待处理的层叠样式表的预设样式更新逻辑;

11、附加所述容器标识至所述预设样式更新逻辑,获得用于替换的所述目标样式更新逻辑;

12、替换所述目标样式更新逻辑为所述前端开发框架中所述待处理的层叠样式表对应的样式更新逻辑。

13、在一些实施例中,所述基于所述前端开发框架中已替换的所述目标样式更新逻辑,从所述目标源样式文件提取所述待处理的层叠样式表到目标样式表文件中,包括:

14、根据所述目标样式更新逻辑处理所述目标源样式文件,生成所述层叠样式表;

15、根据所述目标样式更新逻辑,将生成的所述层叠样式表配置到至少一个所述目标样式表文件中。

16、在第二方面,本公开实施例提供了一种影子文档对象模型的样式更新方法,其可包括:

17、获取目标样式文件,其中,所述目标样式文件为利用样式文件处理方法处理影子文档对象模型的层叠样式表得到,所述样式文件处理方法为根据本公开实施例中任一项所述的样式文件处理方法;

18、获取包括待更新的层叠样式表样式参数的样式标签;

19、在不重新加载影子文档对象模型的超文本标记语言的情况下,导入所述样式标签至所述影子文档对象模型,根据所述样式参数更新所述目标样式文件中被处理的层叠样式表的对应样式。

20、在一些实施例中,所述根据所述样式参数更新所述目标样式文件中被处理的层叠样式表的对应样式,包括:

21、若所述样式标签带有影子文档对象模型的标识符,更新第一层叠样式表的对应样式,其中,所述第一层叠样式表为对应所述标识符的影子文档对象模型的所述层叠样式表;和/或

22、若所述样式标签不带影子文档对象模型的标识符或带有通配符,更新第二层叠样式表的对应样式,其中,所述第二层叠样式表为前端页面中所有影子文档对象模型的所述层叠样式表。

23、在第三方面,本公开实施例提供了一种影子文档对象模型的样式文件处理装置,其可包括:

24、获取单元,配置成根据预设条件获取目标源样式文件,所述目标源样式文件包括影子文档对象模型中的待处理的层叠样式表;

25、替换单元,配置成针对所述待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中所述待处理的层叠样式表对应的原生样式更新逻辑;以及

26、提取单元,配置成基于所述前端开发框架中已替换的所述目标样式更新逻辑从所述目标源样式文件提取所述待处理的层叠样式表到目标样式表文件中。

27、在第四方面,本公开实施例提供了一种影子文档对象模型的样式更新装置,其可包括:

28、根据本公开实施例所述的样式文件处理装置,配置成处理影子文档对象模型的层叠样式表以获得所述目标样式文件;

29、获取单元,配置成获取包括待更新的层叠样式表样式参数的样式标签;以及

30、更新单元,配置成在不重新加载影子文档对象模型的超文本标记语言的情况下,导入所述样式标签至所述影子文档对象模型,根据所述样式参数更新所述目标样式文件中被处理的层叠样式表的对应样式。

31、在第五方面,在本公开实施例中,提供电子设备,包括:处理器和存储有计算机程序的存储器,所述处理器被配置为在执行计算机程序时实现任一本公开实施例的方法。

32、在第六方面,在本公开实施例中,提供程序产品,其包括计算机程序,其中,所述计算机程序被处理器执行时实现任一本公开实施例的方法。

33、本公开实施例提出了影子文档对象模型(shadow dom)的样式文件处理方法、优选是shadow dom的css处理方法,该方法根据预设条件获取目标源样式文件,所述目标源样式文件包括影子文档对象模型中的待处理的层叠样式表;针对所述待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中所述待处理的层叠样式表对应的原生样式更新逻辑;基于所述前端开发框架中已替换的所述目标样式更新逻辑,从所述目标源样式文件提取所述待处理的层叠样式表到目标样式表文件中,由此能够允许以便捷、有效的方式实现web页面中的影子文档对象模型(shadow dom)的样式(例如css)的热更新,并且还便于shadow dom的不同css的拆分。进一步地,本公开实施例还提出了影子文档对象模型的样式更新方法,该方法实现了shadow dom的即时更新或实时刷新。

34、本公开实施例的其他可选特征和技术效果一部分在下文描述,一部分可通过阅读本文而明白。


技术特征:

1.一种影子文档对象模型的样式文件处理方法,其特征在于,包括:

2.根据权利要求1所述的样式文件处理方法,其特征在于,所述根据预设条件获取目标源样式文件,包括:

3.根据权利要求1所述的样式文件处理方法,其特征在于,所述针对所述待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中所述待处理的层叠样式表对应的原生样式更新逻辑,包括:

4.根据权利要求1-3任一所述的样式文件处理方法,其特征在于,所述基于所述前端开发框架中已替换的所述目标样式更新逻辑,从所述目标源样式文件提取所述待处理的层叠样式表到目标样式表文件中,包括:

5.一种影子文档对象模型的样式更新方法,其特征在于,包括:

6.根据权利要求5所述的样式更新方法,其特征在于,所述根据所述样式参数更新所述目标样式文件中被处理的层叠样式表的对应样式,包括:

7.一种影子文档对象模型的样式文件处理装置,其特征在于,包括:

8.一种影子文档对象模型的样式更新装置,其特征在于,包括:

9.一种电子设备,其特征在于,包括:处理器和存储有计算机程序的存储器,所述处理器被配置为在执行计算机程序时实现如权利要求1至6中任一项所述的方法。

10.一种程序产品,包括计算机程序,其中,所述计算机程序被处理器执行时实现如权利要求1至6中任一项所述的方法。


技术总结
本公开公开了影子文档对象模型(Shadow DOM)的样式文件处理方法,所述方法包括:根据预设条件获取目标源样式文件,目标源样式文件包括影子文档对象模型中的待处理的层叠样式表;针对待处理的层叠样式表,使用目标样式更新逻辑替换前端开发框架中待处理的层叠样式表对应的原生样式更新逻辑;基于前端开发框架中已替换的目标样式更新逻辑,从目标源样式文件提取待处理的层叠样式表到目标样式表文件中。本公开还提供了对应的装置、电子设备和程序产品。本公开的样式文件处理方法能够允许以便捷、有效的方式实现前端页面中的影子文档对象模型(Shadow DOM)的样式、例如层叠样式表(CSS)的实时更新,并且还便于Shadow DOM的不同CSS的拆分。

技术研发人员:杨金虎,郑磊
受保护的技术使用者:百融至信(北京)科技有限公司
技术研发日:
技术公布日:2024/11/11
转载请注明原文地址: https://tieba.8miu.com/read-13492.html

最新回复(0)