CN111523067A - 一种页面样式处理方法、装置、存储介质及计算机设备 - Google Patents
一种页面样式处理方法、装置、存储介质及计算机设备 Download PDFInfo
- Publication number
- CN111523067A CN111523067A CN202010196625.5A CN202010196625A CN111523067A CN 111523067 A CN111523067 A CN 111523067A CN 202010196625 A CN202010196625 A CN 202010196625A CN 111523067 A CN111523067 A CN 111523067A
- Authority
- CN
- China
- Prior art keywords
- style
- component
- page element
- information
- identification information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明公开了一种页面样式处理方法、装置、存储介质及计算机设备，涉及信息技术领域，主要目的在于能够实现父组件的样式信息覆盖子组件的样式信息，保证页面样式的覆盖逻辑与页面开发逻辑相同，无需开发人员编写额外修改代码，降低页面开发工作量，从而能够提升页面开发的效率。所述方法包括：获取页面元素的样式信息，以及页面元素所在的父组件的样式信息；根据页面元素的样式信息和父组件的样式信息，生成页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将覆盖样式标识信息传递给页面元素所在的子组件；在子组件利用覆盖样式标识信息对类选择器赋值后，完成父组件的样式覆盖页面元素的样式。本发明适用于页面样式处理。
Description
技术领域
本发明涉及信息技术领域，特别是涉及一种页面样式处理方法、装置、存储介质及计算机设备。
背景技术
随着信息技术的不断进步，基于组件化的前端页面开发开始出现，其能够使得开发者能够开发出可在网站上循环利用的功能页面。在组件化开发前端项目时，随着项目越来越庞大，管理各个组件之间的层叠样式表(Cascading Style Sheets，CSS)变得不可控，由于CSS全局生效的特性，很容易出现因CSS重名而导致组件的样式无法正常显示的问题。
目前，通常是通过在项目打包时随机生成样式标识信息，并使用随机生成的样式标识信息对组件进行命名的方式，以解决不同组件之间重名的问题。但是，在页面样式处理时，通常父组件的样式信息需要针对性覆盖子组件的样式信息。然而，CSS针对页面样式的覆盖逻辑与页面开发的逻辑不同，即CSS针对页面样式的覆盖逻辑是由内到外，需要将子组件的样式传递给父组件，页面开发的逻辑是由外到内，若想实现页面样式的覆盖，需要开发人员编写额外的代码，修改子组件传递内联参数的逻辑，从而导致页面开发的效率较低。
发明内容
有鉴于此，本发明提供一种页面样式处理方法、装置、存储介质及计算机设备，主要目的在于能够通过生成的覆盖样式标识信息对子组件的类选择器赋值，实现父组件的样式信息覆盖子组件的样式信息，能够保证页面样式的覆盖逻辑与页面开发的逻辑相同，无需开发人员编写额外的修改代码，能够降低页面开发工作量，从而能够提升页面开发的效率。
依据本发明一个方面，提供了一种页面样式处理方法，包括：
获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
可选地，所述根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息，包括：
根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息和所述父组件的样式标识信息；
根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息。
进一步地，所述根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息，包括：
将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；
将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。
进一步地，所述页面元素的样式标识信息通过样式哈希值表示，所述根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息，包括：
将所述页面元素的样式信息、和所述父组件的样式信息分别输入到预设样式哈希值生成函数，随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。
优选地，所述根据所述页面元素的样式标识信息和所述父组件的样式标识信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
查询所述页面元素所在的高阶组件，并将所述页面元素的样式信息和所述父组件的样式信息，传递给所述高阶组件；
所述高阶组件用于根据所述页面元素的样式信息和所述父组件的样式标识信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
优选地，所述利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
将所述覆盖样式标识信息作为父到子组件方向的属性传递函数的参数传递给所述页面元素所在的子组件。
优选地，所述利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
当所述页面元素所在的子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
依据本发明第二方面，提供了一种页面样式处理装置，包括：
获取单元，用于获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
生成单元，用于根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
传递单元，用于利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
赋值单元，用于所述子组件利用所述覆盖样式标识信息对类选择器赋值。
可选地，所述生成单元包括：第一生成模块和第二生成模块，
所述第一生成模块，用于根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息和所述父组件的样式标识信息；
所述第二生成模块，用于根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息。
进一步地，所述第一生成模块，具体用于将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；并将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。
进一步地，所述第二生成模块，具体用于将所述页面元素的样式信息、和所述父组件的样式信息分别输入到预设样式哈希值生成函数；并随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。
优选地，所述装置还包括：查询单元，
所述查询单元，用于查询所述页面元素所在的高阶组件；
所述传递单元，还用于将所述页面元素的样式信息和所述父组件的样式信息，传递给所述高阶组件；
所述生成单元，还用于所述高阶组件根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
所述传递单元，还用于所述高阶组件利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
优选地，所述传递单元，具体还用于将所述覆盖样式标识信息作为父到子组件方向的属性传递函数的参数传递给所述页面元素所在的子组件。
优选地，所述传递单元，具体还用于当所述页面元素所在的子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
依据本发明第三方面，提供了一种存储介质，所述存储介质中存储有至少一可执行指令，所述执行指令使处理器执行以下步骤：获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
依据本发明第四方面，提供了一种计算机设备，包括处理器、存储器、通信接口和通信总线所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信，所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行以下步骤：获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
本发明提供一种页面样式处理方法、装置、存储介质及计算机设备，与现有技术通过在项目打包时随机生成样式标识信息，并使用随机生成的样式标识信息对组件进行命名的方式，以解决不同组件之间重名的问题相比，本发明能够获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；从而能够保证页面样式的覆盖逻辑与页面开发的逻辑相同，无需开发人员编写额外的修改代码，能够降低页面开发工作量，从而能够提升页面开发的效率。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了本发明实施例提供的一种页面样式处理方法流程图；
图2示出了现有技术父组件和子组件的关系图；
图3示出了本发明实施例提供的一种基于高阶组件的页面样式处理方法流程图；
图4示出了本发明实施例提供的一种页面样式处理装置的结构示意图；
图5示出了本发明实施例提供的另一种页面样式处理装置的结构示意图；
图6示出了本发明实施例提供的一种计算机设备的实体结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
如背景技术所述，目前，通常是通过在项目打包时随机生成样式标识信息，并使用随机生成的样式标识信息对组件进行命名的方式，以解决不同组件之间重名的问题。但是，在页面样式处理时，通常父组件的样式信息需要针对性覆盖子组件的样式信息。然而，CSS针对页面样式的覆盖逻辑与页面开发的逻辑不同，即CSS针对页面样式的覆盖逻辑是由内到外，需要将子组件的样式传递给父组件，页面开发的逻辑是由外到内，若想实现页面样式的覆盖，需要开发人员编写额外的代码，修改子组件传递内联参数的逻辑，从而导致页面开发的效率较低。
为了解决上述问题，本发明实施例提供了一种页面样式处理方法，如图1所示，所述方法包括：
101、获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息。
其中，所述页面元素可以为子组件中的一个元素。例如，所述父组件为一个页面组件，子组件为一个按钮组件，则子组件中的文字“确定”可以为所述子组件中的一个元素。所述页面元素的样式信息，以及所述页面元素所在的父组件的样式信息可以通过用户上传的方式获取。
102、根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
具体地，生成所述页面元素的覆盖样式标识信息的过程可以通过高阶组件完成，所述高阶组件具体可以为React高阶组件。在获取所述页面元素的样式信息和所述父组件的样式信息后，可以根据所述页面元素的样式信息、所述父组件的样式信息以及预设样式标识生成算法生成所述页面元素以及所述父组件的样式标识信息。
其中，所述预设样式标识生成算法可以为预设样式哈希值生成函数，能够随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值；根据生成的所述页面元素的样式标识信息、所述父组件的样式标识信息以及预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息，所述预设覆盖样式标识生成算法可以为将所述页面元素的样式标识信息与所述父组件的样式标识信息合并的算法，具体可以为将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，所述父到子组件方向的属性传递函数可以为props传递函数，所述函数可以用于父组件到子组件方向的属性传递。
103、在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
其中，生成所述覆盖样式标识信息后，所述子组件可以调用父到子方向的属性传递函数，以获取所述覆盖样式标识信息，并使用获取的所述覆盖样式标识信息，对类选择器进行赋值。这样通过所述覆盖样式标识信息对类选择器进行赋值，可以解决由于子组件的样式标识信息是在项目打包时随机生成的，导致所述父组件的样式信息无法覆盖子组件的样式信息的问题。如图2所示，示出了现有技术中父组件和子组件的关系图。
进一步的，为了更好的说明上述页面样式处理方法的过程，作为对上述实施例的细化和扩展，本发明实施例提供了几种可选实施例，但不限于此，具体如下所示：
在本发明的一个可选实施例，所述步骤102具体可以包括：根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息和所述父组件的样式标识信息；根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息。
其中，所述预设样式标识生成算法可以为预设样式哈希值生成函数，所述预设样式哈希值生成函数可以随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。例如，所述页面元素的样式信息为color：blue，所述父组件的样式信息为color：red，通过所述预设样式哈希值生成函数随机生成的页面元素的样式哈希值可以为aaaa，所述父组件的样式哈希值可以为bbbb。利用所述预设覆盖样式标识生成算法可以将所述页面元素的样式标识信息和所述父组件的样式标识信息合并，并将合并后的样式标识信息作为所述页面元素的覆盖样式标识信息。
在具体应用场景中，为了生成及确定所述页面元素的覆盖样式标识信息，所述102具体还可以包括：将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。
其中，所述预设覆盖样式标识生成算法具体可以为将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面，得到所述页面元素的覆盖样式标识信息的算法，具体地，可以将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。例如，所述页面元素和所述父组件的样式标识信息分别为aaaa、bbbb，调用预设覆盖样式标识生成算法，可以将所述页面元素的样式标识信息aaaa合并添加到所述父组件的样式标识信息bbbb的后面，得到样式标识信息aaaabbbb，将所述样式标识信息aaaabbbb确定为所述页面元素的覆盖样式标识信息。
对于本发明实施例，为了生成所述页面元素的样式哈希值和所述父组件的样式哈希值，所述步骤102具体还可以包括：将所述页面元素的样式信息、和所述父组件的样式信息分别输入到预设样式哈希值生成函数，随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。
例如，输入所述预设样式哈希值生成函数的参数为：所述页面元素的样式信息color：blue，以及所述父组件的样式信息color：red，则所述预设样式哈希值生成函数随机生成的页面元素样式哈希值可以为aaaa，所述父组件的样式哈希值可以为bbbb。
在本发明的另一个可选实施例，为了减少开发工作量，提高开发效率，所述步骤102具体可以包括：查询所述页面元素所在的高阶组件，并将所述页面元素的样式信息和所述父组件的样式信息，传递给所述高阶组件；所述高阶组件用于根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
其中，所述高阶组件可以用于执行生成所述覆盖样式标识信息的操作。所述页面元素所在的高阶组件中可以包括所述预设覆盖样式标识算法，可以调用所述预设覆盖样式标识算法，根据所述页面元素的样式标识信息和所述父组件的样式标识信息，生成所述页面元素的覆盖样式标识信息。所述页面元素所在的高阶组件中还可以包括父到子组件方向的属性传递函数，所述高阶组件可以调用所述父到子组件方向的属性传递函数，获取所述页面元素的样式标识信息，以及所述页面元素所在父组件的样式标识信息。所述高阶组件还可以用于在所述子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述子组件。如图3所示，示出了一种基于高阶组件的页面样式处理方法：所述高阶组件可以获取页面元素的样式信息以及页面元素所在的父组件的样式信息，并通过CSS modules在内部合并生成覆盖样式标识信息，所述子组件可以调用props传递函数，获取所述覆盖样式标识信息，并使用所述覆盖样式标识信息对类选择器进行赋值，从而实现父组件的样式信息覆盖页面元素的样式信息。
例如：所述高阶组件调用props传递函数，获取所述页面元素的样式标识信息aaaa，以及所述父组件的样式信息bbbb，然后，所述高阶组件调用预设覆盖样式标识算法，生成所述覆盖样式标识信息aaaabbbb，在所述子组件调用props传递函数时，将所述覆盖样式标识信息aaaabbbb传递给所述页面元素所在的子组件。
在本发明的又一个可选实施例，所述步骤102具体可以包括：将所述覆盖样式标识信息作为父到子组件方向的属性传递函数的参数传递给所述页面元素所在的子组件。
其中，所述属性传递函数具体可以为props传递函数。生成所述覆盖样式标识信息后，所述子组件调用所述属性传递函数，获取所述覆盖样式标识信息，所述覆盖样式标识信息可以作为所述属性传递函数的参数传递给所述子组件。例如，所述覆盖样式标识信息为aaaabbbb，则所述页面元素所在的子组件可以调用props传递函数，并获取props传递函数的参数，所述参数即为所述覆盖样式标识信息aaaabbbb。
在本发明的再一个可选实施例，为了保证所述页面元素所在的子组件获取所述覆盖样式标识信息，所述步骤102具体可以包括：当所述页面元素所在的子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
其中，所述页面元素所在的子组件可以调用所述属性传递函数，以获取所述覆盖样式标识信息，所述属性传递函数可以为props传递函数，具体可以为props.getStyle()函数。例如，所述页面元素所在的子组件调用属性传递函数props.getStyle()，可以获取到所述覆盖样式标识信息aaaabbbb。
进一步地，作为图1的具体实现，本发明实施例提供了一种页面样式处理装置，如图4所示，所述装置包括：获取单元21、生成单元22、传递单元23和赋值单元24。
所述获取单元21，可以用于获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
所述生成单元22，可以用于根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
所述传递单元23，可以用于利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
所述赋值单元24，可以用于所述子组件利用所述覆盖样式标识信息对类选择器赋值。
所述生成单元22，可以包括：第一生成模块221和第二生成模块222，如图5所示。
所述第一生成模块221，可以用于根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息和所述父组件的样式标识信息；
所述第二生成模块222，可以用于根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息。
进一步地，所述第一生成模块221，具体可以用于将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；并将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。
进一步地，所述第二生成模块222，具体可以用于将所述页面元素的样式信息、和所述父组件的样式信息分别输入到预设样式哈希值生成函数，随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。
对于本发明实施例，为了查询所述页面元素所在的高阶组件，所述装置还可以包括：查询单元25。
所述查询单元25，可以用于查询所述页面元素所在的高阶组件；
所述传递单元23，还可以用于将所述页面元素的样式信息和所述父组件的样式信息，传递给所述高阶组件；
所述生成单元22，还可以用于所述高阶组件根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
所述传递单元22，还可以用于所述高阶组件利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
所述传递单元22，具体还可以用于将所述覆盖样式标识信息作为父到子组件方向的属性传递函数的参数传递给所述页面元素所在的子组件。
所述传递单元22，具体还可以用于当所述页面元素所在的子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
需要说明的是，本发明实施例提供的一种页面样式处理装置所涉及各功能模块的其他相应描述，可以参考图1所示方法的对应描述，在此不再赘述。
基于上述如图1所示方法，相应的，本发明实施例还提供了一种存储介质，所述存储介质中存储有至少一可执行指令，所述执行指令使处理器执行以下步骤：获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
基于上述如图1所示方法和如图4所示装置的实施例，本发明实施例还提供了一种计算机设备，如图6所示，处理器(processor)31、通信接口(Communications Interface)32、存储器(memory)33、以及通信总线34。其中：处理器31、通信接口32、以及存储器33通过通信总线34完成相互间的通信。通信接口34，用于与其它设备比如用户端或其它服务器等的网元通信。处理器31，用于执行程序，具体可以执行上述业务信息处理方法实施例中的相关步骤。具体地，程序可以包括程序代码，该程序代码包括计算机操作指令。处理器31可能是中央处理器CPU，或者是特定集成电路ASIC(Application Specific IntegratedCircuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。
终端包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。存储器33，用于存放程序。存储器33可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。程序具体可以用于使得处理器31执行以下操作：获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
通过本发明的技术方案，能够获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；并利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式，从而能够保证页面样式的覆盖逻辑与页面开发的逻辑相同，无需开发人员编写额外的修改代码，降低了页面开发的工作量，从而能够提升页面开发的效率。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
可以理解的是，上述方法及装置中的相关特征可以相互参考。另外，上述实施例中的“第一”、“第二”等是用于区分各实施例，而并不代表各实施例的优劣。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
Claims (10)
1.一种页面样式处理方法，其特征在于，包括：
获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
在所述子组件利用所述覆盖样式标识信息对类选择器赋值后，完成所述父组件的样式覆盖所述页面元素的样式。
2.根据权利要求1所述的方法，其特征在于，所述根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息，包括：
根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息和所述父组件的样式标识信息；
根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息。
3.根据权利要求2所述的方法，其特征在于，所述根据所述页面元素的样式标识信息、所述父组件的样式标识信息和预设覆盖样式标识生成算法，生成所述页面元素的覆盖样式标识信息，包括：
将所述页面元素的样式标识信息合并添加到所述父组件的样式标识信息的后面；
将合并后的样式标识信息，确定为所述页面元素的覆盖样式标识信息。
4.根据权利要求2所述的方法，其特征在于，所述页面元素的样式标识信息通过样式哈希值表示，所述根据所述页面元素的样式信息、所述父组件的样式信息和预设样式标识生成算法，随机生成所述页面元素的样式标识信息，包括：
将所述页面元素的样式信息、和所述父组件的样式信息分别输入到预设样式哈希值生成函数，随机生成所述页面元素的样式哈希值和所述父组件的样式哈希值。
5.根据权利要求1所述的方法，其特征在于，所述根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息之前，所述方法还包括：
查询所述页面元素所在的高阶组件，并将所述页面元素的样式信息和所述父组件的样式信息传递给所述高阶组件；
所述根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息，包括：
通过所述高阶组件，根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
所述利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
通过所述高阶组件，利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
6.根据权利要求1所述的方法，其特征在于，所述利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
将所述覆盖样式标识信息作为父到子组件方向的属性传递函数的参数传递给所述页面元素所在的子组件。
7.根据权利要求1所述的方法，其特征在于，所述利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件，包括：
当所述页面元素所在的子组件调用所述属性传递函数时，将所述覆盖样式标识信息传递给所述页面元素所在的子组件。
8.一种页面样式处理装置，其特征在于，包括：
获取单元，用于获取页面元素的样式信息，以及所述页面元素所在的父组件的样式信息；
生成单元，用于根据所述页面元素的样式信息和所述父组件的样式信息，生成所述页面元素的覆盖样式标识信息；
传递单元，用于利用父到子组件方向的属性传递函数，将所述覆盖样式标识信息传递给所述页面元素所在的子组件；
赋值单元，用于所述子组件利用所述覆盖样式标识信息对类选择器赋值。
9.一种存储介质，其上存储有计算机程序，所述存储介质中存储有至少一可执行指令，所述执行指令使处理器执行如权利要求1-7中任一项所述的页面样式处理方法对应的操作。
10.一种计算机设备，包括处理器、存储器、通信接口和通信总线所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信，所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-7中任一项所述的页面样式处理对应的操作。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010196625.5A CN111523067A (zh) | 2020-03-19 | 2020-03-19 | 一种页面样式处理方法、装置、存储介质及计算机设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010196625.5A CN111523067A (zh) | 2020-03-19 | 2020-03-19 | 一种页面样式处理方法、装置、存储介质及计算机设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111523067A true CN111523067A (zh) | 2020-08-11 |
Family
ID=71902451
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010196625.5A Pending CN111523067A (zh) | 2020-03-19 | 2020-03-19 | 一种页面样式处理方法、装置、存储介质及计算机设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111523067A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112711418A (zh) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | 多组件的前端界面布局方法、装置、电子设备和存储介质 |
| CN114741124A (zh) * | 2022-03-14 | 2022-07-12 | 北京达佳互联信息技术有限公司 | 样式信息确定方法、装置、电子设备及存储介质 |
| WO2023131217A1 (zh) * | 2022-01-10 | 2023-07-13 | 北京字跳网络技术有限公司 | 样式确定方法、装置、设备、存储介质和程序产品 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090150766A1 (en) * | 2007-12-06 | 2009-06-11 | International Business Machines Corporation | Systems, methods and computer program products for applying styles from elements included in an existing page |
| US20130246909A1 (en) * | 2012-03-14 | 2013-09-19 | International Business Machines Corporation | Automatic modification of cascading style sheets for isolation and coexistence |
| CN109558553A (zh) * | 2018-11-20 | 2019-04-02 | 北京小米移动软件有限公司 | 样式确定方法及装置 |
| CN110045956A (zh) * | 2019-04-16 | 2019-07-23 | 北京字节跳动网络技术有限公司 | 组件的配置方法、装置、设备及可读存储介质 |
| CN110737711A (zh) * | 2019-10-14 | 2020-01-31 | 平安医疗健康管理股份有限公司 | 报表导出方法、装置、计算机设备和存储介质 |
| CN110795095A (zh) * | 2019-09-20 | 2020-02-14 | 贝壳技术有限公司 | 建立业务逻辑组件与业务组件及生成页面的方法与系统 |
-
2020
- 2020-03-19 CN CN202010196625.5A patent/CN111523067A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090150766A1 (en) * | 2007-12-06 | 2009-06-11 | International Business Machines Corporation | Systems, methods and computer program products for applying styles from elements included in an existing page |
| US20130246909A1 (en) * | 2012-03-14 | 2013-09-19 | International Business Machines Corporation | Automatic modification of cascading style sheets for isolation and coexistence |
| CN109558553A (zh) * | 2018-11-20 | 2019-04-02 | 北京小米移动软件有限公司 | 样式确定方法及装置 |
| CN110045956A (zh) * | 2019-04-16 | 2019-07-23 | 北京字节跳动网络技术有限公司 | 组件的配置方法、装置、设备及可读存储介质 |
| CN110795095A (zh) * | 2019-09-20 | 2020-02-14 | 贝壳技术有限公司 | 建立业务逻辑组件与业务组件及生成页面的方法与系统 |
| CN110737711A (zh) * | 2019-10-14 | 2020-01-31 | 平安医疗健康管理股份有限公司 | 报表导出方法、装置、计算机设备和存储介质 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112711418A (zh) * | 2021-02-05 | 2021-04-27 | 北京宇信科技集团股份有限公司 | 多组件的前端界面布局方法、装置、电子设备和存储介质 |
| WO2023131217A1 (zh) * | 2022-01-10 | 2023-07-13 | 北京字跳网络技术有限公司 | 样式确定方法、装置、设备、存储介质和程序产品 |
| CN114741124A (zh) * | 2022-03-14 | 2022-07-12 | 北京达佳互联信息技术有限公司 | 样式信息确定方法、装置、电子设备及存储介质 |
| CN114741124B (zh) * | 2022-03-14 | 2024-05-14 | 北京达佳互联信息技术有限公司 | 样式信息确定方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109840429B (zh) | 智能合约部署、调用方法和装置 | |
| CN111523067A (zh) | 一种页面样式处理方法、装置、存储介质及计算机设备 | |
| WO2015165232A1 (zh) | 一种加载驱动程序的方法及嵌入式设备 | |
| CN109766099B (zh) | 前端源码编译方法、装置、存储介质及计算机设备 | |
| CN111770184B (zh) | 基于小程序实现服务的方法及装置 | |
| CN108614696B (zh) | 一种应用制作的方法、静态库生成的方法及装置 | |
| JP6412276B2 (ja) | 仮想マシン作成方法及び装置 | |
| CN108279882B (zh) | 框架生成方法、装置、设备及计算机可读介质 | |
| CN111639279A (zh) | 图形码生成方法、目标页面加载方法和装置 | |
| US7197600B2 (en) | Transferring data along with code for program overlays | |
| CN109190367B (zh) | 利用沙箱运行应用程序安装包的方法及装置 | |
| CN108897858B (zh) | 分布式集群索引分片的评估方法及装置、电子设备 | |
| CN116521181B (zh) | 基于游戏系统的脚本数据处理方法、装置、设备及介质 | |
| CN107506623B (zh) | 应用程序的加固方法及装置、计算设备、计算机存储介质 | |
| CN111352668A (zh) | 基于插件的设备测试方法及装置、基于插件的测试系统 | |
| CN107480479B (zh) | 应用程序的加固方法及装置、计算设备、计算机存储介质 | |
| CN105867938A (zh) | 指纹模组的识别方法及装置 | |
| CN111198708A (zh) | 一种jar包冲突解决方法和装置 | |
| CN106951236B (zh) | 插件的开发方法及装置 | |
| CN106708516B (zh) | 一种实现so文件调用外部函数的方法和装置 | |
| CN112988810B (zh) | 信息查找方法、装置及设备 | |
| US20130305234A1 (en) | Method and system for multiple embedded device links in a host executable | |
| US20120311530A1 (en) | Method for generating software | |
| CN110333870B (zh) | Simulink模型变量分配的处理方法、装置及设备 | |
| CN113760249A (zh) | 程序文件的处理方法、装置及设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |