CN115061688A

CN115061688A - 一种页面效果展示方法、计算设备及存储介质

Info

Publication number: CN115061688A
Application number: CN202210985852.5A
Authority: CN
Inventors: 施健伟
Original assignee: Uniontech Software Technology Co Ltd
Current assignee: Uniontech Software Technology Co Ltd
Priority date: 2022-08-17
Filing date: 2022-08-17
Publication date: 2022-09-16
Anticipated expiration: 2042-08-17
Also published as: CN115061688B

Abstract

本发明涉及网页开发领域，并公开了一种页面效果展示方法、计算设备及存储介质，并包括步骤：响应于页面效果展示请求，获取用户当前选中的代码文件；根据代码文件，确定代码文件所属的网页；根据网页及代码文件，确定代码文件在网页对应的文档对象模型中的对应节点，并将对应节点确定为待展示的目标节点；解析目标节点的代码，获取目标节点的页面样式；根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示。本发明在用户想要查看页面样式时，不需要撰写代码在网页中查看，通过解析需要展示的目标节点的代码，生成展示文件，实现高效、轻量化的对要展示的节点的页面样式进行呈现，不需要浏览器对网页代码进行解析。

Description

一种页面效果展示方法、计算设备及存储介质

技术领域

本发明涉及网页开发领域，特别涉及一种页面效果展示方法、计算设备及存储介质。

背景技术

随着计算机技术的发展，人们越来越多的访问网页获取各种数据和信息，因此对网页的开发和测试就显得尤为重要。在对网页进行开发时，需要不断的查看页面的生成效果和样式，判断是否有不合适的地方进行相应的调整，更好的对网页进行设计和配置。

现有技术中，为了查看网页中某个组件的效果，需要撰写代码再引入该组件的代码，通过浏览器呈现网页查看效果；这种查看组件效果的方式极为不便，开发人员为了查看某个组件是否符合预期的显示效果，每次都需要撰写代码，在浏览器中加载组件。

为此，需要一种新的页面效果展示方法。

发明内容

为此，本发明提供一种页面效果展示方法，以力图解决或者至少缓解上面存在的问题。

根据本发明的一个方面，提供一种页面效果展示方法，适于在计算设备中执行，方法包括步骤：响应于页面效果展示请求，获取用户当前选中的代码文件；根据代码文件，确定代码文件所属的网页；根据网页及代码文件，确定代码文件在网页对应的文档对象模型中的对应节点，并将对应节点确定为待展示的目标节点；解析目标节点的代码，获取目标节点的页面样式；根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示。

可选地，在根据本发明的方法中，解析目标节点的代码，获取目标节点的页面样式包括步骤：根据预设样式字段遍历目标节点的代码，确定与预设样式字段匹配的代码；根据与预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式。

可选地，在根据本发明的方法中，页面样式包括行内样式，预设样式字段包括行内样式字段，根据与预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：当遍历到与行内样式字段匹配的代码，则从该代码所在代码行确定样式，得到作为页面样式的行内样式。

可选地，在根据本发明的方法中,页面样式包括内嵌样式，预设样式字段包括内嵌样式字段，根据与预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：当遍历到与内嵌样式字段匹配的代码，则根据该代码确定内嵌样式在代码中的起始位置和结束位置；根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。

可选地，在根据本发明的方法中，页面样式包括外部样式，预设样式字段包括外部样式字段，根据与预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：当遍历到与外部样式字段匹配的代码，则根据该代码获取外部样式文件；根据外部样式文件确定作为页面样式的外部样式。

可选地，在根据本发明的方法中，根据目标节点的页面样式生成展示文件，包括步骤：根据目标节点中包括的页面样式的代码按照预设格式进行存储，得到展示文件。

可选地，在根据本发明的方法中，解析目标节点的代码，获取目标节点的页面样式包括步骤：根据预设事件字段解析目标节点的代码，获取目标节点中定义的一个或多个事件；判断目标节点中定义的每个事件是否完成注册，并将完成注册的事件作为注册事件，得到一个或多个注册事件。

