CN117170734B - 一种限定样式作用域的方法 - Google Patents

Abstract

本发明提供了一种限定样式作用域的方法，涉及前端开发技术领域，所述方法包括：创建作用域选择器，所述作用域选择器包含若干第一作用域；获取样式字符串，基于所述样式字符串获得样式列表，所述样式列表包含若干第二样式，每个所述第二样式对应一个第二样式标签；针对每个所述第二样式添加所述作用域选择器，针对每个所述作用域选择器指定一个所述第一作用域；获取所有所述第二样式标签累计获得第二样式标签集合，在页面中写入所述第二样式标签集合；基于所述第二样式标签集合和所述样式列表依次在所述页面写入每个所述第二样式，所述第二样式生效。可以解决样式没有限制作用域导致页面样式相互被污染和手动添加作用域选择器过于繁琐的问题。

Description

一种限定样式作用域的方法

技术领域

本发明涉及前端开发技术领域，具体地，涉及一种限定样式作用域的方法。

背景技术

样式作用域是指样式规则作用的范围，也就是选择器选择元素的范围。

现代可视化web应用的场景下，通常采用表单配置的方式来修改页面呈现的样式。然而这种方式受限性较大，用户只能通过特定的配置项去修改样式，灵活度大打折扣。因此，亟需一种支持用户能自定义页面样式的方案，为达到更高的灵活性以及可用性，通常会采取用户输入css样式字符串，然后动态注入样式的方案。然而这种方案由于样式没有作用域限制，会造成页面其余部分样式被污染的问题，且通过手动添加作用域选择器太过繁琐。

发明内容

为了解决样式没有限制作用域导致页面样式相互被污染和手动添加作用域选择器过于繁琐的问题，本发明提供了一种限定样式作用域的方法，所述方法包括：创建样式管理器和作用域选择器，所述样式管理器包含若干第一样式，每个所述第一样式对应一个第一样式标签，所述作用域选择器包含若干第一作用域，每个所述第一作用域对应一个第一唯一标识；获取样式字符串，基于所述样式字符串获得样式列表，所述样式列表包含若干第二样式，每个所述第二样式对应一个第二样式标签；针对每个所述第二样式添加所述作用域选择器，针对每个所述作用域选择器指定一个所述第一作用域；获取每个所述第二样式的所述第二样式标签累计获得第二样式标签集合，在页面中写入所述第二样式标签集合；基于所述第二样式标签集合和所述样式列表依次在所述页面写入每个所述第二样式，所述第二样式生效。本方法创建了样式管理器和作用域选择器，所述样式管理器包含若干第一样式，每个所述第一样式对应一个第一样式标签，所述作用域选择器包含若干第一作用域，每个所述第一作用域对应一个第一唯一标识；再获取用户自定义的样式字符串，将所述样式字符串进行解析获得样式列表，所述样式列表包含若干第二样式，每个所述第二样式对应一个第二样式标签；再针对每个所述第二样式添加所述作用域选择器，针对每个所述作用域选择器指定一个所述第一作用域，通过为所述第二样式添加所述作用域选择器实现限制所述第二样式的所述第一作用域，减少所述第二样式相互被污染的情况，同时自动添加作用域选择器操作简单方便，不需用户手动添加，提高效率，修改样式和样式作用域时可分别直接通过操作样式管理器和作用域选择器进行选择，操作简单快捷；获取每个所述第二样式的所述第二样式标签累计获得第二样式标签集合，在页面中写入所述第二样式标签集合，基于所述第二样式标签集合和所述样式列表依次在所述页面写入每个所述第二样式，所述第二样式生效。

为了保存用户自定义的样式，再次使用时可直接从样式管理器中获取，本方法还对每个所述第一样式设置一个样式标识，判断每个所述第二样式是否拥有一个所述样式标签，若是则不再保存，若否则为所述第二样式新增样式标识，添加到所述样式管理器。

