CN105740364B - 页面处理方法及相关装置 - Google Patents

Abstract

本发明的目的是提供页面处理方法及相关装置，以去除测量比对工作，提高开发效率。在本发明中，可向前端页面注入对比参考图，叠加展示前端页面和注入的对比参考图，其中，至少对比参考图以设定的透明度显示，可实现前端页面和对比参考图同时显现。对比参考图如同描红字帖(背景图像)，前端页面如同覆盖在描红字帖上的透明薄纸。这样不用测量，即可对二者进行比对。在二者不一致时，可重新设置渲染属性参数来刷新更改前端页面，进而消除前端页面与对比参考图不一致的地方。因此，本发明实施例所提供的技术方案，去除了前端工程师反复测量比对的工作，使得前端开发效率大大增加。

Description

页面处理方法及相关装置

技术领域

本发明涉及数据处理领域，特别是涉及页面处理方法及相关装置。

背景技术

在制作网页时，很多时候，需要设计师先用图片处理软件制作出前端页面的对比参考图(也称为设计稿)。然后交由前端工程师，由前端工程师依照对比参考图开发前端页面，进行页面处理。

传统的页面处理方式包括徒手切图，也即纯手工一点一点测量打造切出页面。其过程类似于，对比着一个飞机模型(飞机模型相当于对比参考图)，在纸上设计出一个同等大小的飞机。

传统方式下，即使设计师在对比参考图上标注所有的参数，前端工程师也需要通过多次测量，反复比对，最终才能打造出类似于或完全相同于对比参考图的前端页面。其流程如图1所示。

以上边距为例，请参见图2，对比参考图要求上下两行相距20像素。但对于前端页面，上下两行的距离受到诸多因素的影响。例如，行高属性(line-height)、默认内联样式(padding)、默认边距(border)、字体属性(font-family)、字体大小(font-size)、字符种类(中英文及其他)等等均会影响上下行的距离。

因此，前端工程师需要使用测量工具(如截图工具)截取前端页面上下两行的空隙，然后读取截图高度值以检测上下两行的边距值，之后调整代码中下行元素的上边距(margin-top)的赋值(也即图2中的调整代码样式细节)，刷新页面(更改代码后刷新生效)。然后，再次截图测量上下两行的空隙是否相距20像素。如此，反复检测反复调整，最终验证得到下行元素的上边距赋值为16px时，可实现上下两行间距为20像素。

上述只列举了上边距，在制作一个页面的过程中，调整测量工作大量重复出现，极为耗时。

发明内容

本发明的目的是提供页面处理方法及相关装置，以去除测量比对工作，提高开发效率。

一种页面处理方法，应用于装载有浏览器的电子设备，所述方法包括：

向前端页面注入对比参考图；

叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数；

加载重新设置的渲染属性参数；

根据所述渲染属性参数刷新所述前端页面。

本发明实施例还提供一种页面处理装置，应用于装载有浏览器的电子设备，所述装置包括：

注入资源模块，用于向前端页面注入对比参考图；

监听展示模块，用于叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数；

加载模块，用于加载重新设置的渲染属性参数；

渲染模块，用于根据所述渲染属性参数刷新所述前端页面。

本发明实施例还提供一种电子设备，包括上述的页面处理装置。

基于上述技术方案，本发明实施例可向前端页面注入对比参考图，并叠加展示前端页面和对比参考图。其中，至少对比参考图以设定的透明度显示，这样可实现前端页面和对比参考图同时显现。对比参考图如同描红字帖(背景图像)，前端页面如同覆盖在描红字帖上的透明薄纸，从而不用测量，即可对二者进行比对。在二者不一致时，可重新设置渲染属性参数来刷新更改前端页面，进而消除前端页面与对比参考图不一致的地方。在此过程中，由于摒弃了传统的“对比着一个飞机模型(飞机模型相当于对比参考图)，在纸上设计出一个同等大小的飞机”的方式，而类似于“在描红字帖(对比参考图)上覆盖透明薄纸(前端页面)”进行描摹，从而并不需要前端工程师反复测量比对参数。因此，本发明实施例所提供的技术方案，去除了前端工程师反复测量比对的工作，使得前端开发效率大大增加。同时，由于是描摹方式，使得页面处理更为精确，可轻易实现所见即所得，可快速比对与对比参考图的任何一点区别。此外，由于不需要测量，也去除了设计师的标注工作，使得设计师专注于设计而非测量标注，大大加快对比参考图完成效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为徒手切图流程的示例图；