可选地，在根据本发明的方法中，根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示包括步骤：将目标节点中的一个或多个注册事件在展示文件中进行存储，得到可操作的展示文件。

根据本发明的另一个方面，提供了一种计算设备，包括：一个或多个处理器；存储器；以及一个或多个程序，其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据本发明的页面效果展示方法的指令。

根据本发明的再一个方面，提供了一种存储一个或多个程序的计算机可读存储介质，一个或多个程序包括指令，指令当由计算设备执行时，使得计算设备执行根据本发明的页面效果展示方法。

本发明公开了一种页面效果展示方法，适于在计算设备中执行。方法包括步骤：响应于页面效果展示请求，获取用户当前选中的代码文件；根据代码文件，确定代码文件所属的网页；根据网页及代码文件，确定代码文件在网页对应的文档对象模型中的对应节点，并将对应节点确定为待展示的目标节点；解析目标节点的代码，获取目标节点的页面样式；根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示。本发明在用户想要查看页面样式时，不需要撰写代码在网页中查看，通过解析需要展示的目标节点的代码，生成展示文件，实现高效、轻量化的对要展示的节点的页面样式进行呈现，不需要浏览器对网页代码进行解析。

附图说明

为了实现上述以及相关目的，本文结合下面的描述和附图来描述某些说明性方面，这些方面指示了可以实践本文所公开的原理的各种方式，并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述，本发明公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开，相同的附图标记通常指代相同的部件或元素。

图1示出了根据本发明一个示范性实施例的网页节点架构的示意图；

图2示出了根据本发明一个示范性实施例的计算设备200的结构框图；

图3示出了根据本发明一个示范性实施例的页面效果展示方法300的流程示意图；

图4示出了根据本发明一个示范性实施例的展示文件展示页面效果的示意图；

图5示出了一个示范性实施例的网页展示页面效果的示意图；

图6示出了根据本发明一个示范性实施例的展示文件展示注册事件的示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。

本发明中当用户撰写网页中某个组件的代码，想要对这段代码进行展示时，可确定该组件在网页对应的文档对象模型中所属节点，将该节点作为目标节点，将该目标节点的代码进行解析，对页面效果进行展示。图1示出了根据本发明一个示范性实施例的网页节点架构的示意图。如图1所示，该网页的架构以文档对象模型的方式呈现，网页的架构可描述为dom树，树形结构的每个节点表示网页中一个HTML标签或标签内的文本项。该网页的文档对象模型中包括一个根节点，根节点下包括第一节点和第三节点，第一节点下包括第二节点，第三节点下包括第四节点和第五节点。图1所示的网页节点架构仅为示例性的，本发明对网页节点架构中节点数目及构建方式不做限制。

图2示出了根据本发明一个示范性实施例的计算设备200的结构框图。如图2所示，在基本配置202中，计算设备200典型地包括系统存储器206和一个或者多个处理器204。存储器总线208可以用于在处理器204和系统存储器206之间的通信。

取决于期望的配置，处理器204可以是任何类型的处理器，包括但不限于：微处理器（µP）、微控制器（µC）、数字信息处理器（DSP）或者它们的任何组合。处理器204可以包括诸如一级高速缓存210和二级高速缓存212之类的一个或者多个级别的高速缓存、处理器核心214和寄存器216。示例的处理器核心214可以包括运算逻辑单元（ALU）、浮点数单元（FPU）、数字信号处理核心（DSP核心）或者它们的任何组合。示例的存储器控制器218可以与处理器204一起使用，或者在一些实现中，存储器控制器218可以是处理器204的一个内部部分。

取决于期望的配置，系统存储器206可以是任意类型的存储器，包括但不限于：易失性存储器（诸如RAM）、非易失性存储器（诸如ROM、闪存等）或者它们的任何组合。系统存储器206可以包括操作系统220、一个或者多个程序222以及程序数据228。在一些实施方式中，程序222可以布置为在操作系统上由一个或者多个处理器204利用程序数据228执行根据本发明的方法300的指令223。

