本发明涉及网页开发领域,并公开了一种页面效果展示方法、计算设备及存储介质,并包括步骤:响应于页面效果展示请求,获取用户当前选中的代码文件;根据代码文件,确定代码文件所属的网页;根据网页及代码文件,确定代码文件在网页对应的文档对象模型中的对应节点,并将对应节点确定为待展示的目标节点;解析目标节点的代码,获取目标节点的页面样式;根据目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示。本发明在用户想要查看页面样式时,不需要撰写代码在网页中查看,通过解析需要展示的目标节点的代码,生成展示文件,实现高效、轻量化的对要展示的节点的页面样式进行呈现,不需要浏览器对网页代码进行解析。
1.一种页面效果展示方法,适于在计算设备中执行,所述方法包括步骤:响应于页面效果展示请求,获取用户当前选中的代码文件;
根据所述网页及所述代码文件,确定所述代码文件在所述网页对应的文档对象模型中的对应节点,并将所述对应节点确定为待展示的目标节点;
根据预设样式字段遍历所述目标节点的代码,确定与所述预设样式字段匹配的代码;
根据与所述预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式;
根据所述目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示。
2.如权利要求1所述的方法,其中,所述页面样式包括行内样式,所述预设样式字段包括行内样式字段,所述根据与所述预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式包括步骤:当遍历到与所述行内样式字段匹配的代码,则从该代码所在代码行确定样式,得到作为所述页面样式的行内样式。
3.如权利要求1所述的方法,其中,所述页面样式包括内嵌样式,所述预设样式字段包括内嵌样式字段,所述根据与所述预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式还包括步骤:当遍历到与所述内嵌样式字段匹配的代码,则根据该代码确定所述内嵌样式在代码中的起始位置和结束位置;
根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。
4.如权利要求1所述的方法,其中,所述页面样式包括外部样式,所述预设样式字段包括外部样式字段,所述根据与所述预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式还包括步骤:当遍历到与所述外部样式字段匹配的代码,则根据该代码获取外部样式文件;
5.如权利要求1‑4中任一项所述的方法,其中,根据所述目标节点的页面样式生成展示文件包括步骤:将所述目标节点中包括的页面样式的代码按照预设格式进行存储,得到展示文件。
根据预设事件字段解析所述目标节点的代码,获取所述目标节点中定义的一个或多个事件;
判断目标节点中定义的每个事件是否完成注册,并将完成注册的事件作为注册事件,得到一个或多个注册事件。
7.如权利要求6所述的方法,其中,根据所述目标节点的页面样式生成展示文件,还包括步骤:将所述目标节点中的一个或多个注册事件在所述展示文件中进行存储,得到可操作的展示文件。
一个或多个装置,所述一个或多个装置包括用于执行根据权利要求1‑7中任一项所述的方法的指令。
9.一种存储一个或多个程序的计算机可读存储介质,所述一个或多个程序包括指令,所述指令当由计算设备执行时,使得所述计算设备执行根据权利要求1‑7中任一项所述的方法。
一种页面效果展示方法、计算设备及存储介质
技术领域
[0001] 本发明涉及网页开发领域,特别涉及一种页面效果展示方法、计算设备及存储介质。
背景技术
[0002] 随着计算机技术的发展,人们越来越多的访问网页获取各种数据和信息,因此对网页的开发和测试就显得尤为重要。在对网页进行开发时,需要不断的查看页面的生成效果和样式,判断是否有不合适的地方进行相应的调整,更好的对网页进行设计和配置。
[0003] 现有技术中,为了查看网页中某个组件的效果,需要撰写代码再引入该组件的代码,通过浏览器呈现网页查看效果;这种查看组件效果的方式极为不便,开发人员为了查看某个组件是否符合预期的显示效果,每次都需要撰写代码,在浏览器中加载组件。
[0004] 为此,需要一种新的页面效果展示方法。
发明内容
[0005] 为此,本发明提供一种页面效果展示方法,以力图解决或者至少缓解上面存在的问题。
[0006] 根据本发明的一个方面,提供一种页面效果展示方法,适于在计算设备中执行,方法包括步骤:响应于页面效果展示请求,获取用户当前选中的代码文件;根据代码文件,确定代码文件所属的网页;根据网页及代码文件,确定代码文件在网页对应的文档对象模型中的对应节点,并将对应节点确定为待展示的目标节点;解析目标节点的代码,获取目标节点的页面样式;根据目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示。
[0007] 可选地,在根据本发明的方法中,解析目标节点的代码,获取目标节点的页面样式包括步骤:根据预设样式字段遍历目标节点的代码,确定与预设样式字段匹配的代码;根据与预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式。
[0008] 可选地,在根据本发明的方法中,页面样式包括行内样式,预设样式字段包括行内样式字段,根据与预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式包括步骤:当遍历到与行内样式字段匹配的代码,则从该代码所在代码行确定样式,得到作为页面样式的行内样式。
[0009] 可选地,在根据本发明的方法中,页面样式包括内嵌样式,预设样式字段包括内嵌样式字段,根据与预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式包括步骤:当遍历到与内嵌样式字段匹配的代码,则根据该代码确定内嵌样式在代码中的起始位置和结束位置;根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。
[0010] 可选地,在根据本发明的方法中,页面样式包括外部样式,预设样式字段包括外部样式字段,根据与预设样式字段匹配的代码确定样式,作为所述目标节点的页面样式包括步骤:当遍历到与外部样式字段匹配的代码,则根据该代码获取外部样式文件;根据外部样式文件确定作为页面样式的外部样式。
[0011] 可选地,在根据本发明的方法中,根据目标节点的页面样式生成展示文件,包括步骤:根据目标节点中包括的页面样式的代码按照预设格式进行存储,得到展示文件。
[0012] 可选地,在根据本发明的方法中,解析目标节点的代码,获取目标节点的页面样式包括步骤:根据预设事件字段解析目标节点的代码,获取目标节点中定义的一个或多个事件;判断目标节点中定义的每个事件是否完成注册,并将完成注册的事件作为注册事件,得到一个或多个注册事件。
[0013] 可选地,在根据本发明的方法中,根据目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示包括步骤:将目标节点中的一个或多个注册事件在展示文件中进行存储,得到可操作的展示文件。
[0014] 根据本发明的另一个方面,提供了一种计算设备,包括:一个或多个处理器;存储器;以及一个或多个程序,其中一个或多个程序存储在存储器中并被配置为由一个或多个处理器执行,一个或多个程序包括用于执行根据本发明的页面效果展示方法的指令。
[0015] 根据本发明的再一个方面,提供了一种存储一个或多个程序的计算机可读存储介质,一个或多个程序包括指令,指令当由计算设备执行时,使得计算设备执行根据本发明的页面效果展示方法。
[0016] 本发明公开了一种页面效果展示方法,适于在计算设备中执行。方法包括步骤:响应于页面效果展示请求,获取用户当前选中的代码文件;根据代码文件,确定代码文件所属的网页;根据网页及代码文件,确定代码文件在网页对应的文档对象模型中的对应节点,并将对应节点确定为待展示的目标节点;解析目标节点的代码,获取目标节点的页面样式;根据目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示。本发明在用户想要查看页面样式时,不需要撰写代码在网页中查看,通过解析需要展示的目标节点的代码,生成展示文件,实现高效、轻量化的对要展示的节点的页面样式进行呈现,不需要浏览器对网页代码进行解析。
附图说明
[0017] 为了实现上述以及相关目的,本文结合下面的描述和附图来描述某些说明性方面,这些方面指示了可以实践本文所公开的原理的各种方式,并且所有方面及其等效方面旨在落入所要求保护的主题的范围内。通过结合附图阅读下面的详细描述,本发明公开的上述以及其它目的、特征和优势将变得更加明显。遍及本公开,相同的附图标记通常指代相同的部件或元素。
[0018] 图1示出了根据本发明一个示范性实施例的网页节点架构的示意图;
[0019] 图2示出了根据本发明一个示范性实施例的计算设备200的结构框图;
[0020] 图3示出了根据本发明一个示范性实施例的页面效果展示方法300的流程示意图;
[0021] 图4示出了根据本发明一个示范性实施例的展示文件展示页面效果的示意图;
[0022] 图5示出了一个示范性实施例的网页展示页面效果的示意图;
[0023] 图6示出了根据本发明一个示范性实施例的展示文件展示注册事件的示意图。
具体实施方式
[0024] 下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。相同的附图标记通常指代相同的部件或元素。
[0025] 本发明中当用户撰写网页中某个组件的代码,想要对这段代码进行展示时,可确定该组件在网页对应的文档对象模型中所属节点,将该节点作为目标节点,将该目标节点的代码进行解析,对页面效果进行展示。图1示出了根据本发明一个示范性实施例的网页节点架构的示意图。如图1所示,该网页的架构以文档对象模型的方式呈现,网页的架构可描述为dom树,树形结构的每个节点表示网页中一个HTML标签或标签内的文本项。该网页的文档对象模型中包括一个根节点,根节点下包括第一节点和第三节点,第一节点下包括第二节点,第三节点下包括第四节点和第五节点。图1所示的网页节点架构仅为示例性的,本发明对网页节点架构中节点数目及构建方式不做限制。
[0026] 图2示出了根据本发明一个示范性实施例的计算设备200的结构框图。如图2所示,在基本配置202中,计算设备200典型地包括系统存储器206和一个或者多个处理器204。存储器总线208可以用于在处理器204和系统存储器206之间的通信。
[0027] 取决于期望的配置,处理器204可以是任何类型的处理器,包括但不限于:微处理器(µP)、微控制器(µC)、数字信息处理器(DSP)或者它们的任何组合。处理器204可以包括诸如一级高速缓存210和二级高速缓存212之类的一个或者多个级别的高速缓存、处理器核心214和寄存器216。示例的处理器核心214可以包括运算逻辑单元(ALU)、浮点数单元(FPU)、数字信号处理核心(DSP核心)或者它们的任何组合。示例的存储器控制器218可以与处理器
204一起使用,或者在一些实现中,存储器控制器218可以是处理器204的一个内部部分。
[0028] 取决于期望的配置,系统存储器206可以是任意类型的存储器,包括但不限于:易失性存储器(诸如RAM)、非易失性存储器(诸如ROM、闪存等)或者它们的任何组合。系统存储器206可以包括操作系统220、一个或者多个程序222以及程序数据228。在一些实施方式中,程序222可以布置为在操作系统上由一个或者多个处理器204利用程序数据228执行根据本发明的方法300的指令223。
[0029] 计算设备200还可以包括储存接口总线234。储存接口总线234实现了从储存设备232(例如,可移除储存器236和不可移除储存器238)经由总线/接口控制器230到基本配置
202的通信。操作系统220、程序222以及数据224的至少一部分可以存储在可移除储存器236和/或不可移除储存器238上,并且在计算设备200上电或者要执行程序222时,经由储存接口总线234而加载到系统存储器206中,并由一个或者多个处理器204来执行。
[0030] 计算设备200还可以包括有助于从各种接口设备(例如,输出设备242、外围接口244和通信设备246)到基本配置202经由总线/接口控制器230的通信的接口总线240。示例的输出设备242包括图像处理单元248和音频处理单元250。它们可以被配置为有助于经由一个或者多个A/V端口252与诸如显示器或者扬声器之类的各种外部设备进行通信。外围接口244可以包括串行接口控制器254和并行接口控制器256,它们可以被配置为有助于经由一个或者多个I/O端口258和诸如输入设备(例如,键盘、鼠标、笔、语音输入设备、触摸输入设备)或者其他外设(例如打印机、扫描仪等)之类的外部设备进行通信。示例的通信设备
246可以包括网络控制器260,其可以被布置为以便经由一个或者多个通信端口264与一个或者多个其他计算设备262通过网络通信链路的通信。
[0031] 网络通信链路可以是通信介质的一个示例。通信介质通常可以体现为在诸如载波或者其他传输机制之类的调制数据信号中的计算机可读指令、数据结构、程序模块,并且可以包括任何信息递送介质。“调制数据信号”可以这样的信号,它的数据集中的一个或者多个或者它的改变可以在信号中编码信息的方式进行。作为非限制性的示例,通信介质可以包括诸如有线网络或者专线网络之类的有线介质,以及诸如声音、射频(RF)、微波、红外(IR)或者其它无线介质在内的各种无线介质。这里使用的术语计算机可读介质可以包括存储介质和通信介质二者。
[0032] 在根据本发明的计算设备200中,程序222包括页面效果展示方法300的多条程序指令,这些程序指令可以指示处理器204执行本发明的计算设备200中运行的页面效果展示方法300中的部分步骤,以便计算设备200中的各部分通过执行本发明的页面效果展示方法300来实现对页面效果进行展示。
[0033] 计算设备200可以实现为服务器,例如文件服务器、数据库、服务器、应用程序服务器等,这些电子设备可以是诸如个人数字助理(PDA)、无线网络浏览设备、应用专用设备、或者可以包括上面任何功能的混合设备。可以实现为包括桌面计算机和笔记本计算机配置的个人计算机,也在一些实施例中,计算设备200被配置为执行页面效果展示方法300的指令。
[0034] 图3示出了根据本发明一个示范性实施例的页面效果展示方法300的流程示意图。如图3所示,首先执行步骤310,响应于页面效果展示请求,获取用户当前选中的代码文件。
[0035] 根据本发明的一个实施例,用户可通过选中需要展示的代码,并双击实现触发页面效果展示请求,对选中的代码进行效果展示;获取代码文件时将用户所选中的代码所属的文件作为用户选中的代码文件。本发明对页面效果展示请求的生成方式不做限制。用户还可以文件管理器的页面中直接选中一份代码文件,将其作为需要进行页面效果展示的代码文件,触发页面效果展示请求。
[0036] 确定待展示的目标节点时,获取用户当前选中的代码文件。
[0037] 随后,执行步骤320,根据代码文件,确定代码文件所属的网页。
[0038] 接着,执行步骤330,根据网页及代码文件,确定代码文件在网页对应文档对象模型中对应的节点,并将对应节点确定为待展示的目标节点。
[0039] 根据本发明的一个实施例,当用户选中图1中第二节点中的代码,需要对其进行展示。当接收到页面效果展示请求,确定该代码文件所属的网页,再根据所属的网页及代码文件确定代码文件在文档对象模型中对应的节点为第二节点,将第二节点作为目标节点。
[0040] 随后,执行步骤340,解析目标节点的代码,获取目标节点的页面样式;具体的:根据预设样式字段遍历目标节点的代码,确定与预设样式字段匹配的代码,根据与预设样式字段匹配的代码确定样式,作为目标节点的页面样式。
[0041] 为了对目标节点进行展示,需要确定目标节点中包括的所有页面样式,将这些样式进行加载和展示。目标节点中包括一种或多种页面样式,每种页面样式均在代码中以对应样式字段进行设置。通过在目标节点的代码中检索样式字段,能够确定目标节点中包括的页面样式。计算设备中预先存储有样式字段,用于检索匹配页面样式,开发人员在代码中用于设置页面样式的样式字段,与预先存储用于检索匹配的样式字段相同。
[0042] 根据本发明的一个实施例,页面样式包括行内样式、内嵌样式和外部样式,预设样式字段包括行内样式字段、内嵌样式字段和外部样式字段。根据与预设样式字段匹配的代码确定样式,作为目标节点的页面样式包括步骤:当遍历到与行内样式字段匹配的代码,则从该代码所在代码行确定样式,得到作为页面样式的行内样式,从而从目标节点的代码中检索出行内样式。
[0043] 行内样式是指通过标签的style属性来设置元素的样式。行内样式的预设样式字段为“style=”。根据本发明的一个实施例,目标节点中包括代码:
[0044]
。
[0045] 当使用预设样式字段“style=”进行检索匹配时,匹配到相应的代码“style=”,其所在的代码行为:
[0046]
。
[0047] 从该代码行确定样式font‑size:14px为行内样式,将该行内样式作为节点的页面样式。
[0048] 根据本发明的一个实施例,确定页面样式中的内嵌样式时,当遍历到与内嵌样式字段匹配的代码,则根据该代码确定内嵌样式在代码中的起始位置和结束位置,再根据内嵌样式在代码中的起始位置和结束位置确定作为页面样式的内嵌样式。
[0049] 内嵌样式是指写在HTML文件里面,是把CSS代码集中写在HTML文件的头部,即标签里面,用标签注明的样式。内嵌样式的预设样式字段为。根据本发明的一个实施例,目标节点中包括代码:
[0050]
[0051]
[0052] p1{font‑size:14px;}
[0053]
[0054] 。
[0055] 当使用预设样式字段进行检索匹配时,遍历到代码中包括,则将所在的位置确定为内嵌样式在代码中的结束位置,再根据内嵌样式在代码中的起始位置和结束位置从代码中提取得到内嵌样式为font‑size:14px,将该内嵌样式作为节点的页面样式。
[0056] 根据本发明的一个实施例,确定页面样式中的外部样式时,当遍历到与外部样式字段匹配的代码,则根据该代码获取外部样式文件,再根据外部样式文件确定作为页面样式的外部样式。
[0057] 外部样式是指将样式放在一个或多个外部样式表文件中,通过link标签将外部样式表文件引入网页的样式。外部样式表文件可实现为.css文件。外部样式字段包括@import、。根据本发明的一个实施例,目标节点中包括代码:
[0058] 。
[0059] 当使用外部样式字段进行检索匹配时,遍历到代码中包括,则根据该代码获取外部样式文件;其中,href属性指定了外部样式表文件的路径,根据href属性能够获取外部样式表文件:
[0060] p1{font‑size:14px;}。
[0061] 根据外部样式表文件确定外部样式为font‑size:14px,将外部样式作为页面样式的外部样式。
[0062] 随后,执行步骤350,根据目标节点的页面样式生成展示文件,对目标节点的页面效果进行展示;具体的:根据目标节点中包括的页面样式的代码按照预设格式进行存储,得到展示文件。
[0063] 根据本发明的一个实施例,展示文件可实现为svg文件,svg文件为可缩放的矢量图形,将页面样式的代码封装到svg文件中,即可实现在展示文件中设置要展示的页面样式。当接受到页面效果展示请求,生成展示文件并打开,即可呈现页面样式。
[0064] 为了实现在svg文件中加入页面样式的代码,以展示页面样式,需要设置页面样式在svg文件中插入的预设格式。预设格式包括设置svg文件的图片属性,并分类存储页面样式。svg文件的图片属性包括长度、宽度及命名空间等。
[0065] 根据本发明的一个实施例,展示文件的一个实例如下所示:
[0066]
[0067]