图2为上边距截图的示例图；

图3a、3b、3c为本发明实施例提供的页面处理方法流程的示例图；

图4为本发明实施例提供的pop页面注入对比参考图URL的示例图；

图5a和5b为本发明实施例提供的移动对比参考图示例图；

图6为本发明实施例提供的对比参考图注入的详细流程示例图；

图7为本发明实施例提供的交替展示前端页面和对比参考图的详细流程示例图；

图8为本发明实施例提供的监听展示的详细流程示例图；

图9a、9b为本发明实施例提供的页面处理装置结构示意图；

图10为本发明实施例提供的电子设备通用计算机系统结构示意图。

具体实施方式

本发明实施例提供页面处理方法、页面处理装置和电子设备。

上述页面处理方法或装置可应用于装载有浏览器的电子设备中，如移动终端，笔记本电脑，服务器等。

上述页面处理装置可作为处理插件(特别是切图插件)，安装到浏览器中。

插件是一种遵循一定规范的应用程序接口编写出来的程序。安装切图插件后，浏览器能够直接调用切图插件，通过与前端工程师交互来实现本发明实施例提供的页面处理方法。以chrome浏览器为例，可编写chrome页面处理插件来实现本发明实施例所提供的页面处理方法。

此外，也可在html代码中引入页面处理的js文件，来实现将页面处理装置安装到浏览器。

安装插件或在html代码中引入页面处理的js文件后，在进行页面处理时，使用者均可看到控制台。控制台上可具有按钮、输入框等，此外，还可提供对一些开关(例如后续提及的本地缓存开关)以及关键变量(例如后续的透明度)的可视化控制入口。

图3a示出了上述页面处理方法的一种示例性流程，其可包括如下步骤：

S0：打开前端页面。

前端页面就是待开发的页面。前端页面可以是空白页面，也可以是非空白页面。

具体的实现方式可以是：在浏览器的地址输入栏中键入前端页面的地址(URL)，回车，跳转到前端页面。

需要说明的是，URL(统一资源定位符)是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

本发明实施例中的前端页面一般为无业务逻辑的页面，也可看作页面模板。

S1：向前端页面注入对比参考图。

在一个示例中，可通过POP页面注入对比参考图(POP页面由前述的切图插件提供)。

请参见图4，可在前端页面的某一区域显示POP页面，在POP页面中输入对比参考图地址(URL)来实现对比参考图注入。POP页面是chrome页面处理插件的一部分，是chrome页面处理插件提供的控制台。POP页面是独立于前端页面的，在后续的刷新前端页面的操作中，POP页面是不被刷新的。

在其他示例中，可通过后台，异步请求，或其他形式的插件实现对比参考图的注入，也可直接在其他控制台(例如通过在html代码中引入页面处理的js文件所提供的控制台)导入实现对比参考图的注入。

需要说明的是，通过在html代码中引入页面处理的js文件而实现的控制台，是属于前端页面的一部分，在后续刷新前端页面操作中，该控制台也一同被刷新。

S2：叠加展示前端页面和注入的对比参考图。

前端页面可叠加(覆盖)在对比参考图之上，或者相反，对比参考图可叠加(覆盖)在前端页面之上。

并且，前端页面和对比参考图同时可见。

实现前端页面和对比参考图同时可见的方式有多种，例如，可令前端页面覆盖在对比参考图之上(也即，前端页面可为第一层，对比参考图可为第二层)，因为，页面有一个特性，在无遮挡的区域，下方的图案可暴露出来。因此，当前端页面覆盖在对比参考图之上时，透过前端页面可以看到下面的对比参考图；再例如，可令对比参考图覆盖在前端页面之上(也即，对比参考图可为第一层，前端页面可为第二层)，并令对比参考图以设定的透明度显示。

可将对比参考图看作描红字帖(背景图像)，前端页面就相当于覆盖在描红字帖上的透明薄纸。