计算设备200还可以包括储存接口总线234。储存接口总线234实现了从储存设备232（例如，可移除储存器236和不可移除储存器238）经由总线/接口控制器230到基本配置202的通信。操作系统220、程序222以及数据224的至少一部分可以存储在可移除储存器236和/或不可移除储存器238上，并且在计算设备200上电或者要执行程序222时，经由储存接口总线234而加载到系统存储器206中，并由一个或者多个处理器204来执行。

计算设备200还可以包括有助于从各种接口设备（例如，输出设备242、外围接口244和通信设备246）到基本配置202经由总线/接口控制器230的通信的接口总线240。示例的输出设备242包括图像处理单元248和音频处理单元250。它们可以被配置为有助于经由一个或者多个A/V端口252与诸如显示器或者扬声器之类的各种外部设备进行通信。外围接口244可以包括串行接口控制器254和并行接口控制器256，它们可以被配置为有助于经由一个或者多个I/O端口258和诸如输入设备（例如，键盘、鼠标、笔、语音输入设备、触摸输入设备）或者其他外设（例如打印机、扫描仪等）之类的外部设备进行通信。示例的通信设备246可以包括网络控制器260，其可以被布置为以便经由一个或者多个通信端口264与一个或者多个其他计算设备262通过网络通信链路的通信。

网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块，并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号，它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例，通信介质可以包括诸如有线网络或者专线网络之类的有线介质，以及诸如声音、射频（RF）、微波、红外（IR）或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。

在根据本发明的计算设备200中，程序222包括页面效果展示方法300的多条程序指令，这些程序指令可以指示处理器204执行本发明的计算设备200中运行的页面效果展示方法300中的部分步骤，以便计算设备200中的各部分通过执行本发明的页面效果展示方法300来实现对页面效果进行展示。

计算设备200可以实现为服务器，例如文件服务器、数据库、服务器、应用程序服务器等，这些电子设备可以是诸如个人数字助理（PDA）、无线网络浏览设备、应用专用设备、或者可以包括上面任何功能的混合设备。可以实现为包括桌面计算机和笔记本计算机配置的个人计算机，也在一些实施例中，计算设备200被配置为执行页面效果展示方法300的指令。

图3示出了根据本发明一个示范性实施例的页面效果展示方法300的流程示意图。如图3所示，首先执行步骤310，响应于页面效果展示请求，获取用户当前选中的代码文件。

根据本发明的一个实施例，用户可通过选中需要展示的代码，并双击实现触发页面效果展示请求，对选中的代码进行效果展示；获取代码文件时将用户所选中的代码所属的文件作为用户选中的代码文件。本发明对页面效果展示请求的生成方式不做限制。用户还可以文件管理器的页面中直接选中一份代码文件，将其作为需要进行页面效果展示的代码文件，触发页面效果展示请求。

确定待展示的目标节点时，获取用户当前选中的代码文件。

随后，执行步骤320，根据代码文件，确定代码文件所属的网页。

接着，执行步骤330，根据网页及代码文件，确定代码文件在网页对应文档对象模型中对应的节点，并将对应节点确定为待展示的目标节点。

根据本发明的一个实施例，当用户选中图1中第二节点中的代码，需要对其进行展示。当接收到页面效果展示请求，确定该代码文件所属的网页，再根据所属的网页及代码文件确定代码文件在文档对象模型中对应的节点为第二节点，将第二节点作为目标节点。

随后，执行步骤340，解析目标节点的代码，获取目标节点的页面样式；具体的：根据预设样式字段遍历目标节点的代码，确定与预设样式字段匹配的代码，根据与预设样式字段匹配的代码确定样式，作为目标节点的页面样式。

为了对目标节点进行展示，需要确定目标节点中包括的所有页面样式，将这些样式进行加载和展示。目标节点中包括一种或多种页面样式，每种页面样式均在代码中以对应样式字段进行设置。通过在目标节点的代码中检索样式字段，能够确定目标节点中包括的页面样式。计算设备中预先存储有样式字段，用于检索匹配页面样式，开发人员在代码中用于设置页面样式的样式字段，与预先存储用于检索匹配的样式字段相同。