进一步地，每个所述第一样式对应一个样式标识；所述方法还包括：判断每个所述第二样式是否对应一个所述样式标识，若否则创建与所述第二样式对应的新增样式标识，添加所述第二样式到所述样式管理器。

为了在实时渲染时，部分样式可以优先进行渲染展示动画效果，本方法还对每个所述第一作用域设置一个权重值，获取每个所述第二样式的所述第一作用域对应的所述权重值，将所有所述权重值进行排序，根据排序结果对所述第二样式进行渲染。

进一步地，每个所述第一作用域对应一个权重值，所述权重值用于获取所述第一作用域的优先级；所述方法还包括：获取每个所述第二样式的所述第一作用域对应的所述权重值累计获得权重值列表，将所述权重值列表进行排序获得权重排序列表；基于所述权重排序列表将所有所述第二样式进行排序获得样式排序列表，将所述样式列表更新为所述样式排序列表。

为了用户可以根据样式的风格，快速选择所述样式管理器中的所述第一样式，本方法还创建了风格管理器，将所有所述第一样式进行分析获得风格标签，基于所述风格标签将所有所述第一样式进行分类获得分类集合，将所述分类集合添加到所述风格管理器，用户可通过在所述风格管理器中检索所述风格标签获得与所述风格标签对应的所述第一样式。样式的风格包括样式在页面展示的颜色、布局和动画效果等。

进一步地，所述方法还包括：创建风格管理器；分析每个所述第一样式累计获得风格标签集合，所述风格标签集合包含若干风格标签；基于所述风格标签集合将所有所述第一样式进行分类获得分类集合，将所述分类集合添加到所述风格管理器，所述风格管理器用于通过检索所述风格标签获得与所述风格标签对应的所述第一样式。

为了实现用户可以在指定的作用域快速选择喜欢的样式，本方法还将对应同一作用域的样式进行分类。

进一步地，每个所述第一样式对应一个所述第一作用域；所述方法还包括：基于所述第一作用域将所述第一样式进行分类获得样式集合，所述样式集合用于通过检索所述第一作用域获得与所述第一作用域对应的所述第一样式。

为了用户可以自定义限定样式作用域的范围，本方法还获取用户自定义的作用域，并将作用域选择器中的所有第一作用域替换为用户自定义的作用域。

进一步地，所述方法还包括：获取用户自定义的若干第二作用域获得第二作用域集合，针对每个所述第二作用域创建对应的第二唯一标识，将所述作用域选择器中的所有所述第一作用域更新为所述第二作用域集合。

为了推荐用户喜欢的样式，帮助用户快速选定样式进行渲染，本方法还获取用户历史行为数据，通过分析用户历史行为数据获得推荐样式特征，再分析样式管理器中的所有第一样式获得样式特征，将两者进行比较获得用户可能喜欢的样式。

进一步地，所述方法还包括：获取用户的历史行为数据，分析所述历史行为数据获得若干推荐样式特征；分析所述样式管理器中的每个所述第一样式累计获得第一样式特征集合，所述第一样式特征集合包含若干第一样式特征；将所有所述推荐样式特征与所述第一样式特征集合中的每个所述第一样式特征进行特征比较获得第一比较结果，基于所述第一比较结果获得推荐样式集合，将所述样式列表更新为所述推荐样式集合。

为了推荐用户喜欢的样式作用域的分布范围，使样式风格更一致和完整，本方法还获取用户历史行为数据，通过分析用户历史行为数据获得推荐作用域特征，再分析作用域选择器中的所有第一作作用域获得作用域特征，将两者进行比较获得用户可能喜欢的样式作用域的分布范围。

进一步地，所述方法还包括：获取用户的历史行为数据，分析所述历史行为数据获得若干推荐作用域特征；分析所述作用域选择器中的每个第一作用域累计获得第一作用域特征集合，所述第一作用域特征集合包含若干第一作用域特征；将所有所述推荐作用域特征与所述第一作用域特征集合中的每个所述第一作用域特征进行特征比较获得第二比较结果，基于所述第二比较结果获得推荐作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐作用域集合。

