CN113378059A - 一种页面展示方法、装置、计算机设备及存储介质 - Google Patents
一种页面展示方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN113378059A CN113378059A CN202110741075.5A CN202110741075A CN113378059A CN 113378059 A CN113378059 A CN 113378059A CN 202110741075 A CN202110741075 A CN 202110741075A CN 113378059 A CN113378059 A CN 113378059A
- Authority
- CN
- China
- Prior art keywords
- value pair
- page
- key
- key value
- rendering code
- 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
- 238000000034 method Methods 0.000 title claims abstract description 53
- 238000009877 rendering Methods 0.000 claims abstract description 155
- 238000004590 computer program Methods 0.000 claims description 10
- 230000006870 function Effects 0.000 description 16
- 238000013461 design Methods 0.000 description 7
- 238000012544 monitoring process Methods 0.000 description 7
- 238000011161 development Methods 0.000 description 6
- 230000004044 response Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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/953—Querying, e.g. by the use of web search engines
- G06F16/9535—Search customisation based on user profiles and personalisation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/60—Software deployment
- G06F8/65—Updates
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Computer Security & Cryptography (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供了一种页面展示方法、装置、计算机设备及存储介质，其中，该方法包括：响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；基于所述第一键值对，对待展示页面的第一渲染代码进行更新；基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
Description
技术领域
本公开涉及计算机技术领域，具体而言，涉及一种页面展示方法、装置、计算机设备及存储介质。
背景技术
随着移动互联网的快速发展，web在移动端的使用场景也越来越丰富，其中最基本的就是通过层叠样式表(Cascading Style Sheets，CSS)语言给用户呈现丰富多彩的样式，以提升用户体验。
相关技术中，为了实现响应式设计，通常会选择使用CSS语言中的媒体查询功能进行代码开发，但由于CSS语言中所能支持的媒体查询的类型有限，导致在需要进行响应式设计时，在涉及到媒体查询功能不支持的媒体类型时，往往是在每个需要使用的地方通过JavaScript脚本语言实现响应式设计，从而提高了在设计相关代码时的复杂程度，且相关代码往往需要重复编写，导致开发效率低下。
发明内容
本公开实施例至少提供一种页面展示方法、装置、计算机设备及存储介质。
第一方面，本公开实施例提供了一种页面展示方法，包括：
响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
一种可能的实施方式中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合；
在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取历史目标操作对应的第二键值对；
在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述方法还包括：
读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息；
所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对和所述第三键值对，确定第二键值组合；
基于所述第二键值组合，对待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染，包括：
通过所述类选择器调用层叠样式表CSS文档中，所述第二键值组合对应的第二渲染代码进行渲染。
第二方面，本公开实施例还提供一种页面展示装置，包括：
获取模块，用于响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
更新模块，用于基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
渲染模块，用于基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
一种可能的实施方式中，所述获取模块，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合；
在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述获取模块，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
获取历史目标操作对应的第二键值对；
在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述更新模块，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述获取模块，还用于：
读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息；
所述更新模块，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
基于所述第一键值对和所述第三键值对，确定第二键值组合；
基于所述第二键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述渲染模块，在调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染时，用于：
通过所述类选择器调用层叠样式表CSS文档中，所述第二键值组合对应的第二渲染代码进行渲染。
第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
第四方面，本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。
本公开实施例提供的页面展示方法、装置、计算机设备及存储介质，响应于用户执行目标操作，可以获取所述目标操作对应的第一键值对，并基于所述第一键值对，对待展示页面的第一渲染代码进行更新；这样，在基于更新后的所述第一渲染代码对所述待展示页面进行渲染时，可以调用所述第一键值对对应的第二渲染代码进行渲染。通过这种方法，可以使得渲染代码可以重复利用，使得整个页面的渲染代码较为简洁，便于开发人员进行维护。
为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1示出了本公开实施例所提供的一种页面展示方法的流程图；
图2示出了本公开实施例所提供的页面展示方法中，一种对待展示页面的第一渲染代码进行更新的具体方法的流程图；
图3示出了本公开实施例所提供的页面展示方法中，另一种对待展示页面的第一渲染代码进行更新的具体方法的流程图；
图4示出了本公开实施例所提供的页面展示方法中，一种对当前页面的第一渲染代码中的类选择器进行更新的具体方法的流程图；
图5示出了本公开实施例所提供的页面展示方法中，另一种对当前页面的第一渲染代码中的类选择器进行更新的具体方法的流程图；
图6示出了本公开实施例所提供的一种页面展示装置的架构示意图；
图7示出了本公开实施例所提供的一种计算机设备的结构示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
本文中术语“和/或”，仅仅是描述一种关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中术语“至少一种”表示多种中的任意一种或多种中的至少两种的任意组合，例如，包括A、B、C中的至少一种，可以表示包括从A、B和C构成的集合中选择的任意一个或多个元素。
使用CSS语言中的媒体查询功能进行代码开发，能够较为便捷的实现响应式设计，但由于CSS语言中所能支持的媒体查询的类型有限，只能完成特定的媒体查询，比如使用媒体查询功能“@media”查询当前屏幕“screen”，并根据当前屏幕的媒体属性中的最大宽度“max-width”，进行一个响应式设计，使得当当前页面的屏幕宽度小于500px时按照预设的展示效果进行展示，示例性的，所述渲染代码可以如下所示：
上述渲染代码的具体内容为按照背景颜色为浅绿色展示当前页面，当检测到当前屏幕的宽度小于500px时，将当前的背景颜色设置为浅蓝色。
实际应用中，由于自身支持的查询类型有限，使用CSS语言的媒体查询功能无法对一些特殊类型进行查询，比如设备的性能、用户标签等，想要借助CSS语言的媒体查询功能无法实现上述特殊类型的查询以及对应的响应式设计，而若是在每个需要使用的地方通过JavaScript脚本语言实现响应式设计，则提高了在设计相关代码时的复杂程度，且相关代码往往需要重复编写，导致开发效率低下。
本公开提供了一种页面展示方法、装置、计算机设备及存储介质，响应于用户执行目标操作，可以获取所述目标操作对应的第一键值对，并基于所述第一键值对，对待展示页面的第一渲染代码进行更新；这样，在基于更新后的所述第一渲染代码对所述待展示进行渲染时，可以通过所述第一渲染代码中的类选择器，调用所述第一键值对对应的第二渲染代码进行渲染。通过这种方法，可以使得渲染代码可以重复利用，使得整个页面的渲染代码较为简洁，便于开发人员进行维护。
为便于对本实施例进行理解，首先对本公开实施例所公开的一种页面展示方法进行详细介绍，本公开实施例所提供的页面展示方法的执行主体一般为具有一定计算能力的计算机设备，该计算机设备例如包括：终端设备或服务器或其它处理设备，所述终端设备可以为带有显示功能的智能终端设备，例如，可以为智能手机、平板电脑、智能穿戴设备等。在一些可能的实现方式中，该页面展示方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。
参见图1所示，为本公开实施例提供的页面展示方法的流程图，所述方法包括步骤S101～S103，其中：
S101：响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
S102：基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
S103：基于更新后的所述第一渲染代码，调用中与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
以下是对上述步骤的详细介绍。
针对S101，所述目标操作可以是作用在当前页面的用于调整页面展示设置的操作，比如调整页面的字体大小、颜色以及背景颜色等，所述目标操作可以是用于调整待展示页面的操作，所述待展示页面可以是对所述当前页面进行更新后的页面，或者也可以是对与所述当前页面存在关联关系的其他页面进行更新后的页面，比如当前页面为页面1，所述待展示页面可以是响应目标操作后，更新后的页面1；或者，所述待展示页面也可以是在所述页面1上响应目标操作之后，与所述页面1存在关联关系的更新后的页面2。
具体实施中，可以通过为当前页面设置第一监听事件，以监听用户在当前页面是否执行了目标操作，当监听到用户执行了所述目标操作的情况下，即可获取所述目标操作对应的第一键值对。
示例性的，以所述目标操作为对当前页面的字体大小进行调整为例，可以针对页面字体大小设置第一监听事件，以监听用户对当前页面的字体大小设置，并获取对应的第一键值对。
示例性的，可以为当前页面的字体大小设置三个档位，分别为small(小)、middle(中)、large(大)，其中的中字体为当前页面的默认字体大小，当检测到用户将当前页面的字体大小设置为大时，通过预设的第一监听事件完成了对用户这一操作的捕获，并通过JavaScript函数的返回值“"fontSize":"large"”，获取到了所述目标操作对应的第一键值对，其中，所述"fontSize"表征所述目标操作的操作类型为“调节字体大小”，所述"large"表征所述目标操作的操作内容为“将字体调节为大”。
实际应用中，在获取所述目标操作对应的第一键值对之后，可以对所述第一键值对进行判断，判断所述第一键值对是否符合更新条件，在所述第一键值对符合所述更新条件的情况下，再继续执行后续页面展示效果的更新。
一种可能的实施方式中，如图2所示，可以通过以下步骤对所述待展示页面的第一渲染代码进行更新：
S201：获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合。
这里，所述类选择器class为CSS语言中的自带功能，所述类选择器允许以一种独立于超文本标记语言(Hyper Text Markup Language，HTML)文档元素的方式来指定样式。
示例性的，所述HTML文档中的“<html class＝"fontSize-middle">”，可以通过"fontSize-middle"这一原本可能不属于HTML文档的元素进行样式指定，将当前页面的部分/全部内容的样式指定为名为“中字体”的展示样式。
具体实施中，通过读取HTML文档中，与所述目标操作对应的类选择器中的键值组合，即可得到与所述目标操作对应的键值组合。
这里，仍以调节当前页面的字体大小为例，可以读取当前页面的所述HTML文档中的“<html class＝"fontSize-middle">”，从而可以获取到所述类选择器class中与所述目标操作对应的键值组合为"fontSize-middle"。
S202：在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
这里，若所述键值组合与所述第一键值对表示的展示内容不同，由于不同的展示内容对应的渲染代码也不同，则可以确定当前的所述目标操作对应的第一键值对符合更新条件；反之，则确定当前的所述目标操作对应的第一键值对不符合更新条件。
承接上例，获取到的所述目标操作对应的键值组合为"fontSize-middle"，其所表示的展示内容为字体为中；所述第一键值对为“"fontSize":"large"”，其表示的展示内容为字体为大，则由于所述键值组合与所述第一键值对所表示的展示内容不同，则当前的所述第一键值对符合更新条件。
另一种可能的实施方式中，如图3所示，还可以通过以下步骤对所述待展示页面的第一渲染代码进行更新：
S301：获取历史目标操作对应的第二键值对。
这里，每次当检测到用户执行目标操作之后，可以将目标操作对应的第一键值对进行记录，所述获取历史目标操作对应的第二键值对，可以是获取前一次的目标操作所对应的第二键值对。
示例性的，当用户第三次执行目标操作对当前页面的字体大小进行更改时，所述获取历史目标操作对应的第二键值对可以是获取用户第二次执行目标操作时对应的第二键值对。
需要说明的是，当用户第一次执行所述目标操作时，获取的历史目标操作对应的第二键值对可以是当前页面设置的默认的第一键值对。
S302：在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
这里，若所述历史目标操作对应的第二键值对与用户执行的目标操作对应的第一键值对不同，则确定当前的所述目标操作对应的第一键值对符合更新条件；反之，则确定当前的所述目标操作对应的第一键值对不符合更新条件。
进一步的，在确定所述第一键值对符合更新条件之后，可以按照S102和S103对当前页面进行展示。
S102：基于所述第一键值对，对待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，如图4所示，可以通过以下步骤对待展示页面的第一渲染代码中的类选择器进行更新：
S401：基于所述第一键值对，确定所述第一键值对对应的第一键值组合。
S402：基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
这里，可以针对所述第一监听事件中，JavaScript函数的返回值设置第二监听事件，监听到返回值的内容(也即第一键值对)之后，根据得到的所述第一键值对，使用JavaScript函数返回与所述第一键值对对应的第一键值组合。
示例性的，以监听到的内容(第一键值对)为“"fontSize":"middle"”为例，所述第二监听事件中，JavaScript函数的返回值为“"fontSize-middle"”，从而可以确定与所述第一键值对对应的第一键值组合。
进一步的，在确定所述第一键值组合之后，可以使用所述第一键值组合对待展示页面的第一渲染代码中的类选择器进行更新，比如使用所述第一键值组合“"fontSize-middle"”对所述第一渲染代码“<html class＝"fontSize-large">”中的类选择器进行更新，得到更新后的第一渲染代码为“<html class＝"fontSize-middle">”，效果为由“大字体”更新为“中字体”。
实际应用中，通过上述方法即可实现对页面渲染代码的自动更新，且在开发页面代码时，只需要加入类选择器即可实现页面渲染代码的更新和远程调用，在多个页面的应用场景下，仅需要使用CSS语言维护一套CSS文档中的样式即可，通过对所述CSS文档中样式的重复使用，提高代码的利用率，方便了开发人员进行维护。
另一种可能的实施方式中，如图5所示，还可以通过以下步骤对待展示页面的第一渲染代码中的类选择器进行更新：
S501：读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息。
这里，所述当前设备的属性信息可以是当前设备的设备性能信息、用户标签等。
示例性的，以描述的所述当前设备的属性信息为设备性能信息为例，所述第三键值对可以是“"performance":"high"”，其中，所述"performance"表征所述当前设备的属性信息为“设备性能信息”，所述"high"表征所述当前设备的设备性能信息为“高”。
具体的，由于所述当前设备的属性信息往往不会轻易被用户改变，因此可以不相应的设置监听事件进行监听，而是直接读取即可。
示例性的，以读取的所述当前设备的属性信息为设备性能信息为例，可以读取所述当前设备的国际移动设备识别码(International Mobile Equipment Identity，IMEI)，从而可以确定出所述当前设备为机型A，再根据所述机型A对应的性能为高性能，从而可以确定出所述设备性能信息为"high"，也即所述第三键值对为“"performance":"high"”。
S502：基于所述第一键值对和所述第三键值对，确定第二键值组合。
这里，以所述第一键值对为“"fontSize":"large"”、第三键值对为“"performance":"high"”为例，可以按照预设的排列顺序，生成第二键值组合“"fontSize-large performance-high"”。
S503：基于所述第二键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
承接上例，使用所述第二键值组合“"fontSize-large performance-high"”对当前页面的第一渲染代码中的类选择器进行更新，得到更新后的第一渲染代码“<html class＝"fontSize-large performance-high">”，表示当前选择的展示样式为与“大字体”和“高性能机型”对应的展示样式。
这样，在更新渲染代码时参考了多个键值对，使得可以为不同的用户设置更多的展示样式(比如为大字体和高性能的机型展示预设的动画效果)，从而丰富了当前页面的展示效果，实现了类似CSS语言中媒体查询的功能。
S103：基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
这里，所述第二渲染代码为所述CSS文档中，使用CSS语言描述样式的具体展示内容的渲染代码，比如“.fontSize-small.content{font-size：10px}”，表示第一键值组合为“fontSize-small”的具体展示内容为字体大小“font-size”设置为10个像素大小“10px”。
具体的，在调用所述第一键值对对应的第二渲染代码进行渲染时，可以是调用CSS文档中所述第一键值组合对应的第二渲染代码进行渲染；或者，还可以是调用CSS文档中所述第二键值组合对应的第二渲染代码进行渲染。
示例性的，以所述第一键值对为“"fontSize":"small"”为例，所述第一键值对对应的第一键值组合为“fontSize-middle”，则所述HTML文档中的第一渲染代码为“<htmlclass＝"fontSize-middle">”，所述第一键值对对应的第二渲染代码为所述CSS文档中样式为“小字体”的渲染代码“.fontSize-small.content{font-size：10px}”，通过调用该渲染代码，即可完成对当前页面进行渲染。
示例性的，以所述第一键值对为“"fontSize":"large"”、第三键值对为“"performance":"high"为例，对应的第二键值组合为“"fontSize-large performance-high"”，所述第一键值对(和第三键值对)对应的第二渲染代码为所述CSS文档中样式为“大字体且高性能机型”的渲染代码“.fontSize-large.performance-high.animation{动画特效的具体内容}”，其中，所述animation表示展示的具体样式为动画特效，所述“动画特效的具体内容”处对应的代码即为渲染该动画特效所使用的渲染代码，通过调用该渲染代码，即可完成对当前页面进行渲染，展示动画特效。
本公开实施例提供的页面展示方法，在响应于用户执行目标操作，可以获取所述目标操作对应的第一键值对，并基于所述第一键值对，对待展示页面的第一渲染代码进行更新；这样，在基于更新后的所述第一渲染代码对所述待展示页面进行渲染时，可以调用所述第一键值对对应的第二渲染代码进行渲染。通过这种方法，可以使得渲染代码可以重复利用，使得整个页面的渲染代码较为简洁，便于开发人员进行维护。
本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。
基于同一发明构思，本公开实施例中还提供了与页面展示方法对应的页面展示装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面展示方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。
参照图6所示，为本公开实施例提供的一种页面展示装置的架构示意图，所述装置包括：获取模块601、更新模块602、渲染模块603；其中，
获取模块601，用于响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
更新模块602，用于基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
渲染模块603，用于基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
一种可能的实施方式中，所述获取模块601，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合；
在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述获取模块601，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
获取历史目标操作对应的第二键值对；
在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述更新模块602，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述获取模块601，还用于：
读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息；
所述更新模块602，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
基于所述第一键值对和所述第三键值对，确定第二键值组合；
基于所述第二键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述渲染模块603，在调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染时，用于：
通过所述类选择器调用层叠样式表CSS文档中，所述第二键值组合对应的第二渲染代码对所述待展示页面进行渲染。
本公开实施例提供的页面展示装置，响应于用户执行目标操作，可以获取所述目标操作对应的第一键值对，并基于所述第一键值对，对待展示页面的第一渲染代码进行更新；这样，在基于更新后的所述第一渲染代码对所述待展示页面进行渲染时，可以调用所述第一键值对对应的第二渲染代码进行渲染。通过这种方法，可以使得渲染代码可以重复利用，使得整个页面的渲染代码较为简洁，便于开发人员进行维护。
关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。
基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图7所示，为本公开实施例提供的计算机设备700的结构示意图，包括处理器701、存储器702、和总线703。其中，存储器702用于存储执行指令，包括内存7021和外部存储器7022；这里的内存7021也称内存储器，用于暂时存放处理器701中的运算数据，以及与硬盘等外部存储器7022交换的数据，处理器701通过内存7021与外部存储器7022进行数据交换，当计算机设备700运行时，处理器701与存储器702之间通过总线703通信，使得处理器701在执行以下指令：
响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
一种可能的实施方式中，所述处理器701的指令中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合；
在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述处理器701的指令中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取历史目标操作对应的第二键值对；
在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
一种可能的实施方式中，所述处理器701的指令中，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述处理器701的指令中，还包括：
读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息；
所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对和所述第二键值对，确定第二键值组合；
基于所述第二键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
一种可能的实施方式中，所述处理器701的指令中，所述调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染，包括：
通过所述类选择器调用层叠样式表CSS文档中，所述第二键值组合对应的第二渲染代码对所述待展示页面进行渲染。
本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面展示方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。
本公开实施例还提供一种计算机程序产品，该计算机程序产品承载有程序代码，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面展示方法的步骤，具体可参见上述方法实施例，在此不再赘述。
其中，上述计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software Development Kit，SDK)等等。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种页面展示方法，其特征在于，包括：
响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
2.根据权利要求1所述的方法，其特征在于，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取所述第一渲染代码中的类选择器中，与所述目标操作对应的键值组合；
在基于所述键值组合和所述第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
3.根据权利要求1所述的方法，其特征在于，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
获取历史目标操作对应的第二键值对；
在基于所述历史目标操作对应的第二键值对，以及用户执行的目标操作对应的第一键值对，确定符合更新条件的情况下，对所述待展示页面的第一渲染代码进行更新。
4.根据权利要求1所述的方法，其特征在于，所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
5.根据权利要求1所述的方法，其特征在于，所述方法还包括：
读取与所述目标操作关联的第三键值对；其中，所述第三键值对用于描述当前设备的属性信息；
所述基于所述第一键值对，对待展示页面的第一渲染代码进行更新，包括：
基于所述第一键值对和所述第三键值对，确定第二键值组合；
基于所述第二键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
6.根据权利要求5所述的方法，其特征在于，所述调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染，包括：
通过所述类选择器调用层叠样式表CSS文档中，所述第二键值组合对应的第二渲染代码对所述待展示页面进行渲染。
7.一种页面展示装置，其特征在于，包括：
获取模块，用于响应于用户执行目标操作，获取所述目标操作对应的第一键值对；其中，所述第一键值对用于表征所述目标操作的操作类型和操作内容；
更新模块，用于基于所述第一键值对，对待展示页面的第一渲染代码进行更新；
渲染模块，用于基于更新后的所述第一渲染代码，调用与所述第一键值对对应的第二渲染代码对所述待展示页面进行渲染。
8.根据权利要求7所述的装置，其特征在于，所述更新模块，在基于所述第一键值对，对待展示页面的第一渲染代码进行更新时，用于：
基于所述第一键值对，确定所述第一键值对对应的第一键值组合；
基于所述第一键值对对应的第一键值组合，对所述待展示页面的第一渲染代码中的类选择器进行更新。
9.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至6任一所述的页面展示方法的步骤。
10.一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至6任一项所述的页面展示方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110741075.5A CN113378059A (zh) | 2021-06-30 | 2021-06-30 | 一种页面展示方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110741075.5A CN113378059A (zh) | 2021-06-30 | 2021-06-30 | 一种页面展示方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113378059A true CN113378059A (zh) | 2021-09-10 |
Family
ID=77580335
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110741075.5A Pending CN113378059A (zh) | 2021-06-30 | 2021-06-30 | 一种页面展示方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113378059A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113821422A (zh) * | 2021-09-18 | 2021-12-21 | 北京乐学帮网络技术有限公司 | 一种数据处理方法、装置、计算机设备和存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7246134B1 (en) * | 2004-03-04 | 2007-07-17 | Sun Microsystems, Inc. | System and methods for tag library generation |
| US7895514B1 (en) * | 2006-10-23 | 2011-02-22 | Adobe Systems Incorporated | Systems and methods for solving rendering compatibility problems across electronic document viewers |
| CN106503212A (zh) * | 2016-10-27 | 2017-03-15 | 中企动力科技股份有限公司 | 一种网页元素样式的设置方法及装置 |
| CN108920496A (zh) * | 2018-05-23 | 2018-11-30 | 北京奇艺世纪科技有限公司 | 一种渲染方法及装置 |
| CN111142863A (zh) * | 2019-12-19 | 2020-05-12 | 深圳市金证科技股份有限公司 | 一种页面生成的方法及装置 |
| CN113031946A (zh) * | 2021-02-24 | 2021-06-25 | 北京沃东天骏信息技术有限公司 | 一种渲染页面组件的方法和装置 |
| CN113051503A (zh) * | 2021-03-12 | 2021-06-29 | 平安银行股份有限公司 | 浏览器页面渲染方法、装置、电子设备及存储介质 |
-
2021
- 2021-06-30 CN CN202110741075.5A patent/CN113378059A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7246134B1 (en) * | 2004-03-04 | 2007-07-17 | Sun Microsystems, Inc. | System and methods for tag library generation |
| US7895514B1 (en) * | 2006-10-23 | 2011-02-22 | Adobe Systems Incorporated | Systems and methods for solving rendering compatibility problems across electronic document viewers |
| CN106503212A (zh) * | 2016-10-27 | 2017-03-15 | 中企动力科技股份有限公司 | 一种网页元素样式的设置方法及装置 |
| CN108920496A (zh) * | 2018-05-23 | 2018-11-30 | 北京奇艺世纪科技有限公司 | 一种渲染方法及装置 |
| CN111142863A (zh) * | 2019-12-19 | 2020-05-12 | 深圳市金证科技股份有限公司 | 一种页面生成的方法及装置 |
| CN113031946A (zh) * | 2021-02-24 | 2021-06-25 | 北京沃东天骏信息技术有限公司 | 一种渲染页面组件的方法和装置 |
| CN113051503A (zh) * | 2021-03-12 | 2021-06-29 | 平安银行股份有限公司 | 浏览器页面渲染方法、装置、电子设备及存储介质 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113821422A (zh) * | 2021-09-18 | 2021-12-21 | 北京乐学帮网络技术有限公司 | 一种数据处理方法、装置、计算机设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10726195B2 (en) | Filtered stylesheets | |
| CN110968808B (zh) | 一种实现网页主题更新的方法及装置 | |
| CN107885792B (zh) | 网页文章显示方法、装置及*** | |
| US20120236004A1 (en) | Information output apparatus and information output method and recording medium | |
| CN112069341A (zh) | 背景图片生成及搜索结果展示方法、装置、设备和介质 | |
| CN112632936A (zh) | 一种电子表格的生成方法、***及相关装置 | |
| CN113504964B (zh) | 页面组件高度确定方法、装置、计算机设备和存储介质 | |
| CN113378059A (zh) | 一种页面展示方法、装置、计算机设备及存储介质 | |
| WO2017095403A1 (en) | Creation of component templates | |
| CN113849713A (zh) | 一种搜索结果展现方法、装置、计算机设备及存储介质 | |
| EP1204030A1 (en) | Extending hypermedia documents by adding tagged attributes | |
| CN111708969A (zh) | 一种网页的配置方法、装置、电子设备及存储介质 | |
| CN113468450A (zh) | 一种页面控制方法及装置 | |
| US20080180413A1 (en) | Method, system, and program product for controlling grid lines in a user interface | |
| CN116383545B (zh) | 一种网页报表模板的生成方法、装置、设备和介质 | |
| CN115438282B (zh) | 页面中元素的定位方法及装置 | |
| CN112379801A (zh) | 一种页面展示方法、装置和电子设备 | |
| CN114090165A (zh) | 页面组件展示位置调整方法、装置、计算机设备及介质 | |
| Di Yu | Time Enclosures and the Scales of Optimisation: From Imperial Temporality to the Digital Milieu | |
| CN115270031A (zh) | 一种基于页面的视觉特效创建方法、***、设备及介质 | |
| CN113486271A (zh) | 一种图像主色调的确定方法、装置以及电子终端 | |
| CN114003221A (zh) | 页面开发处理方法、装置、设备及存储介质 | |
| CN113918194A (zh) | 一种页面组件的显示方法、装置、电子设备及存储介质 | |
| CN111753234A (zh) | 一种数据可视化方法、装置、服务器和介质 | |
| CN116185548A (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 | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Douyin Vision Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: Tiktok vision (Beijing) Co.,Ltd. Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant after: Tiktok vision (Beijing) Co.,Ltd. Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing. Applicant before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. |