根据本发明的一个实施例，页面样式包括行内样式、内嵌样式和外部样式，预设样式字段包括行内样式字段、内嵌样式字段和外部样式字段。根据与预设样式字段匹配的代码确定样式，作为目标节点的页面样式包括步骤：当遍历到与行内样式字段匹配的代码，则从该代码所在代码行确定样式，得到作为页面样式的行内样式，从而从目标节点的代码中检索出行内样式。

行内样式是指通过标签的style属性来设置元素的样式。行内样式的预设样式字段为“style=”。根据本发明的一个实施例，目标节点中包括代码：

<div id="exp" class="cla" style="font-size: 14px;"><div>。

当使用预设样式字段“style=”进行检索匹配时，匹配到相应的代码“style=”，其所在的代码行为：

<div id="exp" class="cla" style="font-size: 14px;"><div>。

从该代码行确定样式font-size:14px为行内样式，将该行内样式作为节点的页面样式。

根据本发明的一个实施例，确定页面样式中的内嵌样式时，当遍历到与内嵌样式字段匹配的代码，则根据该代码确定内嵌样式在代码中的起始位置和结束位置，再根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。

内嵌样式是指写在HTML文件里面，是把CSS代码集中写在HTML文件的头部，即<head></head>标签里面，用<style></style>标签注明的样式。内嵌样式的预设样式字段为<style>和</style>。根据本发明的一个实施例，目标节点中包括代码：

<head>

<style>

p1{font-size:14px;}

</style>

</head>。

当使用预设样式字段<style>和</style>进行检索匹配时，遍历到代码中包括<style>和</style>，则将<style>所在的位置确定为内嵌样式在代码中的起始位置，将</style>所在的位置确定为内嵌样式在代码中的结束位置，再根据内嵌样式在代码中的起始位置和结束位置从代码中提取得到内嵌样式为font-size:14px，将该内嵌样式作为节点的页面样式。

根据本发明的一个实施例，确定页面样式中的外部样式时，当遍历到与外部样式字段匹配的代码，则根据该代码获取外部样式文件，再根据外部样式文件确定作为页面样式的外部样式。

外部样式是指将样式放在一个或多个外部样式表文件中，通过link标签将外部样式表文件引入网页的样式。外部样式表文件可实现为.css文件。外部样式字段包括@import、<link/>。根据本发明的一个实施例，目标节点中包括代码：

当使用外部样式字段进行检索匹配时，遍历到代码中包括<link/>，则根据该代码获取外部样式文件；其中，href属性指定了外部样式表文件的路径，根据href属性能够获取外部样式表文件：

p1{font-size:14px;}。

根据外部样式表文件确定外部样式为font-size:14px，将外部样式作为页面样式的外部样式。

随后，执行步骤350，根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示；具体的：根据目标节点中包括的页面样式的代码按照预设格式进行存储，得到展示文件。

根据本发明的一个实施例，展示文件可实现为svg文件，svg文件为可缩放的矢量图形，将页面样式的代码封装到svg文件中，即可实现在展示文件中设置要展示的页面样式。当接受到页面效果展示请求，生成展示文件并打开，即可呈现页面样式。

为了实现在svg文件中加入页面样式的代码，以展示页面样式，需要设置页面样式在svg文件中插入的预设格式。预设格式包括设置svg文件的图片属性，并分类存储页面样式。svg文件的图片属性包括长度、宽度及命名空间等。

根据本发明的一个实施例，展示文件的一个实例如下所示：

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</style>

</svg>。

其中，<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1"设置了svg文件的长度和宽度等图片属性，xmlns=http://www.w3.org/2000/svg、xmlns:xlink="http://www.w3.org/1999/xlink">设置了svg文件的命名空间。

位置用于分类存储目标节点的页面样式，包括行内样式、内嵌样式和外部样式。

根据本发明的一个实施例，本发明中解析目标节点的代码，获取目标节点的页面样式还包括步骤：根据预设事件字段解析目标节点的代码，获取目标节点中定义的一个或多个事件，判断目标节点中定义的每个事件是否完成注册，并将完成注册的事件作为注册事件，得到一个或多个注册事件。