为便于区分前端页面与对比参考图，可调整对比参考图和/或前端页面的透明度，令对比参考图显示为半透明，或者令前端页面显示为半透明，或者，令前端页面和对比参考图均显示为半透明(但二者的透明度取值不同)；显然，调整对比参考图和/或前端页面的透明度为半透明，仅为可选方式，本发明实施例还可通过设定对比参考图和/或前端页面的透明度处于合适的透明度范围(如40％透明度，60％透明度等)，只要能够保证前端页面与对比参考图同时可见并可相互区分即可。

在具体实现时，可通过控制台(例如POP页面)输入透明度的取值，以实现对对比参考图或前端页面的透明度的显示控制。例如，POP页面可提供透明度选项、滑块或输入框，前端工程师可在透明度选项中选择具体的透明度取值，或者，可通过滑动滑块来选取透明度的取值，或者在透明度输入框中直接输入透明度的取值。

可选的，页面处理插件或浏览器还可提供监听展示开关，监听展示开关的状态可为开启或关闭。监听展示开关的状态用于控制是否叠加展示注入的对比参考图和前端页面：若监听展示开关处于打开状态，允许叠加展示前端页面和对比参考图，而若监听展示开关处于关闭状态，则不允许叠加展示前端页面和对比参考图。

在具体实现时，可通过键盘上的某一特定键(例如数字1键)来实现监听展示开关的开启和关闭：在监听展示开关处于关闭状态下按下该特定键，则实现打开监听展示开关。而在监听展示开关处于开启状态下按下该特定键，则关闭了监听展示开关。

令前端页面与对比参考图同时可见并可相互区分，可便于用户(前端工程师)或电子设备确定前端页面与对比参考图是否一致，并在不一致重新设置渲染属性参数来更改前端页面。

S3：加载重新设置的渲染属性参数。

渲染属性参数有很多种，例如，行高属性、默认边距、字体属性、字体大小、字符种类、上边距等。

渲染属性参数嵌在代码中，因此，也可认为前端工程师是在更改代码中渲染属性的赋值，此步骤与图2中的调整代码样式细节相类似。

S4：根据渲染属性参数刷新前端页面。

更具体的，浏览器加载更改后的代码，实现前端页面的刷新。

在实际应用中，前端工程师可通过如下操作实现前端页面的刷新：

先通过浏览器更改代码，然后把更改后的代码从浏览器复制到前端页面对应的互联网文件里，最后，通过URL(统一资源定位符)访问该互联网文件，则前端页面被刷新。

可见，在本实施例中，可向前端页面注入对比参考图，并叠加展示前端页面和对比参考图。其中，至少对比参考图以设定的透明度显示，从而前端页面和对比参考图可同时显现，对比参考图如同描红字帖(背景图像)，前端页面如同覆盖在描红字帖上的透明薄纸。这样不用测量，即可对二者进行比对。在二者不一致时，可重新设置渲染属性参数来刷新更改前端页面，进而消除前端页面与对比参考图不一致的地方。

在此过程中，由于摒弃了传统的“对比着一个飞机模型(飞机模型相当于对比参考图)，在纸上设计出一个同等大小的飞机”的方式，而类似于“在描红字帖(对比参考图)上覆盖透明薄纸(前端页面)”进行描摹，从而并不需要前端工程师反复测量比对参数。因此，本发明实施例所提供的技术方案，去除了前端工程师反复测量比对的工作，使得前端开发效率大大增加。

同时，由于是描摹方式，使得页面处理更为精确，可轻易实现所见即所得，可快速比对与对比参考图的任何一点区别。

此外，由于不需要测量，也去除了设计师的标注工作，使得设计师专注于设计而非测量标注，大大加快对比参考图完成效率。

在本发明其他实施例中，请参见图3b，在步骤S4后，上述页面处理方法还可包括如下步骤：

S5：叠加展示刷新后的前端页面和注入的对比参考图。

其中，至少对比参考图以设定的透明度显示。步骤S5与步骤S2相类似，刷新后的前端页面和视觉效果图对比参考图同时可见。相关内容请参见步骤S2，在此不作赘述。