为了推荐与页面风格一致的样式，使页面整体风格更一致和美观，本方法还获取页面的历史数据，通过分析页面的历史数据获得推荐页面样式特征，再分析样式管理器中的所有第一样式获得样式特征，将两者进行比较获得页面风格一致的样式。

进一步地，所述方法还包括：获取页面的历史数据，分析所述历史数据获得若干页面样式特征；分析所述样式管理器中的每个所述第一样式累计获得第二样式特征集合，所述第二样式特征集合包含若干第二样式特征；将所有所述页面样式特征与所述第二样式特征集合中的每个所述第二样式特征进行特征比较获得第三比较结果，基于所述第三比较结果获得推荐页面样式集合，将所述样式列表更新为所述推荐页面样式集合。

为了推荐与页面相匹配的样式作用域的分布范围，使页面布局更一致和美观，本方法还获取用户历史行为数据，通过分析用户历史行为数据获得推荐作用域特征，再分析作用域选择器中的所有第一作作用域获得作用域特征，将两者进行比较获得用户可能喜欢的样式作用域的分布范围。

进一步地，所述方法还包括：获取页面的历史数据，分析所述历史数据获得若干页面作用域特征；分析所述作用域选择器中的每个第一作用域累计获得第二作用域特征集合，所述第二作用域特征集合包含若干第二作用域特征；将所有所述页面作用域特征与所述第二作用域特征集合中的每个所述第二作用域特征进行特征比较获得第四比较结果，基于所述第四比较结果获得推荐页面作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐页面作用域集合。

本发明提供的一个或多个技术方案，至少具有如下技术效果或优点：

1.将用户自定义的样式自动添加作用域选择器从而限定样式作用域，解决样式间互相被污染和手动添加作用域选择器过于繁琐的问题。2.保存用户自定义的样式至样式管理器，用户再次使用时可直接从样式管理器中获取，提高用户体验感。3.设置作用域的权重值，在实时渲染时可根据权重值的大小依次渲染，减少渲染时间和提高用户体验感。4.获取用户自定义的作用域，实现用户可自定义样式作用域的范围。5.创建风格管理器，用户可通过选择风格管理器中的风格标签选择对应的样式。6.推荐用户喜欢的样式和样式作用域的分布范围，提高用户体验感。7.推荐与页面风格一致的样式和样式作用域的分布范围，提高页面的美观和完整性。

附图说明

此处所说明的附图用来提供对本发明实施例的进一步理解，构成本发明的一部分，并不构成对本发明实施例的限定；

图1是本发明中一种限定样式作用域的方法的流程示意图；

图2是本发明中一种限定样式作用域的方法中分类同一作用域的第一样式、更新作用域选择器以及创建风格管理器的流程示意图；

图3是本发明中一种限定样式作用域的方法中更新样式管理器和样式列表的流程示意图；

图4是本发明中一种限定样式作用域的方法中推荐用户喜欢的样式和样式作用域的流程示意图；

图5是本发明中一种限定样式作用域的方法中推荐匹配页面的样式和样式作用域的流程流程示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在相互不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述范围内的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

实施例1

参考图1和图2，本实施例提供了一种限定样式作用域的方法，所述方法包括：创建样式管理器和作用域选择器，所述样式管理器包含若干第一样式，如内联CSS样式、行内CSS样式和外部CSS样式等，每个所述第一样式对应一个第一样式标签，所述作用域选择器包含若干第一作用域，如CSS全局作用域或CSS局部作用域，每个所述第一作用域对应一个第一唯一标识；通过代码实现的自定义方法获取用户自定义的样式字符串，通过代码实现的自定义方法将所述样式字符串进行解析获得样式列表，所述样式列表包含若干第二样式，每个所述第二样式对应一个第二样式标签；针对每个所述第二样式添加所述作用域选择器，针对每个所述作用域选择器指定一个所述第一作用域；获取每个所述第二样式的所述第二样式标签累计获得第二样式标签集合，在页面中插入所述第二样式标签集合；基于所述第二样式标签集合和所述样式列表依次在所述页面写入每个所述第二样式，所述第二样式生效。本实施例中，所述样式管理器可以为下拉菜单控件、复选框控件和下拉框控件等，所述作用域选择器可以为标记选择器、类别选择器和ID选择器等，代码实现的自定义方法可以为JAVA实现的自定义方法、Python实现的自定义方法或第三方库提供的方法，所述第一样式标签和所述第二样式标签可以为Style标签、Body标签或Img标签等。