事件是指用户的行为或元素的状态，当事件被触发时，网页会对被触发的事件进行反应，执行某些操作。事件的类型包括鼠标点击、鼠标移动等。本发明对网页中所定义及注册的事件的数量及类型不做限制。为了能够对网页的效果进行全面的呈现，对网页代码中所注册的事件在展示文件中进行设置，以便测试网页功能。

根据本发明的一个实施例，定义时间的预设事件字段包括：

getElementById()

getElemen tByClassName()

getElementByTagName()

getElementByName()

querySelector()

querySelectorAll()。

当检测到目标节点的代码中包括上述预设事件字段时，可确定目标节点中定义了事件。根据本发明的一个实施例，目标节点的代码中包括如下代码：

document.getElementById('exp').addEventListener('click',function(){})。

当根据getElementById()字段对代码进行匹配检测时，可判断上述代码中定义了事件。随后确定该事件是否进行了注册。

根据本发明的一个实施例，对事件进行注册可通过on+type或addEventListeners(“type”,)的方式，当所定义的事件通过上述任意一种方式进行了注册，即将该定义的事件作为注册事件。

当目标节点中定义并注册了事件，在生成展示文件时将注册事件加入到展示文件中。本发明中根据目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示还包括步骤：将目标节点中的一个或多个注册事件在展示文件中进行存储，得到可操作的展示文件。

根据本发明的一个实施例，展示文件中以预设格式设置有存储展示事件的位置，展示文件的一个实例如下所示：

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

</style>

</svg>。

将展示事件即可存储到处，以便打开展示文件后，对注册的事件进行测试。

根据本发明的一个实施例，一个根据代码文件生成的展示文件svg1如下所示：

xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink">

#exp {

font-size: 20px;

background-color: blueviolet;

height:40px;

width:40px;

border-radius:50%;

text-align:center;

}

</style>

</div>

</foreignObject>

</svg>。

其中存储有页面样式如下所示：

{

font-size: 20px;

background-color: blueviolet;

height:40px;

width:40px;

border-radius:50%;

text-align:center;

}。

并存储有注册事件：

注册事件为js事件：

var exp = document.querySelector('#exp')

exp.addEventListener('click', function () {

alert('11')

})。

图4示出了根据本发明一个示范性实施例的展示文件展示页面效果的示意图。

如图4所示，图4示出了展示文件svg1的展示效果图。

图5示出了一个示范性实施例的网页展示页面效果的示意图。可以看到本发明中生成展示文件对页面效果进行展示的效果，与撰写网页代码构建网页进行展示的效果相同。

展示文件svg1还可对注册事件进行测试。

图6示出了根据本发明一个示范性实施例的展示文件展示注册事件的示意图。如图6所示，当用户点击svg图中的元素，触发事件，使页面生成弹窗，显示：“此页面显示11”。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。

本领域那些技术人员应当理解在本文所公开的示例中的设备的模块或单元或组间可以布置在如该实施例中所描述的设备中，或者可替换地可以定位在与该示例中的设备不同的一个或多个设备中。前述示例中的模块可以组合为一个模块或者此外可以分成多个子模块。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组间组合成一个模块或单元或组间，以及此外可以把它们分成多个子模块或子单元或子组间。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。

此外，所述实施例中的一些在此被描述成可以由计算机系统的处理器或者由执行所述功能的其它装置实施的方法或方法元素的组合。因此，具有用于实施所述方法或方法元素的必要指令的处理器形成用于实施该方法或方法元素的装置。此外，装置实施例的在此所述的元素是如下装置的例子：该装置用于实施由为了实施该发明的目的的元素所执行的功能。

这里描述的各种技术可结合硬件或软件，或者它们的组合一起实现。从而，本发明的方法和设备，或者本发明的方法和设备的某些方面或部分可采取嵌入有形媒介，例如软盘、CD-ROM、硬盘驱动器或者其它任意机器可读的存储介质中的程序代码(即指令)的形式，其中当程序被载入诸如计算机之类的机器，并被所述机器执行时，所述机器变成实践本发明的设备。

