CN111078337A - 样式调整方法、系统及计算机可读存储介质 - Google Patents

Abstract

本发明提供了一种样式调整方法、系统及计算机可读存储介质，其中，样式调整方法包括：获取样式的配置信息，并根据配置信息确定样式的目标元素；根据目标元素的类型，将样式解析成与目标元素相对应的格式；将解析后的样式作用于目标元素。本发明提出的样式调整方法，可实现零标码的样式调整，且调整过程简单，可满足后期调试过程中用户对产品的个性化需求。

Description

样式调整方法、系统及计算机可读存储介质

技术领域

本发明涉及软件产品技术领域，具体而言，涉及一种样式调整方法、一种样式调整系统及一种计算机可读存储介质。

背景技术

随着近年来软件产品的迭代升级，业务系统对于人机交互，用户体验上也有了更高的要求，用户对标准的软件产品的个性化需求也越来越多。

在产品的实施阶段，调试人员没有产品代码，而且也不熟悉产品的开发修改，无法应对产品的样式进行调整，进而无法满足客户的个性化需求。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。

为此，本发明第一方面提供了一种样式调整方法。

本发明第二方面提供了一种样式调整系统。

本发明第三方面提供了一种计算机可读存储介质。

本发明第一方面提供了一种样式调整方法，包括：获取样式的配置信息，并根据配置信息确定样式的目标元素；根据目标元素的类型，将样式解析成与目标元素相对应的格式；将解析后的样式作用于目标元素。

本发明提出的样式调整方法，首先获取样式的配置信息，进而根据该配置信息确定样式的目标元素，也即，确定样式最终作用于何元素；而后，对样式进行解析，保证解析后的样式具有与目标元素相匹配的格式，保证样式可作用于目标元素；最后，将解析后的样式作用于目标元素，实现动态调整。值得注意的是，在整个调整过程中，无需获知产品代码，可实现零标码的样式调整，且调整过程简单，对于调试人员的技能要求较低，可满足后期调试过程中用户对产品的个性化需求。

本发明提出的样式调整方法，可实现零标码的样式调整，且调整过程简单，可满足后期调试过程中用户对产品的个性化需求。

根据本发明上述技术方案的样式调整方法，还可以具有以下附加技术特征：

在上述技术方案中，配置信息包括配置项属性及目标属性；配置项属性中包括样式的作用效果及编辑方式；目标属性用于确定与配置项属性相对应的目标元素。

在该技术方案中，配置信息包括配置项属性及目标属性。其中，配置项属性中包括样式的作用效果及编辑方式；样式的作用效果包括但不限于字体颜色、背景颜色、边距等；样式的编辑方式也就是该样式的配置项在配置编辑器中如何编辑、枚举项等，编辑器会根据作用效果及编辑方式完成配置工作。目标属性用于确定与配置项属性相对应的目标元素，也即，目标属性用于明确配置项属性与目标元素的一一对应关系，保证样式作用于对应的目标元素。

在上述任一技术方案中，根据配置信息确定样式的目标元素的步骤，具体包括：根据目标属性确定与样式相对应的目标元素；其中，目标元素包括：文档对象模型元素、图表组件元素。

在该技术方案中，目标属性是用来确定与配置项属性相对应的目标元素的；因此，在根据配置信息确定样式的目标元素的过程中，根据目标属性确定与样式相对应的目标元素，以保证目标元素的准确性。具体地，目标元素包括但不局限于文档对象模型元素和图表组件元素。

在上述任一技术方案中，根据目标元素的类型，将样式解析成与目标元素相对应的格式的步骤，具体包括：判断目标元素的类型；若目标元素为文档对象模型元素，将样式的配置项解析为层叠样式；若目标元素为图表组件元素，将样式的配置项解析为属性配置项。