实施例2

参考图2和图3，在实施例一的基础上，本实施例中，所述方法还包括：每个所述第一样式设置一个样式标识，判断每个所述第二样式是否对应一个所述样式标识，若否则创建与所述第二样式对应的新增样式标识，添加所述第二样式到所述样式管理器。

实施例3

参考图2和图3，在上述实施例的基础上，本实施例中，所述方法还包括：每个所述第一作用域设置一个权重值，获取每个所述第二样式的所述第一作用域对应的所述权重值累计获得权重值列表，将所述权重值列表中的所有所述权重值根据权重值大小进行排序获得权重排序列表，根据所述权重排序列表中所述权重值的排序，将所述样式列表中与所述权重值对应的所述第二样式进行排序获得样式排序列表，将所述样式列表更新为所述样式排序列表。

实施例4

参考图2，在上述实施例的基础上，本实施例中，所述方法还包括：创建风格管理器，如多选标签控件、复选框控件和下拉搜索控件等；通过代码实现的自定义方法分析每个所述第一样式累计获得风格标签集合，所述风格标签集合包含若干风格标签，如颜色标签、形状标签和动画效果标签等；基于所述风格标签集合将所有所述第一样式进行分类获得分类集合，将所述分类集合添加到所述风格管理器，用户可以通过所述风格管理器检索所述风格标签获得与所述风格标签对应的所述第一样式。本实施例中，所述风格管理器可以为数组、集合和前端控件等，代码实现的自定义方法可以为JAVA实现的自定义方法、Python实现的自定义方法或通过人工智能模型分析。

实施例5

参考图2，在上述实施例的基础上，本实施例中，所述方法还包括：设置每个所述第一样式对应一个所述第一作用域，将对应相同的所述第一作用域的所述第一样式进行分类获得样式集合，则用户可以通过选择所述第一作用域查看与所述第一作用域对应的所述第一样式，从而快速查看或修改所述第一样式。

实施例6

参考图2，在上述实施例的基础上，本实施例中，所述方法还包括：通过代码实现的自定义方法获取用户自定义的若干第二作用域获得第二作用域集合，针对每个所述第二作用域创建对应的第二唯一标识，将所述作用域选择器中的所有所述第一作用域更新为所述第二作用域集合。本实施例中，代码实现的自定义方法可以为JAVA实现的自定义方法、Python实现的自定义方法或第三方库提供的方法。

实施例7

参考图4，在上述实施例的基础上，本实施例中，所述方法还包括：通过网络爬虫获取用户的历史行为数据，通过数据挖掘算法分析所述历史行为数据获得若干推荐样式特征，如动画特征、颜色特征和简洁特征等；通过数据挖掘算法分析所述样式管理器中的每个所述第一样式累计获得第一样式特征集合，所述第一样式特征集合包含若干第一样式特征，如图像特征、形状特征和渲染效果特征等；将所有所述推荐样式特征与所述第一样式特征集合中的所有所述第一样式特征通过正则匹配表达式进行特征匹配获得第一比较结果，所述第一比较结果包含若干匹配成功的所述第一样式特征，获取所有与所述第一样式特征对应的所述第一样式获得推荐样式集合，将所述样式列表更新为所述推荐样式集合。本实施例中，网络爬虫可以为聚焦爬虫技术、通用爬虫技术、增量爬虫技术或深层网络爬虫技术等，也可以为爬虫工具，数据挖掘算法可以为机器学习算法、超文本分类与聚类算法或网页分析算法等，正则匹配表达式也可以为特征的相似度比较。