这样，在刷新前端页面后，由于刷新后的前端页面和对比参考图叠加在一起并同时可见，前端工程师可以比对二者是否一致。如不一致，可再次重新设置渲染属性参数刷新前端页面(刷新后的前端页面与对比参考图叠加在一起并同时可见)，以此循环操作，直至二者一致。

在本发明其他实施例中，上述所有实施例中的页面处理方法还可包括如下步骤：

调整对比参考图的位置，并显示对比参考图。

前端工程师可通过调整对比参考图的位置，使对比参考图与前端页面部分区域或全部区域重合。例如，对比文件参考图中有一个大写的A字，前端页面也有一个大写的A字，通过调整对比参考图的位置，可令两个A字重合。

在一个示例中，可监听电子设备的鼠标或键盘的动作，根据鼠标或键盘的动作相应调整所述对比参考图的位置。

也即，前端工程师可使用鼠标或键盘来移动对比参考图，从而调整对比参考图的位置。例如，请参见图5a和5b，可将对比参考图由图5a所示的位置，移动到图5b所示的位置。

在另一个示例中，页面处理插件或浏览器还可提供移动开关，移动开关处于打开状态时，可使用鼠标或键盘移动对比参考图，而如移动开关处于关闭状态时，则不能使用鼠标或键盘移动对比参考图。

在具体实现时，可通过键盘上的某一特定键(例如数字1键)来实现移动开关的开启和关闭。在关闭状态下按下该特定键，则打开移动开关，在开启状态下按下该特定键，则关闭移动开关。

调整对比参考图的位置的时机可由前端工程师决定。例如可在步骤S2和S3之间，也可在步骤S5之后。

在本发明其他实施例中，请参见图3c，上述所有实施例中的页面处理方法还可包括如下步骤：

S6：在接收到比对指令时，交替展示前端页面与对比参考图。

在一个示例中，可以1ms为间隔，交替展示前端页面与对比参考图：在t0时刻展示前端页面(同时隐藏对比参考图)，在t0+1ms时刻展示对比参考图(同时隐藏前端页面)，在t0+2ms展示前端页面(同时隐藏对比参考图)，以此类推。

如前端页面与对比参考图之间有差别，人眼看来就会有明显的跳动，从而在直观上可得到前端页面与对比参考图是否相同的结论。如不相同，还可继续调整对比参考图的位置和/或重置渲染属性参数刷新前端页面。

在另一个示例中，页面处理插件或浏览器还可提供比对开关。比对开关可通过按下键盘上的特定键或点击比对按钮来开启或关闭。例如，在比对开关开启的情况下，前端工程师通过按下键盘上的特定键或点击比对按钮，可关闭比对开关，反之，则可通过按下键盘上的特定键或点击比对按钮来开启比对开关。

下面，将以chrome浏览器为例，对重要技术内容进行详细说明。

一，对比参考图注入(对应步骤S1)。

向前端页面注入对比参考图可至少包括如下步骤：

1)，向前端页面注入设计资源。

上述设计资源至少可包括对比参考图的URL。此外，还可包括透明度、对比参考图的默认位置、以及监听展示开关的状态(状态可为开启或关闭)。

其中，对比参考图的URL、透明度、默认位置可由POP页面注入。

2)，将设计资源存储至本地，成为本地资源。

可选的，可将“设计资源”存入缓存cookie或localstorage文件中。

需要说明的是，POP页面上可提供本地缓存开关按钮，前端页面打开后，本地缓存开关默认状态为开启或关闭。

当本地缓存开关为开启状态时，允许将设计资源存储至本地。如果本地缓存开关为关闭状态，设计资源将不被允许存入本地，则在刷新前端页面后，需要重新注入设计资源。

图6示出了对比参考图注入更具体的步骤，包括：

A：前端页面启动，完成js的注入。

js是一个文件，全称为Javascript文件，但本发明并不强制其命名，任意名称均可。针对chrome插件，注入的文件可为content.js，可通过映射表更改注入文件的命令为任意名称。

js中包含代码，js注入后，代码会嵌入前端页面，从而使页面处理插件的一部分嵌入前端页面，与浏览器一同完成后续的操作。