在该技术方案中，在解析样式的过程中，是解析样式的配置项，并且是根据目标元素的类型进行解析的。具体地，解析过程包括但不局限于以下情况：当目标元素为文档对象模型元素时，将样式的配置项解析为层叠样式，以保证后续步骤的继续；当目标元素为图表组件元素时，将样式的配置项解析为属性配置项，以保证后续步骤的继续。值得注意的是，该过程可同时支持多种目标元素，比如页面的统一主色调配置项，需要同时作用于文档对象模型元素以及图表组件元素等。

在上述任一技术方案中，将解析后的样式作用于目标元素的步骤，具体包括：判断解析后的配置项的类型：若解析后的配置项为层叠样式，将层叠样式作用于当前页面；若解析后的配置项为属性配置项，将属性配置项作用于对应的图表组件元素。

在该技术方案中，在将解析后的样式作用于目标元素的过程中，判断解析后的配置项的类型，如果解析后的配置项为层叠样式，将层叠样式作用于当前页面，以完成对当前页面的配置；如果解析后的配置项为属性配置项，将属性配置项作用于对应的图表组件元素，以完成对图表组件元素的配置。

在上述任一技术方案中，每一个层叠样式具有唯一编码，将层叠样式加入到当前页面的步骤，具体包括：在当前页面中寻找与层叠样式编码相匹配的目标元素；将层叠样式作用于编码相匹配的目标元素。

在该技术方案中，每一个层叠样式具有唯一编码，可有效防止样式冲突。具体地，在将层叠样式加入到当前页面的过程中，在当前页面中寻找与层叠样式编码相匹配的目标元素。也即，通过比对编码的方式确保目标样式的唯一；而后，将层叠样式作用于编码相匹配的目标元素，以完成对当前页面的配置。

在上述任一技术方案中，将属性配置项作用于对应的图表组件元素的步骤，具体包括：将属性配置项发送至对应的图表组件元素；通过图表组件元素识别并加载属性配置项。

在该技术方案中，在将属性配置项作用于对应的图表组件元素的过程中，将属性配置项发送至对应的图表组件元素以后，通过图表组件元素内部来识别并追加配置，进而完成其自身的样式调整。

在上述任一技术方案中，判断多个样式的配置信息是否一致；若多个样式的配置信息一致，将样式作用于一个目标元素，而后其余目标元素继承样式。

在该技术方案中，在解决统一的字体，字号等问题时，为避免多个重复的解析配置工作，此时进行统一的配置，采用继承的方式即可。也即，在多个样式的配置信息一致的情况下，将样式作用于一个目标元素然后，不同的目标元素可以继承该样式，且可以被覆写，以最大程度上减少配置项。

本发明第二方面提供了一种样式调整系统，包括：存储器，存储器被配置为适于存储计算机程序；处理器，处理器被配置为适于执行计算机程序以实现如本发明第一方面中任一项技术方案的样式调整方法。

本发明提出的样式调整系统包括存储器和处理器，其中，存储器被配置为适于存储计算机程序，处理器被配置为适于执行计算机程序时，可实现如上述任一技术方案的样式调整方法。

因此，该样式调整系统具有上述样式调整方法的全部有益效果，在此不再一一陈述。

本发明第三方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时，实现如本发明第一方面中任一项技术方案的样式调整方法。

本发明提出的计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，可实现如上述任一技术方案的样式调整方法。

因此，该计算机可读存储介质具有上述样式调整方法的全部有益效果，在此不再一一陈述。

本发明的附加方面和优点将在下面的描述部分中变得明显，或通过本发明的实践了解到。

附图说明

本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解，其中：

图1示出了本发明一个实施例的样式调整方法的示意流程图；

图2示出了本发明又一个实施例的样式调整方法的示意流程图；

图3示出了本发明一个实施例的样式调整系统的结构框图；

图4示出了本发明一个具体实施例的样式调整方法的示意流程图；

图5示出了图4所示实施例的样式调整方法的原理图。

具体实施方式

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

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

下面参照图1至图5来描述根据本发明一些实施例提供的样式调整方法、样式调整系统及计算机可读存储介质。

实施例一：

图1示出了本发明一个实施例的样式调整方法的示意流程图，如图1所示，该样式调整方法包括：