在程序代码在可编程计算机上执行的情况下，计算设备一般包括处理器、处理器可读的存储介质(包括易失性和非易失性存储器和/或存储元件)，至少一个输入装置，和至少一个输出装置。其中，存储器被配置用于存储程序代码；处理器被配置用于根据该存储器中存储的所述程序代码中的指令，执行本发明的页面效果展示方法。

以示例而非限制的方式，计算机可读介质包括计算机存储介质和通信介质。计算机可读介质包括计算机存储介质和通信介质。计算机存储介质存储诸如计算机可读指令、数据结构、程序模块或其它数据等信息。通信介质一般以诸如载波或其它传输机制等已调制数据信号来体现计算机可读指令、数据结构、程序模块或其它数据，并且包括任何信息传递介质。以上的任一种的组合也包括在计算机可读介质的范围之内。

如在此所使用的那样，除非另行规定，使用序数词“第一”、“第二”、“第三”等等来描述普通对象仅仅表示涉及类似对象的不同实例，并且并不意图暗示这样被描述的对象必须具有时间上、空间上、排序方面或者以任意其它方式的给定顺序。

尽管根据有限数量的实施例描述了本发明，但是受益于上面的描述，本技术领域内的技术人员明白，在由此描述的本发明的范围内，可以设想其它实施例。此外，应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的。

Claims

1.一种页面效果展示方法，适于在计算设备中执行，所述方法包括步骤：

响应于页面效果展示请求，获取用户当前选中的代码文件；

根据所述代码文件，确定所述代码文件所属的网页；

根据所述网页及所述代码文件，确定所述代码文件在所述网页对应的文档对象模型中的对应节点，并将所述对应节点确定为待展示的目标节点；

解析所述目标节点的代码，获取所述目标节点的页面样式；

根据所述目标节点的页面样式生成展示文件，对目标节点的页面效果进行展示。

2.如权利要求1所述的方法，其中，所述解析所述目标节点的代码，获取所述目标节点的页面样式包括步骤：

根据预设样式字段遍历所述目标节点的代码，确定与所述预设样式字段匹配的代码；

根据与所述预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式。

3.如权利要求2所述的方法，其中，所述页面样式包括行内样式，所述预设样式字段包括行内样式字段，所述根据与所述预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：

当遍历到与所述行内样式字段匹配的代码，则从该代码所在代码行确定样式，得到作为所述页面样式的行内样式。

4.如权利要求2所述的方法，其中，所述页面样式包括内嵌样式，所述预设样式字段包括内嵌样式字段，所述根据与所述预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：

当遍历到与所述内嵌样式字段匹配的代码，则根据该代码确定所述内嵌样式在代码中的起始位置和结束位置；

根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。

5.如权利要求2所述的方法，其中，所述页面样式包括外部样式，所述预设样式字段包括外部样式字段，所述根据与所述预设样式字段匹配的代码确定样式，作为所述目标节点的页面样式包括步骤：

当遍历到与所述外部样式字段匹配的代码，则根据该代码获取外部样式文件；

根据所述外部样式文件确定作为页面样式的外部样式。

6.如权利要求1-5中任一项所述的方法，其中，根据所述目标节点的页面样式生成展示文件，包括步骤：

将所述目标节点中包括的页面样式的代码按照预设格式进行存储，得到展示文件。

7.如权利要求1所述的方法，其中，所述解析所述目标节点的代码，获取所述目标节点的页面样式包括步骤：

根据预设事件字段解析所述目标节点的代码，获取所述目标节点中定义的一个或多个事件；

判断目标节点中定义的每个事件是否完成注册，并将完成注册的事件作为注册事件，得到一个或多个注册事件。

8.如权利要求7所述的方法，其中，根据所述目标节点的页面样式生成展示文件，包括步骤：

将所述目标节点中的一个或多个注册事件在所述展示文件中进行存储，得到可操作的展示文件。

9.一种计算设备，包括：

一个或多个处理器；

存储器；以及

一个或多个程序，所述一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序包括用于执行根据权利要求1-8中任一项所述的方法的指令。

10.一种存储一个或多个程序的计算机可读存储介质，所述一个或多个程序包括指令，所述指令当由计算设备执行时，使得所述计算设备执行根据权利要求1-8中任一项所述的方法。