实施例8

参考图4，在上述实施例的基础上，本实施例中，所述方法还包括：通过网络爬虫获取用户的历史行为数据，通过网页抽取方法分析所述历史行为数据获得若干推荐作用域特征，如对称特征、横向特征和纵向特征等；通过网页抽取方法分析所述作用域选择器中的每个第一作用域累计获得第一作用域特征集合，所述第一作用域特征集合包含若干第一作用域特征，如拐角型特征、上下框架特征和左右框架特征；将所有所述推荐作用域特征与所述第一作用域特征集合中的所有所述第一作用域特征通过正则匹配表达式进行特征匹配获得第二比较结果，所述第二比较结果包含若干匹配成功的所述第一作用域特征，获取所有与所述第一作用域特征对应的所述第一作用域特征获得推荐作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐作用域集合。本实施例中，网络爬虫可以为聚焦爬虫技术、通用爬虫技术、增量爬虫技术或深层网络爬虫技术等，也可以为爬虫工具，网页抽取方法可以为基于正则表达式的网页抽取、基于CSS选择器的网页抽取、基于XPATH的网页抽取或基于机器学习的网页抽取等，正则匹配表达式也可以为特征的相似度比较。

实施例9

参考图5，在上述实施例的基础上，本实施例中，所述方法还包括：通过网络爬虫获取页面的历史数据，通过数据挖掘算法分析所述历史数据获得若干页面样式特征，如颜色特征、尺寸特征和形状特征；通过数据挖掘算法分析所述样式管理器中的每个所述第一样式累计获得第二样式特征集合，所述第二样式特征集合包含若干第二样式特征，如图片特征、字体特征和图标特征等；将所有所述页面样式特征与所述第二样式特征集合中的所有所述第二样式特征通过正则匹配表达式进行特征匹配获得第三比较结果，所述第三比较结果包含若干匹配成功的所述第二样式特征，获取所有与所述第二样式特征对应的所述第一样式获得推荐页面样式集合，将所述样式列表更新为所述推荐页面样式集合。本实施例中，网络爬虫可以为聚焦爬虫技术、通用爬虫技术、增量爬虫技术或深层网络爬虫技术等，也可以为爬虫工具，数据挖掘算法可以为机器学习算法、超文本分类与聚类算法或网页分析算法等，正则匹配表达式也可以为特征的相似度比较。

实施例10

参考图5，在上述实施例的基础上，本实施例中，所述方法还包括：通过网络爬虫获取页面的历史数据，通过网页抽取方法分析所述历史数据获得若干页面作用域特征，如分割型排版特征、中心型排版特征和垂直型排版特征等；分析所述作用域选择器中的每个第一作用域累计获得第二作用域特征集合，所述第二作用域特征集合包含若干第二作用域特征，如字体排版特征、图片排版特征和图形排版特征等；将所有所述页面作用域特征与所述第二作用域特征集合中的所有所述第二作用域特征通过正则匹配表达式进行特征匹配获得第四比较结果，所述第四比较结果包含若干匹配成功的所述第二作用域特征，获取所有与所述第二作用域特征对应的所述第一作用域获得推荐页面作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐页面作用域集合。本实施例中，网络爬虫可以为聚焦爬虫技术、通用爬虫技术、增量爬虫技术或深层网络爬虫技术等，也可以为爬虫工具，网页抽取方法可以为基于正则表达式的网页抽取、基于CSS选择器的网页抽取、基于XPATH的网页抽取或基于机器学习的网页抽取等，正则匹配表达式也可以为特征的相似度比较。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种限定样式作用域的方法，其特征在于，所述方法包括：创建样式管理器和作用域选择器，所述样式管理器包含若干第一样式，每个所述第一样式对应一个第一样式标签，所述作用域选择器包含若干第一作用域，每个所述第一作用域对应一个第一唯一标识；获取样式字符串，基于所述样式字符串获得样式列表，所述样式列表包含若干第二样式，每个所述第二样式对应一个第二样式标签；针对每个所述第二样式添加所述作用域选择器，针对每个所述作用域选择器指定一个所述第一作用域；获取每个所述第二样式的所述第二样式标签累计获得第二样式标签集合，在页面中写入所述第二样式标签集合；基于所述第二样式标签集合和所述样式列表依次在所述页面写入每个所述第二样式，所述第二样式生效。