步骤102，获取样式的配置信息，并根据配置信息确定样式的目标元素；

步骤104，根据目标元素的类型，将样式解析成与目标元素相对应的格式；

步骤106，将解析后的样式作用于目标元素。

该实施例提出的样式调整方法，首先获取样式的配置信息，进而根据该配置信息确定样式的目标元素，也即，确定样式最终作用于何元素；而后，对样式进行解析，保证解析后的样式具有与目标元素相匹配的格式，保证样式可作用于目标元素；最后，将解析后的样式作用于目标元素，实现动态调整。值得注意的是，在整个调整过程中，无需获知产品代码，可实现零标码的样式调整，且调整过程简单，对于调试人员的技能要求较低，可满足后期调试过程中用户对产品的个性化需求。

该实施例提出的样式调整方法，可实现零标码的样式调整，且调整过程简单，可满足后期调试过程中用户对产品的个性化需求。

在该实施例中，进一步地，配置信息包括配置项属性及目标属性。

其中，配置项属性中包括样式的作用效果及编辑方式；样式的作用效果包括但不限于字体颜色、背景颜色、边距等；样式的编辑方式也就是该样式的配置项在配置编辑器中如何编辑、枚举项等，编辑器会根据作用效果及编辑方式完成配置工作。目标属性用于确定与配置项属性相对应的目标元素，也即，目标属性用于明确配置项属性与目标元素的一一对应关系，保证样式作用于对应的目标元素。

在该实施例中，进一步地，步骤102具体包括：根据目标属性确定与样式相对应的目标元素，且目标元素包括：文档对象模型元素、图表组件元素。也即，在根据配置信息确定样式的目标元素的过程中，根据目标属性确定与样式相对应的目标元素，以保证目标元素的准确性。具体地，目标元素包括但不局限于文档对象模型元素和图表组件元素。

在该实施例中，进一步地，步骤104具体包括：判断目标元素的类型；若目标元素为文档对象模型元素，将样式的配置项解析为层叠样式；若目标元素为图表组件元素，将样式的配置项解析为属性配置项。

具体地，解析过程包括但不局限于以下情况：

当目标元素为文档对象模型元素时，将样式的配置项解析为层叠样式，以保证后续步骤的继续。

当目标元素为图表组件元素时，将样式的配置项解析为属性配置项，以保证后续步骤的继续。

值得注意的是，该过程可同时支持多种目标元素，比如页面的统一主色调配置项，需要同时作用于文档对象模型元素以及图表组件元素等。

在该实施例中，进一步地，步骤106具体包括：判断解析后的配置项的类型：若解析后的配置项为层叠样式，将层叠样式作用于当前页面；若解析后的配置项为属性配置项，将属性配置项作用于对应的图表组件元素。

具体地，在将解析后的样式作用于目标元素的过程中，包括但不局限于以下情况：

如果解析后的配置项为层叠样式，将层叠样式作用于当前页面，以完成对当前页面的配置。

如果解析后的配置项为属性配置项，将属性配置项作用于对应的图表组件元素，以完成对图表组件元素的配置。

特别地，每一个层叠样式具有唯一编码，可有效防止样式冲突。具体地，在将层叠样式加入到当前页面的过程中，在当前页面中寻找与层叠样式编码相匹配的目标元素。也即，通过比对编码的方式确保目标样式的唯一；而后，将层叠样式作用于编码相匹配的目标元素，以完成对当前页面的配置。

特别地，在将属性配置项作用于对应的图表组件元素的过程中，将属性配置项发送至对应的图表组件元素以后，通过图表组件元素内部来识别并追加配置，进而完成其自身的样式调整。

实施例二：

图2示出了本发明又一个实施例的样式调整方法的示意流程图，如图2所示，该样式调整方法包括：

步骤202，获取样式的配置信息，并根据配置信息确定样式的目标元素；

步骤204，根据目标元素的类型，将样式解析成与目标元素相对应的格式；

步骤206，将解析后的样式作用于目标元素；

