一种样式污染检索方法、装置及计算机设备与流程

本技术涉及计算机，特别涉及一种样式污染检索方法、装置及计算机设备。

背景技术：

1、web前端开发是前端领域的重要组成部分，包括层叠样式表(cascading stylesheets，css)。css是一种通过样式表控制页面的外观和布局方案，其工作原理为通过选择器对选中的html文档中的元素赋予样式规则，从而实现控制样式的效果。

2、css支持继承与层叠关系，这一特性具有优势也具有劣势，容易造成样式污染。目前的前端开发可以通过一些约束和规范避免样式污染问题，例如通过scoped属性限制样式的作用范围。然而在开发过程中，众多应用场景中难以避免需要用到样式的嵌套、继承等修改继承关系下的样式，仍容易出现样式污染的问题。

技术实现思路

1、为解决现有的样式污染难以排除的问题，本技术提供一种样式污染检索方法、装置及计算机设备，能够在没有限定样式作用范围的情况下，避免全局的通用样式因重复、同名选择器作用导致样式污染。

2、一方面，提供了一种样式污染检索方法，所述方法包括：

3、获取目标页面的层叠样式表代码，基于所述层叠样式表代码生成初始样式关系表；

4、标记所述初始样式关系表中的目标关系，基于标记后的所述初始样式关系表生成样式关系总表；

5、基于所述样式关系总表检索所述目标页面，生成样式污染提示信息。

6、在一些实施例中，所述获取目标页面的层叠样式表代码，基于所述层叠样式表代码生成初始样式关系表，包括：

7、获取所述目标页面的样式代码，所述样式代码包括css代码、scss代码、sass代码、less代码中的至少一种；

8、对所述样式代码进行合并，生成所述初始样式关系表。

9、在一些实施例中，所述目标关系包括覆盖关系、继承关系以及冲突关系；所述标记所述初始样式关系表中的目标关系，基于标记后的所述初始样式关系表生成样式关系总表，包括：

10、基于所述初始样式关系表划分各个样式的优先级；

11、基于所述优先级判断所述初始样式关系表中各个样式的覆盖关系、继承关系以及冲突关系；

12、在所述初始样式关系表中标记所述覆盖关系、所述继承关系以及所述冲突关系，生成所述样式关系总表。

13、在一些实施例中，所述在所述初始样式关系表中标记所述覆盖关系、所述继承关系以及所述冲突关系，生成所述样式关系总表，包括：

14、基于所述优先级在所述初始样式关系表中检索无效样式；

15、所述在所述初始样式关系表中标记所述覆盖关系、所述继承关系、所述冲突关系以及所述无效样式，生成所述样式关系总表。

16、在一些实施例中，所述基于所述样式关系总表检索所述目标页面，生成样式污染提示信息，包括：

17、基于所述样式关系总表遍历所述目标页面的文档对象模型元素；

18、针对所述目标关系对应的文档对象模型元素生成所述样式污染提示信息。

19、在一些实施例中，所述基于所述样式关系总表检索所述目标页面，生成样式污染提示信息，包括：

20、基于所述样式关系总表遍历所述目标页面的文档对象模型元素；

21、针对与所述样式关系总表不符的文档对象模型元素生成样式污染提示信息。

22、在一些实施例中，所述基于所述样式关系总表检索所述目标页面，生成样式污染提示信息之后，所述方法还包括：

23、基于预存的样式污染处理数据库和所述样式污染提示信息，生成样式修复建议信息。

24、另一方面，提供了一种样式污染检索装置，所述装置包括：

25、关系表构建模块，用于获取目标页面的层叠样式表代码，基于所述层叠样式表代码生成初始样式关系表；

26、目标关系标记模块，用于标记所述初始样式关系表中的目标关系，基于标记后的所述初始样式关系表生成样式关系总表；

27、目标页面检索模块，用于基于所述样式关系总表检索所述目标页面，生成样式污染提示信息。

28、在一些实施例中，所述关系表构建模块具体用于：

29、获取所述目标页面的样式代码，所述样式代码包括css代码、scss代码、sass代码、less代码中的至少一种；

30、对所述样式代码进行合并，生成所述初始样式关系表。

31、在一些实施例中，所述目标关系包括覆盖关系、继承关系以及冲突关系，所述目标关系标记模块具体用于：

32、基于所述初始样式关系表划分各个样式的优先级；

33、基于所述优先级判断所述初始样式关系表中各个样式的覆盖关系、继承关系以及冲突关系；

34、在所述初始样式关系表中标记所述覆盖关系、所述继承关系以及所述冲突关系，生成所述样式关系总表。

35、在一些实施例中，所述目标关系标记模块具体用于：

36、基于所述优先级在所述初始样式关系表中检索无效样式；

37、所述在所述初始样式关系表中标记所述覆盖关系、所述继承关系、所述冲突关系以及所述无效样式，生成所述样式关系总表。

38、在一些实施例中，所述目标页面检索模块具体用于：

39、基于所述样式关系总表遍历所述目标页面的文档对象模型元素；

40、针对所述目标关系对应的文档对象模型元素生成所述样式污染提示信息。

41、在一些实施例中，所述目标页面检索模块具体用于：

42、基于所述样式关系总表遍历所述目标页面的文档对象模型元素；

43、针对与所述样式关系总表不符的文档对象模型元素生成样式污染提示信息。

44、在一些实施例中，所述装置还包括修复建议模块，用于：

45、基于预存的样式污染处理数据库和所述样式污染提示信息，生成样式修复建议信息。

46、另一方面，提供了一种计算机设备，计算机设备包括处理器和存储器，存储器中存储有至少一条指令、至少一段程序、代码集或指令集，处理器可加载并执行至少一条指令、至少一段程序、代码集或指令集，以实现上述申请实施例中提供的样式污染检索方法。

47、另一方面，提供了一种计算机可读存储介质，可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，处理器可加载并执行至少一条指令、至少一段程序、代码集或指令集，以实现上述本技术实施例中提供的样式污染检索方法。

48、另一方面，提供了一种计算机程序产品或计算机程序，该计算机程序产权或计算机程序包括计算机程序指令，该计算机程序指令存储于计算机可读存储介质中。处理器从计算机可读存储介质读取该计算机指令，并执行还计算机指令，使得该计算机设备执行上述实施例中任一所述的样式污染检索方法。

49、本技术提供的技术方案带来的有益效果至少包括：本发明实施例提供了一种样式污染检索方法、装置及计算机设备，所述方法包括获取目标页面的层叠样式表代码，基于所述层叠样式表代码生成初始样式关系表；标记所述初始样式关系表中的目标关系，基于标记后的所述初始样式关系表生成样式关系总表；基于所述样式关系总表检索所述目标页面，生成样式污染提示信息。本发明实施例提供的样式污染检索方法能够在开发与调试的过程中，对样式问题的处理进行提升和优化，提高开发过程中对css样式的可维护性、灵活性以及可访问性。通过溯源dom样式，可以快速定位该dom节点的样式源，快速排查样式问题，避免冗杂样式代码造成的样式污染问题，提高开发效率。