针对代码直接写入方式引入(也即前述的在html代码中引入页面处理的js文件)，需要自定义名称，并且，引入的页面处理js文件会全部嵌入前端页面。

B：前端工程师于POP页面输入设计资源(至少包含对比参考图地址)。

C：POP页面将设计资源转发至background页面。

Backgroud页面自chrome浏览器启动，就永驻后台。

D：Backgroud页面转发设计资源至前端页面。

E：前端页面将设计资源写入本地(例如写入缓存cookie或localstorage)，将设计资源嵌入Dom，并将写入成功或失败消息(也可称为写入结果)发送至Backgroud页面。

Dom(Document object model，文档对象模型)，可以独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。

Dom技术使得页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

将设计资源嵌入Dom，从而可实现叠加展示前端页面和对比参考图，并且是以设计资源中的透明度和默认位置来显示对比参考图。

F：Backgroud页面将写入结果转发至POP页面。

需要说明的是，Background页面、POP页面均为chrome特有，在本实施例中，background页面的作用是转发消息，其原因是chrome浏览器中POP页面无法直达dom。

而对于前述的在html代码中引入页面处理的js文件的方式，则可直接将设计资源写入dom中。

G：POP页面接收到写入结果，结束。

二，比对(对应步骤S6)。

可由页面处理装置中的比对模块交替展示前端页面与对比参考图。

更具体的，请参见图7，比对的操作可包括：

A：启动比对；

B：隐藏前端页面dom中body及其所有叶子，100％透明度单独展示对比参考图；

该步骤实现的是隐藏前端页面，仅显示对比参考图。

C：短暂延时(例如延时1ms)，隐藏对比参考图，100％透明度展示前端页面全部内容。跳转至步骤B，直至关闭比对。

若前端页面与设计有差别，此时人眼会感觉有明显的跳动。

三，对比参考图展示(对应步骤S2)。

可由页面处理装置中的监听展示模块叠加展示的前端页面和所述注入的对比参考图。

更具体的，叠加展示的前端页面和所述注入的对比参考图(或者叠加展示刷新后的前端页面和所述注入的对比参考图)可包括：

1)查找本地资源；

2)在本地资源存在URL、透明度以及对比参考图的默认位置，并且，监听展示开关的状态为开启时，根据透明度和对比参考图的默认位置显示URL对应的对比参考图。

前端页面和对比参考图一个可作为第一层，另一个可作为第二层。可设置二者的显示顺序为：前端页面显示为第一层，对比参考图显示为第二层，或者相反。

因此，可进一步的根据透明度、对比参考图的默认位置、以及对比参考图的显示顺序显示URL对应的对比参考图。

初始注入后，对比参考图的默认位置是系统初始默认值。一般为左上角。

需要说明的是，若移动开关打开并且本地缓存开关也为开启状态时，在调整对比参考图的位置的过程中，若前端工程师使用鼠标移动对比参考图，监听展示模块还可监听鼠标移动，对对比参考图进行相应的位置移动，在鼠标停止移动后，将对比参考图的当前位置作为默认位置存储至本地，这样本地资源中的对比参考图默认位置得到了更新，在下一次展示时，可使用更新后的默认位置对对比参考图进行展示。

此外，若移动开关打开并且本地缓存开关也为开启状态时，在前端工程师使用键盘方向按键(例如上下左右按键)移动对比参考图时，监听展示模块还可监听键盘方向按键，当按键被按下时，对对比参考图进行相应的位置移动，在停止按按键后，将对比参考图的当前位置作为默认位置存储至本地，这样本地资源中的对比参考图默认位置得到了更新，在下一次展示时，可使用更新后的默认位置对对比参考图进行展示。

也即，在调整对比参考图的位置后，还可包括如下步骤：

将对比参考图的当前位置作为默认位置存储至本地(本步骤在本地缓存开关为开启状态时可被执行)。

需要注意的是，在前端页面刷新后，仍是通过“查找本地资源，在本地资源存在URL、透明度以及对比参考图的默认位置，并且，监听展示开关的状态为开启时，根据透明度和对比参考图的默认位置显示URL对应的对比参考图”的操作来实现展示对比参考图的。这样，若本地缓存开关为开启状态，对比参考图注入一次后，无论前端页面如何刷新，无需再次注入即可展示对比参考图。