步骤208，判断多个样式的配置信息是否一致，当判断结果为是时，执行步骤210，否则，返回步骤202；

步骤210，其余目标元素继承样式。

在该实施例中，首先获取一个样式的配置信息，进而根据该配置信息确定这个样式的目标元素，也即，确定这个样式最终作用于何元素；而后，对这个样式进行解析，保证解析后的样式具有与目标元素相匹配的格式，保证这个样式可作用于目标元素；最后，将解析后的样式作用于目标元素，实现一个样式动态调整。

而后，判断多个样式的配置信息是否一致，也即，判断其余样式与这个样式是否一致。在多个样式的配置信息一致的情况下，将样式作用于一个目标元素，然后，不同的目标元素可以继承该样式，且可以被覆写，以最大程度上减少配置项。

例如，在解决统一的字体，字号等问题时，为避免多从重复的解析配置工作，此时进行统一的配置，采用继承的方式即可。

实施例三：

图3示出了本发明一个实施例的样式调整系统300的结构框图。

如图3所示，该样式调整系统300包括存储器302和处理器304。

其中，存储器302被配置为适于存储计算机程序，处理器304被配置为适于执行计算机程序时，可实现如上述实施例一或实施例二的样式调整方法。

因此，该样式调整系统300具有上述样式调整方法的全部有益效果，在此不再一一陈述。

实施例四：

本发明第四个实施例提出了一种计算机可读存储介质，其上存储有计算机程序。

其中，该计算机程序被处理器执行时，可实现如实施例一或实施例二的样式调整方法。

因此，该计算机可读存储介质具有上述样式调整方法的全部有益效果，在此不再一一陈述。

具体实施例：

本发明提出的技术方案，主要包括有样式规则配置装置、样式规则解析引擎及样式生成及绑定装置。

样式规则配置装置用于描述样式的配置信息，可任意描述页面中的元素。

样式规则解析引擎可把样式规则解析为正常的CSS样式(Cascading StyleSheete层叠样式)，还可以把规则解析成echarts(一种类似于word、excel的办公软件)等图表需要的属性配置项。

样式生成及绑定装置可把样式规则解析引擎生成的样式或属性配置项生成最终的样式在页面中，并且只针对目标元素生效，不会污染其它元素。

图4示出了该实施例的样式调整方法的示意流程图。如图4所示，该实施例提出的样式调整方法包括：

步骤402，页面加载；

步骤404，解析样式描述；

步骤406，生成目标项(CSS/图标配置等)；

步骤408，作用于目标项。

图5示出了图4所示实施例的样式调整方法的原理图。如图5所示，其核心原理如下：

步骤1，组织描述信息：

描述信息分为标准描述和扩展描述。其中，标准描述信息为预置描述，可以作为产品出布时，预置的可配置项目；扩展描述一般可以作为客户的个性化调整的配置描述。

描述结构主要由分组、配置项属性、目标属性组成。其中，配置项属性中包含作用效果，例如：字体颜色、背景颜色、边距等，以及该配置项在配置编辑器中如何编辑、枚举项等。在编辑器中会按配置信息显示对应配置项，完成配置工作。

目标属性主要描述该配置项对应的目标元素信息，可以为页面中的DOM元素，也可以为图表组件等。

步骤2，按规则解析配置：

通过规则解析引擎来解析配置描述信息。把配置描述信息输入给解析引擎，解析引擎首先判断配置项的目标元素，如果为DOM元素(Document ObjectModel文档对象模型)，那么就把配置项解析为CSS；如果为Charts options元素(图表组件)，则解析成对应图表的配置项。注意：解析引擎可同时支持多种目标元素，比如页面的统一主色调配置项，需要同时作用于DOM以及图表组件等。

解析引擎还要解决样式继承的问题。比如统一的字体，字号等问题，不可能在每个DOM上都做配置，需要有一层统一的配置。然后不同的元素的配置可继承该配置，并且可以被覆写。最大程度上减少配置项。

步骤3，页面样式生成及绑定：