2.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，每个所述第一样式对应一个样式标识；所述方法还包括：判断每个所述第二样式是否对应一个所述样式标识，若否则创建与所述第二样式对应的新增样式标识，添加所述第二样式到所述样式管理器。

3.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，每个所述第一作用域对应一个权重值，所述权重值用于获取所述第一作用域的优先级；所述方法还包括：获取每个所述第二样式的所述第一作用域对应的所述权重值累计获得权重值列表，将所述权重值列表进行排序获得权重排序列表；基于所述权重排序列表将所有所述第二样式进行排序获得样式排序列表，将所述样式列表更新为所述样式排序列表。

4.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：创建风格管理器；分析每个所述第一样式累计获得风格标签集合，所述风格标签集合包含若干风格标签；基于所述风格标签集合将所有所述第一样式进行分类获得分类集合，将所述分类集合添加到所述风格管理器，所述风格管理器用于通过检索所述风格标签获得与所述风格标签对应的所述第一样式。

5.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，每个所述第一样式对应一个所述第一作用域；所述方法还包括：基于所述第一作用域将所述第一样式进行分类获得样式集合，所述样式集合用于通过检索所述第一作用域获得与所述第一作用域对应的所述第一样式。

6.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：获取用户自定义的若干第二作用域获得第二作用域集合，针对每个所述第二作用域创建对应的第二唯一标识，将所述作用域选择器中的所有所述第一作用域更新为所述第二作用域集合。

7.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：获取用户的历史行为数据，分析所述历史行为数据获得若干推荐样式特征；分析所述样式管理器中的每个所述第一样式累计获得第一样式特征集合，所述第一样式特征集合包含若干第一样式特征；将所有所述推荐样式特征与所述第一样式特征集合中的每个所述第一样式特征进行特征比较获得第一比较结果，基于所述第一比较结果获得推荐样式集合，将所述样式列表更新为所述推荐样式集合。

8.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：获取用户的历史行为数据，分析所述历史行为数据获得若干推荐作用域特征；分析所述作用域选择器中的每个第一作用域累计获得第一作用域特征集合，所述第一作用域特征集合包含若干第一作用域特征；将所有所述推荐作用域特征与所述第一作用域特征集合中的每个所述第一作用域特征进行特征比较获得第二比较结果，基于所述第二比较结果获得推荐作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐作用域集合。

9.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：获取页面的历史数据，分析所述历史数据获得若干页面样式特征；分析所述样式管理器中的每个所述第一样式累计获得第二样式特征集合，所述第二样式特征集合包含若干第二样式特征；将所有所述页面样式特征与所述第二样式特征集合中的每个所述第二样式特征进行特征比较获得第三比较结果，基于所述第三比较结果获得推荐页面样式集合，将所述样式列表更新为所述推荐页面样式集合。

10.根据权利要求1所述的一种限定样式作用域的方法，其特征在于，所述方法还包括：获取页面的历史数据，分析所述历史数据获得若干页面作用域特征；分析所述作用域选择器中的每个第一作用域累计获得第二作用域特征集合，所述第二作用域特征集合包含若干第二作用域特征；将所有所述页面作用域特征与所述第二作用域特征集合中的每个所述第二作用域特征进行特征比较获得第四比较结果，基于所述第四比较结果获得推荐页面作用域集合，将所述作用域选择器中所有所述第一作用域更新为所述推荐页面作用域集合。