另外，监听展示模块还可监听比对开关是否打开，当比对开关打开时，进入比对逻辑，也即由比对模块执行操作。

图8示出了监听展示模块所执行更具体的操作，包括：

A：查找本地资源，判断是否有对比参考图URL、透明度以及对比参考图的默认位置；

B：在判断出有对比参考图URL、透明度以及对比参考图的默认位置时，对监听展示开关进行监听，在判断出监听展示开关的状态为开启时，进入步骤J；

C：监听(注入)，当有新的设计资源注入时，更新本地资源；

D：监听(移动开关)；

E：当移动开关打开时，取得鼠标初始位置，监听鼠标移动，对对比参考图进行相应的位置移动；

F：当移动开关打开时，监听键盘方向按键，当按键被按下时，对对比参考图进行相应的位置移动；

G：当对比参考图位置发生变动时，更新本地存储的对比参考图的默认位置；

H：监听(比对开关)；

I：当比对开关打开时，比对模块执行比对逻辑；

J：展示对比参考图。

下面对本发明实施例提供的页面处理装置进行介绍，下文描述的页面处理装置与上文描述的页面处理方法可相互对应参照。

页面处理装置可应用于装载有浏览器的电子设备，请参见图9a，该页面处理装置可至少包括：

注入资源模块1，用于向前端页面注入对比参考图；在一个示例中，注入资源模块1可为前述的POP页面。

监听展示模块2，用于叠加展示所述前端页面和注入的对比参考图，其中，其中，至少对比参考图以设定的透明度显示，以便确定前端页面和对比参考图是否一致，并在不一致时重新设置渲染属性参数。

加载模块3，用于加载重新设置的渲染属性参数；

渲染模块4，用于根据渲染属性参数刷新前端页面。

具体内容请参见本文前述记载，在此不作赘述。

在本发明其他实施例中，上述所有实施例中的监听展示模块2还可用于：

叠加展示刷新后的前端页面和注入的对比参考图，其中，至少对比参考图以设定的透明度显示。具体内容请参见本文前述记载，在此不作赘述。

在本发明其他实施例中，上述所有实施例中的监听展示模块2还可用于调整对比参考图的位置。

在一个示例中，监听展示模块2可监听电子设备的鼠标或键盘的动作，根据鼠标或键盘的动作相应调整对比参考图的位置。

具体内容请参见本文前述记载，在此不作赘述。

在本发明其他实施例中，参照图9b，上述所有实施例中的页面处理装置还可包括比对模块5，用于在接收到比对指令后，交替展示前端页面与对比参考图。

在本发明其他实施例，在向前端页面注入对比参考图的方面，上述所有实施例中的注入资源模块1可用于：

注入设计资源；

将上述设计资源存储至本地，成为本地资源。

其中，上述设计资源至少包括对比参考图的URL，此外还可包括：透明度、对比参考图的默认位置、以及监听展示开关的状态。

而监听展示开关的状态用于控制监听展示模块2是否展示注入的对比参考图。具体内容请参见本文前述记载，在此不作赘述。

相应的，在叠加展示注入的对比参考图的方面，上述所有实施例中的监听展示模块2可用于：

查找本地资源；

在本地资源存在对比参考图的URL、透明度以及对比参考图的默认位置，并且，监听展示开关的状态为开启时，根据透明度和对比参考图的默认位置显示上述URL对应的对比参考图。

具体内容请参见本文前述记载，在此不作赘述。

在本发明其他实施例中，上述监听展示模块2还可用于：在调整对比参考图的位置后，将对比参考图的当前位置作为默认位置存储至本地。

具体内容请参见本文前述记载，在此不作赘述。