样式生成及绑定装置是整个架构中最为复杂的一部分。需要做个性化处理的页面首先要在开发态内置该装置。

在页面的渲染之初，该装置需要请求配置信息，把配置信息交给解析引擎，解决引擎按步骤2生成对应的目标信息。该装置收到目标信息后，首先对目标信息分类，如果为CSS信息，则动态加入到当前页面中，为避免样式冲突，每条样式信息都有唯一id(Identity身份表示号码，已称为序列号或帐号)；如果为图表等组件需要的信息，则输出给对应的组件，由组件内部来识别并追加配置。

对于CSS类型配置，在挂载完样式信息后，需要找到对应的元素，在元素上追加编码，与样式相匹配。

本发明提出的技术方案，在数据中台智能分析中使用，解决了智能分析产品的主题配置，以及个性化扩展问题。在实施阶段，可做到零代码实施。

在本发明的描述中，术语“多个”则指两个或两个以上，除非另有明确的限定，术语“上”、“下”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制；术语“连接”、“安装”、“固定”等均应做广义理解，例如，“连接”可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是直接相连，也可以通过中间媒介间接相连。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本说明书的描述中，术语“一个实施例”、“一些实施例”、“具体实施例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或实例。而且，描述的具体特征、结构、材料或特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种样式调整方法，其特征在于，包括：

获取所述样式的配置信息，并根据所述配置信息确定所述样式的目标元素；

根据所述目标元素的类型，将所述样式解析成与所述目标元素相对应的格式；

将解析后的所述样式作用于所述目标元素。

2.根据权利要求1所述的样式调整方法，其特征在于，

所述配置信息包括配置项属性及目标属性；

所述配置项属性中包括所述样式的作用效果及编辑方式；

所述目标属性用于确定与所述配置项属性相对应的所述目标元素。

3.根据权利要求2所述的样式调整方法，其特征在于，所述根据所述配置信息确定所述样式的目标元素的步骤，具体包括：

根据所述目标属性确定与所述样式相对应的所述目标元素；

其中，所述目标元素包括：文档对象模型元素、图表组件元素。

4.根据权利要求3所述的样式调整方法，其特征在于，所述根据所述目标元素的类型，将所述样式解析成与所述目标元素相对应的格式的步骤，具体包括：

判断所述目标元素的类型；

若所述目标元素为文档对象模型元素，将所述样式的配置项解析为层叠样式；

若所述目标元素为图表组件元素，将所述样式的配置项解析为属性配置项。

5.根据权利要求4所述的样式调整方法，其特征在于，所述将解析后的所述样式作用于所述目标元素的步骤，具体包括：

判断解析后的所述配置项的类型：

若解析后的所述配置项为层叠样式，将所述层叠样式作用于当前页面；

若解析后的所述配置项为属性配置项，将所述属性配置项作用于对应的图表组件元素。

6.根据权利要求5所述的样式调整方法，其特征在于，每一个所述层叠样式具有唯一编码，所述将所述层叠样式加入到当前页面的步骤，具体包括：

在当前页面中寻找与所述层叠样式编码相匹配的所述目标元素；

将所述层叠样式作用于编码相匹配的所述目标元素。

7.根据权利要求5所述的样式调整方法，其特征在于，所述将所述属性配置项作用于对应的图表组件元素的步骤，具体包括：

将所述属性配置项发送至对应的所述图表组件元素；

通过所述图表组件元素识别并加载所述属性配置项。

8.根据权利要求1至7中任一项所述的样式调整方法，其特征在于，还包括：

判断多个所述样式的配置信息是否一致；

若多个所述样式的配置信息一致，将所述样式作用于一个所述目标元素，而后其余所述目标元素继承所述样式。

9.一种样式调整系统，其特征在于，包括：

存储器，所述存储器被配置为适于存储计算机程序；

处理器，所述处理器被配置为适于执行所述计算机程序以实现如权利要求1至8中任一项所述的样式调整方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现如权利要求1至8中任一项所述的样式调整方法。

Images