综上，本发明实施例中提供的页面处理装置，可向前端页面注入对比参考图，并叠加展示前端页面和对比参考图。其中，至少对比参考图以设定的透明度显示，可实现前端页面和对比参考图同时显现，对比参考图如同描红字帖(背景图像)，前端页面如同覆盖在描红字帖上的透明薄纸。这样不用测量，即可对二者进行比对。在二者不一致时，可重新设置渲染属性参数来刷新更改前端页面，进而消除前端页面与对比参考图不一致的地方。在此过程中，由于摒弃了传统的“对比着一个飞机模型(飞机模型相当于对比参考图)，在纸上设计出一个同等大小的飞机”的方式，而类似于“在描红字帖(对比参考图)上覆盖透明薄纸(前端页面)”进行描摹，从而并不需要前端工程师反复测量比对参数。因此，本发明实施例所提供的技术方案，去除了前端工程师反复测量比对的工作，使得前端开发效率大大增加。同时，由于是描摹方式，使得页面处理更为精确，可轻易实现所见即所得，可快速比对与对比参考图的任何一点区别。此外，由于不需要测量，也去除了设计师的标注工作，使得设计师专注于设计而非测量标注，大大加快对比参考图完成效率。

本发明实施例还提供一种装载有浏览器的电子设备，该电子设备可以包括上述所述的页面处理装置，对于页面处理装置的描述可参见上文对应部分的描述，此处不再赘述；可选的，该电子设备可以是移动终端、服务器、笔记本电脑等。

图10示出了上述电子设备的一种通用计算机系统结构。

上述计算机系统可包括总线、处理器101、存储器102、通信接口103、输入设备104和输出设备105。处理器101、存储器102、通信接口103、输入设备104和输出设备105通过总线相互连接。其中：

总线可包括一通路，在计算机系统各个部件之间传送信息。

处理器101可以是通用处理器，例如通用中央处理器(CPU)、网络处理器(NetworkProcessor，简称NP)、微处理器等，也可以是特定应用集成电路(application-specificintegrated circuit，ASIC)，或一个或多个用于控制本发明方案程序执行的集成电路。还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现成可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

存储器102中保存有执行本发明技术方案的程序，还可以保存有操作系统和其他应用程序。具体地，程序可以包括程序代码，程序代码包括计算机操作指令。更具体的，存储器102可以是只读存储器(read-only memory，ROM)、可存储静态信息和指令的其他类型的静态存储设备、随机存取存储器(random access memory，RAM)、可存储信息和指令的其他类型的动态存储设备、磁盘存储器等等。

输入设备104可包括接收用户输入的数据和信息的装置，例如键盘、鼠标、摄像头、扫描仪、光笔、语音输入装置、触摸屏等。

输出设备105可包括允许输出信息给用户的装置，例如显示屏、打印机、扬声器等。

通信接口103可包括使用任何收发器一类的装置，以便与其他设备或通信网络通信，如以太网，无线接入网(RAN)，无线局域网(WLAN)等。此外，通信接口103还可包括GPS/北斗定时定位器，GPS/北斗定时定位器可接收GPS/北斗卫星的授时信息。

处理器101执行存储器102中所存放的程序，以及调用其他设备，可用于实现本发明前述实施例所提供的页面处理方法，其至少可包括如下步骤：

向前端页面注入对比参考图；

叠加展示所述前端页面和注入的对比参考图，其中，至少所述对比参考图以设定的透明度显示，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数；

加载重新设置的渲染属性参数；

根据所述渲染属性参数刷新所述前端页面。

具体细节请参见本文前述记载，在此不作赘述。

此外，上述电子设备亦可完成本文方法部分所介绍的页面处理方法所涉及的其他步骤，以及各步骤的细化，在此不作赘述。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (15)

1.一种页面处理方法，其特征在于，应用于装载有浏览器的电子设备，所述浏览器安装有切图插件；所述方法包括：

在所述浏览器的前端页面上显示POP页面，所述前端页面是通过在所述浏览器的地址输入栏中键入所述前端页面的URL地址而跳转至的待开发网页，所述POP页面是所述切图插件提供的控制台；

获取在所述POP页面中输入的设计资源，所述设计资源至少包括对比参考图的URL；所述POP页面独立于所述前端页面，使得所述POP页面在后续刷新所述前端页面时不被刷新；

通过所述POP页面将所述设计资源转发至background页面，再通过所述background页面将所述设计资源转发至所述前端页面；

通过所述前端页面将所述设计资源嵌入Dom，并在所述浏览器中叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，使得所述前端页面与所述对比参考图同时可见并可相互区分，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数，所述渲染属性参数包括行高属性、默认边距、字体属性、字体大小、字符种类、上边距，所述对比参考图的透明度由所述POP页面注入；

加载重新设置的渲染属性参数；

根据所述渲染属性参数刷新所述前端页面，并重新执行所述在所述浏览器中叠加展示所述前端页面和注入的对比参考图的步骤，直至所述前端页面和对比参考图相一致。

2.如权利要求1所述方法，其特征在于，在刷新所述前端页面后，还包括：

叠加展示刷新后的前端页面和所述注入的对比参考图；至少所述对比参考图以设定的透明度显示。

3.如权利要求2所述的方法，其特征在于，还包括：

调整所述对比参考图的位置。

4.如权利要求3所述的方法，其特征在于，还包括：

在接收到比对指令后，交替展示所述前端页面与注入的对比参考图。

5.如权利要求1-4任一项所述的方法，其特征在于，还包括：

将所述设计资源存储至本地，成为本地资源。

6.如权利要求5所述的方法，其特征在于，

所述设计资源还包括：透明度、对比参考图的默认位置、以及监听展示开关的状态；

其中，所述监听展示开关的状态为开启或关闭，所述监听展示开关的状态用于控制是否叠加展示所述前端页面和所述注入的对比参考图。

7.如权利要求6所述的方法，其特征在于，所述叠加展示所述前端页面和所述注入的对比参考图包括：

查找本地资源；

在本地资源存在对比参考图的URL、透明度以及对比参考图的默认位置，并且，所述监听展示开关的状态为开启时，根据所述透明度和所述对比参考图的默认位置显示所述URL对应的对比参考图。

8.如权利要求3所述的方法，其特征在于，在调整对比参考图的位置后，还包括：

将所述对比参考图的当前位置作为默认位置存储至本地。

9.一种页面处理装置，其特征在于，应用于装载有浏览器的电子设备，所述页面处理装置安装于所述浏览器中，所述页面处理装置为切图插件；所述装置包括：

注入资源模块，用于在所述浏览器的前端页面上显示POP页面，所述前端页面是通过在所述浏览器的地址输入栏中键入所述前端页面的URL地址而跳转至的待开发网页，所述POP页面是所述切图插件提供的控制台；获取在所述POP页面中输入的设计资源，所述设计资源至少包括对比参考图的URL；所述POP页面独立于所述前端页面，使得所述POP页面在后续刷新所述前端页面时不被刷新；通过所述POP页面将所述设计资源转发至background页面，再通过所述background页面将所述设计资源转发至所述前端页面；通过所述前端页面将所述设计资源嵌入Dom；

监听展示模块，用于在所述浏览器中叠加展示所述前端页面和注入的对比参考图；其中，至少所述对比参考图以设定的透明度显示，使得所述前端页面与所述对比参考图同时可见并可相互区分，以便确定所述前端页面和对比参考图是否一致，在不一致时重新设置渲染属性参数，所述渲染属性参数包括行高属性、默认边距、字体属性、字体大小、字符种类、上边距，所述对比参考图的透明度由所述POP页面注入；

加载模块，用于加载重新设置的渲染属性参数；

渲染模块，用于根据所述渲染属性参数刷新所述前端页面，使所述监听展示模块重新执行所述在所述浏览器中叠加展示所述前端页面和注入的对比参考图的步骤，直至所述前端页面和对比参考图相一致。

10.如权利要求9所述的装置，其特征在于，所述监听展示模块还用于：

叠加展示刷新后的前端页面和所述注入的对比参考图；其中,至少所述对比参考图以设定的透明度显示。

11.如权利要求10所述的装置，其特征在于，所述监听展示模块还用于调整所述对比参考图的位置。

12.如权利要求11所述的装置，其特征在于，还包括：

比对模块，用于在接收到比对指令后，交替展示前端页面与对比参考图。

13.一种电子设备，其特征在于，包括权利要求9-12任一项所述的页面处理装置。

14.一种电子设备，其特征在于，包括处理器以及存储器：

所述存储器用于存储程序；

所述处理器用于调用所述程序，以执行权利要求1-8任意一项所述的页面处理方法。

15.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储程序，所述程序用于执行权利要求1-8任意一项所述的页面处理方法。

Images