CN108874829A - 网页的处理方法、装置、智能设备及计算机存储介质 - Google Patents

Abstract

本发明实施例公开了一种网页的处理方法、装置及终端设备，其中，所述方法包括：获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。采用本发明实施例，可满足开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

Description

网页的处理方法、装置、智能设备及计算机存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及网页的处理方法、装置、智能设备及计算机存储介质。

背景技术

网页是一种文本文件，网页是构成网站的基本元素。在各种类型的网页上，可以向用户展示各种各样的信息，例如新闻、娱乐、产品介绍等等。在网页上一般包括文字和图片，通过文字和图片，以及各种各样的美化样式，例如字体、颜色等样式，使得网页可以更加美观，能够给予用户较为完美的视觉体验。

网页图片常用的加载方式有三种，包括单图模式引用、基于base64模式引用、基于雪碧sprite模式引用。三种加载方式各有优劣，在网络请求占用、缓存机制、灵活性等方面表现不一。

在网页开发时，对于需要加载到网页上的各种图片选择何种加载方式一般由开发人员人工确定，由开发人员根据经验选择各种图片的引用方式，以便于在页面性能与灵活实用之间取一个平衡点。现有的图片引用方式的选择是由开发人员人工选择确定的，在网页开发构建的过程中，需要分别为各种图片选择引用方式，降低了网页开发构建的效率。

发明内容

本发明实施例提供一种网页的处理方法、装置、智能设备及计算机存储介质，可较为快捷地确定待构建网页中图片的引用规则。

第一方面，本发明实施例提供了一种网页的处理方法，包括：

获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；

解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；

根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。

其中可选地，所述根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则，包括：

如果所述路径类型为第一路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；

若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则，还包括：

若不满足预设的数据量条件，则选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则，包括：

如果所述路径类型为第二路径类型，则判断所述属性信息中包括的图片数量值是否满足数量条件；

若不满足数量条件，则选择第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则，还包括：

若满足数量条件，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，在选择第二引用规则之前，所述方法还包括：

判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；

若不大于预设的总量阈值，则执行所述选择第二引用规则；

若大于预设的总量阈值，则发出提示信息。

其中可选地，所述根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则，包括：

如果所述路径类型为第三路径类型，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述方法还包括：将所述样式指示文件转换为标准的层叠样式表文件。

第二方面，本发明实施例相应地提供了一种网页的处理装置，包括：

获取模块，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；

处理模块，用于解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；

确定模块，用于根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。

其中可选地，所述确定模块，用于如果所述路径类型为第一路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述确定模块，还用于若不满足预设的数据量条件，则选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述确定模块，用于如果所述路径类型为第二路径类型，则判断所述属性信息中包括的图片数量值是否满足数量条件；若不满足数量条件，则选择第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述确定模块，还用于若满足数量条件，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述装置还包括：判断模块，用于判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；若不大于预设的总量阈值，则通知所述确定模块；若大于预设的总量阈值，则发出提示信息。

其中可选地，所述确定模块，用于如果所述路径类型为第三路径类型，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

其中可选地，所述装置还包括：转换模块，用于将所述样式指示文件转换为标准的层叠样式表文件。

第三方面，本发明实施例相应地还提供了一种智能设备，包括：处理器；所述处理器，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。

进一步可选地，本发明实施例还提供了一种计算机存储介质，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现上述第一方面所述的网页的处理方法。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

附图说明

图1是本发明实施例的一种在网页构建时对图片的处理方法的流程示意图；

图2是本发明实施例的一种网页的处理方法的流程示意图；

图3是本发明实施例的另一种网页的处理方法的流程示意图；

图4是本发明实施例的一种网页的处理装置的结构示意图；

图5是本发明实施例的一种智能设备的结构示意图。

具体实施方式

在本发明实施例中，对于待构建网页的页面图片的引用规则，可以根据需要包括第一引用规则、第二引用规则以及第三引用规则中的任意一个或者多个的组合。其中，所述第一引用规则可以为单图模式引用规则，所述第二引用规则可以为基于base64模式的base64模式引用规则，所述第三引用规则可以为基于sprite的雪碧模式引用规则。

在网页开发构建的过程中，针对用户获取的不同用途的图片，可以在预置的不同存储目录中存储。按照在网页中的不同用途，图片可以包括全局图片、模块图片和页面图片。其中，全局图片在网页以及该网页的子网页中均会显示，例如网页以及子网页都共用的背景图片等。模块图片是指在网页中指定功能模块中加载并显示的图片，这些指定的功能模块能够实现某一效果或功能，例如，网页中专用于商品展示的模块，模块图片则是指用于在该专用于商品展示的模块上显示的图片。页面图片则是指专用于在网页的某个子页面上显示的图片，例如在网页的商品介绍页面中显示的具体商品图片等。这些图片由用户预先找到，并存储到指定目录下。在编写待构建网页的样式指示文件时，将这些图片的存储路径，称之为图片引用路径，编写到样式指示文件中，以便于在构建网页时，能够基于该样式指示文件完成该网页的图片的构建。

所述样式指示文件可以为scss文件，是一种css(Cascading Style Sheets，层叠样式表)预处理文件，scss的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件。scss支持变量，条件语句等多种编程语法，可以非常方便的进行编程。

在本发明的一个实施例中，可以将图片的目录分为三类，建立common/img目录用于存放全局图片，建立slice/x目录用于存放x模块用到的图片，建立page/y/img目录用于存放y页面所用到的图片。用户将收集到待构建网页所需的图片分别存放在这些目录下。用户开发网页时，所选择的需要在网页中展示的各图片在存储时均可以按照上述的命名规则对存储目录进行特殊的命名，使得存储路径(图片引用路径)中包括对应的“common/”、“page/”、“slice/”等指定的路径特征，后续即可基于指定的路径特征进行路径类型的区分。当然，在其他实施例中，也可以按照约定的其他命名方式进行两种、三种或更多种路径类型的区分。

对构建工具脚本进行配置，在该构建工具脚本中可以配置基于第一引用规则引用到待构建网页的图片的数据量上限值(该数据量上限值用totalSize表示)、基于第一引用规则引用到待构建网页的单个图片的数据量上限值(该数据量上限值用itemSize表示)，并配置一个数量值(该数量值用spriteNum表示)。

如图1所示，是本发明实施例的一种在网页构建时对图片的处理方法的流程示意图。在基于编写的网页数据构建网页的过程中，基于所述构建工具脚本在S101中对编写的该待构建网页的样式指示文件(该样式指示文件用scss表示)进行扫描，并在S102中对scss中的图片引用路径进行解析。在S103中当发现是common/img路径(该路径类型为第一路径类型)的图片，则视为全局图片，遍历common/img目录下的图片，在S104中对各图片的数据量进行判断，数据量大于itemSize的图片满足预设的数据量条件，在S105中选择单图模式引用规则(即第一引用规则)引用该满足条件的图片。数据量小于itemSize的图片不满足预设的数据量条件，在S106中选择基于base64模式引用规则(即第二引用规则)，并将基于base64模式的图片个数+1，记录该类图片的数据量。记录的作用在于：如果在检测到需要选择使用base64模式引用相应图片时，则在选择确定前，先判断已经被选择基于base64模式引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；若不大于预设的总量阈值，则选择base64模式；若大于预设的总量阈值，则先不选择图片引用规则，发出提示信息以便于提示开发人员，由开发人员来确定是否选择base64模式引用规则。

在S107中当发现是slice/x路径的图片，则视为模块图片，遍历slice/x目录下的图片，在S108中判断图片的个数是否大于spriteNum，若是则满足数量条件，在S109中选择雪碧sprite模式引用规则(即第三引用规则)，打包成一张图；否则，则执行所述S106，选择base64模式引用规则(即第二引用规则)。

在S110中发现是page/路径下的图片时，遍历page/路径下的图片，在S111中判断数据量是否大于itemSize，如果不大于，则执行S109，直接采用雪碧sprite模式引用规则(即第三引用规则)。如果大于，则执行S105，按照单图模式引用规则引用该文件夹下的图片。

经过构建后，将所述的scss文件转换为标准的网页css文件，所有scss里的图片引用路径都会自动重写为css中各自模式的路径规范，可直接发布使用。具体可以对应设置转换函数，三个函数可以将scss文件中的图片引用路径转换为css文件的图片引用路径。

本发明实施例中针对scss中的图片引用路径到css文件中路径的格式转换包括：如为所述图片引用路径下存储的图片选择了第一规则，则按照预设的地址包裹方式直接对所述图片引用路径进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。也就是说，在选择单图模式引用规则时，直接将该图片引用路径下的单图的路径进行包裹，得到css的路径信息，例如：在scss文件中，被确定为单图模式引用规则的图片的路径，在scss文件中被描述为：common/X.png，包裹到css文件后为：(url(./common/x.png))。

如为所述图片引用路径下存储的图片选择了第二规则，则将所述图片引用路径下的所述图片按照base64模式进行编码；将所述编码结果按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。也就是说，在选择了第二规则后，需要对图片进行编码得到一个base64的字符串，然后将该base64的字符串通过url包裹以写入到css文件中。

如为所述图片引用路径下存储的图片选择了第三规则，则将所述图片引用路径下的所述图片组合为一张合成图片；获取该合成图片的图片存储地址；将所述图片存储地址按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。也就是说，在选择雪碧图模式对应的引用规则时，首先将图片引用路径下的所有图片和并到一起，得到一张新的合成图片，然后使用该合成图片的路径包裹到css文件中。如，图片引用路径下包括了多张图片slice/xxx/1-1.png、slice/xxx/1-2.png/、slice/xxx/1-3.png/、slice/xxx/1-4.png/，首先将4幅图片合成为一张图片1.png，具体可以是以缩略图的形式将所有图片排版到一张相应尺寸的图片上，slice/xxx/1.png的路径作为合成图片的图片存储地址，再基于url包裹，得到(url(slice/xxx/1.png))。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

再请参见图2，是本发明实施例的一种网页的处理方法的流程示意图，本发明实施例的所述方法可以应用在用于进行网页构建开发的智能设备中，具体如个人电脑等设备，所述方法包括如下步骤。

S201：获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片。本发明实施例中，在一个完整网页的开发过程中，需要编写网页对应的HTML(Hypertext Markup Language，超文本标记语言)文件，并编写用于指示该网页的样式的样式指示文件，该样式指示文件至少为所述待构建网页指定了图片，该样式指示文件还可以为所述待构建网页指定一些效果，例如颜色、字体字号等样式。在构建网页的时候，需要执行HTML文件和样式指示文件，以最终得到网页的页面数据，浏览器通过加载这些页面数据，生成网页显示给用户。

所述样式指示文件中编写了需要在网页中展示的图片的图片引用路径。例如在样式指示文件编入的图片引用路径可为：@include sprite("slice/xxx/a.png")。

其中slice/xxx/a.png为名称为a的图片的图片引用路径。编写得到样式指示文件后，在构建网页的过程中，执行所述样式指示文件，可以获取图片引用路径，例如获取上述图片a的slice/xxx/a.png。

S202：解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息。图片引用路径的类型可以包括多种，具体可以包括第一路径类型，例如全局图片类型；第二路径类型，例如模块图片类型；第三路径类型，例如页面图片类型。

在获取到图片引用路径后，基于该图片引用路径查找对应目录中的图片，确定这些图片的属性信息。确定的属性信息可以包括：图片本身的数据量大小，例如上述图片a的数据量大小。确定的属性信息也可以包括：该图片引用路径查找对应目录中存储的图片的数量，例如上述slice/xxx/目录下，除了包括图片a，还包括图片b，在该目录下有两张图片。

S203：根据所述路径类型和所述属性信息选择引用规则，所述引用规则包括将所述图片引用路径下存储的图片引用到所述待构建网页中的规则。引用规则可以包括以下规则中的任意一种或者多种：第一引用规则，例如可以是单图模式引用规则；第二引用规则，例如可以是基于base64模式引用规则；第三引用规则，例如可以是基于sprite模式引用规则。针对不同的路径类型和属性信息，可以选择不同的引用规则。

在一个实施例中，当路径类型为第一路径类型、且属性信息中包括的数据量值满足预设的数据量条件，例如该图片引用路径下存储的图片的数据量值大于预设的阈值，则选择第一引用规则。可以认为，在路径类型为全局图片类型、且属性信息中单个图片的数据量值大于预设的数据量阈值，则选择单图模式引用规则。

在一个实施例中，当路径类型为第一路径类型、且属性信息中包括的数据量值不满足预设的数据量条件，例如该图片引用路径下存储的图片的数据量值不大于预设的阈值，则选择第二引用规则。可以认为，在路径类型为全局图片类型、且属性信息中单个图片的数据量值不大于预设的数据量阈值，则选择基于base64模式引用规则。

在一个实施例中，当路径类型为第二路径类型、且属性信息中包括的数量值不满足预设的数量条件，例如该图片引用路径下存储的图片的数量值不大于预设的数量阈值，则选择第二引用规则。可以认为，当路径类型为模块图片类型、且属性信息中包括的数量值不大于预设的数量阈值，则选择基于base64模式引用规则。

在一个实施例中，当路径类型为第二路径类型、且属性信息中包括的数量值满足预设的数量条件，例如该图片引用路径下存储的图片的数量值大于预设的数量阈值，则选择第三引用规则。可以认为，当路径类型为模块图片类型、且属性信息中包括的数量值大于预设的数量阈值，则选择基于sprite模式引用规则。

在一个实施例中，当路径类型为第三路径类型，所述属性信息中包括的数据量值满足预设的数据量条件，例如该图片引用路径下存储的图片的数据量值大于预设的阈值，则选择并确定第一引用规则。

在一个实施例中，当路径类型为第三路径类型，例如该图片引用路径下存储的图片的数据量值不大于预设的阈值，所述属性信息中包括的数据量值不满足预设的数据量条件，则选择第三引用规则。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

再请参见图3，是本发明实施例的另一种网页的处理方法的流程示意图，本发明实施例的所述方法可以应用在用于进行网页构建开发的智能设备中，具体如个人电脑等设备，所述方法包括如下步骤。

S301：获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片。

在本发明实施例中，还可以包括对网页的构建工具(例如gulp)进行配置，在构建工具脚本中配置相应的阈值，以便于后续进行是否满足数据量条件、数量条件的判断。在一个具体实施例中，对gulp脚本的配置包括：采用第二引用规则引用的图片的总量阈值(totalSize)；采用第二引用规则引用的图片的数据量阈值(itemSize)；以及单个目录下图片的数量阈值(spriteNum)。

S302：解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息。图片存储到指定的存储目录下，对应于不同存储目录的图片访问路径具有不同的路径类型。在一个实施例中，如果图片的存储目录为第一目录，例如上述的“common/”目录，则可以认为该图片引用路径的路径类型为第一路径类型，即全局图片类型；在一个实施例中，如果图片的存储目录为第二目录，例如上述的“slice/x”目录，则可以认为该图片引用路径的路径类型为第二路径类型，即模块图片类型；在一个实施例中，如果图片的存储目录为第三目录，例如上述的“page/”目录，则可以认为该图片引用路径的路径类型为第三路径类型，即页面图片类型。

属性信息可以根据需要包括相关的图片数据量值的信息，和/或包括相关的图片数量值的信息。在一个实施例中，如果所述待构建的网页不需要基于第三引用规则引用图片，则可以仅获取图片的数据量值的信息作为属性信息。否则，需要获取图片的数据量值的信息、图片的数量值的信息作为属性信息。是否需要基于第三引用规则引用图片可以由用户对脚本进行配置来确定，如果在构建工具脚本中配置为不需要基于第三引用规则引用图片，则获取的属性信息可以仅包括图片引用路径下存储的图片的数据量信息。在一个实施例中，如果在所述样式指示文件中均不包括第二路径类型的路径(slice/x)和第三路径类型的路径(page/)，则获取的属性信息可以仅包括图片引用路径下存储的图片的数据量信息。

S303：如果所述路径类型为第一路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件，例如判断数据量值是否大于一个预设的阈值，如果大于，则满足数据量条件，如果不大于，则不满足预设的数据量条件。当属性信息中包括的数据量值大于预设的数据量阈值，则确定满足预设的数据量条件，执行下述的S304。当属性信息中包括的数据量值不大于预设的数据量阈值，则确定不满足预设的数据量条件，则执行下述的S305。

S304：选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

S305：选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

S306：如果所述路径类型为第二路径类型，则判断所述属性信息中包括的图片数量值是否满足数量条件，例如可以判断数量值是否大于一个数量阈值，如果不大于，则不满足数量条件，如果大于，则满足数量条件。当属性信息中包括的数量值不大于预设的数量阈值时，确定不满足预设数量条件，执行上述的S305。当属性信息中包括的数量值大于预设的数量阈值时，确定满足预设的数量条件，执行下述的S307。

S307：选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

进一步具体的，判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；若不大于预设的总量阈值，则执行所述S305，选择第二引用规则；若大于预设的总量阈值，则发出告警提示信息以提示用户。

S308：如果所述路径类型为第三路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件，例如判断数据量值是否大于一个预设的数据量阈值，如果大于，则满足数据量条件，如果不大于，则不满足数据量条件。在一个实施方式中，如果所述属性信息中包括的数据量值大于预设的数据量阈值，则可以认为满足预设的数据量条件，则执行上述的S304，若不满足，则执行上述的S307。

在选择确定了所述图片引用路径的引用规则后，将所述样式指示文件转换为标准的层叠样式表文件。

在一个实施例中，在将所述样式指示文件(例如上述的scss文件)转换为标准的层叠样式表文件(css文件)时，对scss中的图片引用路径的转换具体可以包括：如为所述图片引用路径下存储的图片选择了第一规则，则按照预设的地址包裹方式直接对所述图片引用路径进行包裹处理，得到在标准层叠式表文件中的路径信息。如为所述图片引用路径下存储的图片选择了第二规则，则将所述图片引用路径下的所述图片按照base64模式进行编码；将所述编码结果按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。如为所述图片引用路径下存储的图片选择了第三规则，则将所述图片引用路径下的所述图片组合为一张合成图片；获取该合成图片的图片存储地址；将所述图片存储地址按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

在本发明的一个实施例中，还提供了一种计算机存储介质，该计算机存储介质中存储有程序指令，该程序指令被执行时，用于实现图1、图2或图3所对应实施例中的方法。

下面对本发明实施例的网页的处理装置及智能设备进行描述。

请参见图4，是本发明实施例的一种网页的处理装置的结构示意图，本发明实施例的所述装置可以应用在用于进行网页构建开发的智能设备中。所述装置可以包括如下模块。

获取模块401，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；处理模块402，用于解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；确定模块403，用于根据所述路径类型和所述属性信息，确定将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。

在一个可选的实施例中，所述确定模块403，用于如果所述路径类型为第一路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述确定模块403，还用于如果所述路径类型为第一路径类型，若所述属性信息中包括的数据量值不满足预设的数据量条件，则选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述确定模块403，用于如果所述路径类型为第二路径类型，则判断所述属性信息中包括的图片数量值是否满足数量条件；若不满足数量条件，则选择第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述确定模块403，还用于如果所述路径类型为第二路径类型，若所述属性信息中包括的图片数量值满足数量条件，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述装置还可以包括：判断模块404，用于判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；若不大于预设的总量阈值，则通知所述确定模块403；若大于预设的总量阈值，则发出提示信息。

在一个可选的实施例中，所述确定模块403，用于如果所述路径类型为第三路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述确定模块403，还用于如果所述路径类型为第三路径类型，若所述属性信息中包括的数据量值不满足预设的数据量条件，选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述装置还可以包括：转换模块405，用于将所述样式指示文件转换为标准的层叠样式表文件。

具体的，所述转换模块405在转换的过程中，针对所述图片引用路径的转换，所述转换模块405，用于如为所述图片引用路径下存储的图片选择了第一规则，则按照预设的地址包裹方式直接对所述图片引用路径进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换；在一个实施例中，如为所述图片引用路径下存储的图片选择了第二规则，则将所述图片引用路径下的所述图片按照base64模式进行编码；将所述编码结果按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换；在一个实施例中，如为所述图片引用路径下存储的图片选择了第三规则，则将所述图片引用路径下的所述图片组合为一张合成图片；获取该合成图片的图片存储地址；将所述图片存储地址按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

本发明实施例所述装置的各个模块的具体实现可参考上述实施例中相应内容的描述。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

再请参见图5，是本发明实施例的一种智能设备的结构示意图，本发明实施例的所述设备具体可用于进行网页构建开发。所述智能设备包括电源模块、网络模块，数据传输接口等，进一步地还包括：处理器501、存储器502以及用户接口503。

所述用户接口503可以是鼠标、键盘、或者触摸屏等接口，用于接收用户的输入数据。用户基于鼠标、键盘通过所述用户接口503进行网页相关数据的编码，得到网页的HTML文件以及诸如css或者scss等样式指示文件。

所述存储器502可以包括易失性存储器(volatile memory)，例如RAM(random-access memory，随机存取存储器)；存储器502也可以包括非易失性存储器(non-volatilememory)，例如快闪存储器(flash memory)，HDD(hard disk drive，硬盘)或SSD(solid-state drive，固态硬盘)；存储器502还可以包括上述种类的存储器的组合。

所述处理器501可以是CPU(central processing unit，中央处理器)。所述处理器501还可以进一步包括硬件芯片。硬件芯片可以是ASIC(application-specificintegrated circuit，专用集成电路)，PLD(programmable logic device，可编程逻辑器件)或其组合。上述PLD可以是CPLD(complex programmable logic device，复杂可编程逻辑器件)，FPGA(field-programmable gate array，现场可编程逻辑门阵列)，GAL(genericarray logic,通用阵列逻辑)或其任意组合。

可选地，所述存储器502还用于存储程序指令。所述处理器501可以调用所述程序指令，实现如本申请图2，3实施例中所示的网页的处理方法。

所述处理器501，调用所述存储器502中存储的程序指令，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；根据所述路径类型和所述属性信息选择引用规则，所述引用规则包括将所述图片引用路径下存储的图片引用到所述待构建网页中的引用规则。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第一路径类型，在判断所述属性信息中包括的数据量值满足预设的数据量条件时，选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第一路径类型，在判断所述属性信息中包括的数据量值不满足预设的数据量条件时，选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第二路径类型，在判断所述属性信息中包括的图片数量值不满足数量条件时，选择第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第二路径类型，在判断所述属性信息中包括的图片数量值满足数量条件时，选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，还用于判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；若不大于预设的总量阈值，则执行所述选择第二引用规则；若大于预设的总量阈值，则发出提示信息。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第三路径类型，则在判断所述属性信息中包括的数据量值满足预设的数据量条件时，选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，具体用于如果所述路径类型为第三路径类型，则在判断所述属性信息中包括的数据量值满足预设的数据量条件时，选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

在一个可选的实施例中，所述处理器501，还用于将所述样式指示文件转换为标准的层叠样式表文件。

在一个可选的实施例中，在将所述样式指示文件转换为标准的层叠样式表文件的转换过程中，针对样式指示文件中的图片引用路径的转换，所述处理器501，具体用于如为所述图片引用路径下存储的图片选择了第一规则，则按照预设的地址包裹方式直接对所述图片引用路径进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

在一个可选的实施例中，在将所述样式指示文件转换为标准的层叠样式表文件的转换过程中，针对样式指示文件中的图片引用路径的转换，所述处理器501，具体用于如为所述图片引用路径下存储的图片选择了第二规则，则将所述图片引用路径下的所述图片按照base64模式进行编码；将所述编码结果按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

在一个可选的实施例中，在将所述样式指示文件转换为标准的层叠样式表文件的转换过程中，针对样式指示文件中的图片引用路径的转换，所述处理器501，具体用于如为所述图片引用路径下存储的图片选择了第三规则，则将所述图片引用路径下的所述图片组合为一张合成图片；获取该合成图片的图片存储地址；将所述图片存储地址按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

本发明实施例所述智能设备的处理器的具体实现可参考上述实施例中相应内容的描述。

本发明实施例能够针对待构建网页中图片的路径进行特殊处理，并根据特殊处理后的图片的路径和图片的属性来自动完成引用规则的选择和确认，满足了开发用户对网页构建时图片引用方式选择的自动化、智能化处理，提高了网页开发、构建的效率。

以上所揭露的仅为本发明部分实施例而已，当然不能以此来限定本发明之权利范围，本领域普通技术人员可以理解实现上述实施例的全部或部分流程，并依本发明权利要求所作的等同变化，仍属于发明所涵盖的范围。

Claims (14)

1.一种网页的处理方法，其特征在于，包括：

获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；

解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；

根据所述路径类型和所述属性信息选择引用规则，所述引用规则包括将所述图片引用路径下存储的图片引用到所述待构建网页中的规则。

2.如权利要求1所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，包括：

如果所述路径类型为第一路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；

若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

3.如权利要求2所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，还包括：

若不满足预设的数据量条件，则选择并确定第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

4.如权利要求1所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，包括：

如果所述路径类型为第二路径类型，则判断所述属性信息中包括的图片数量值是否满足数量条件；

若不满足数量条件，则选择第二引用规则，以便于基于所述第二引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

5.如权利要求4所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，还包括：

若满足数量条件，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

6.如权利要求3或4所述的方法，其特征在于，在选择第二引用规则之前，还包括：

判断已经被选择基于第二引用规则引用所述待构建网页的图片的总数据量值是否大于预设的总量阈值；

若不大于预设的总量阈值，则执行所述选择第二引用规则；

若大于预设的总量阈值，则发出提示信息。

7.如权利要求1所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，包括：

如果所述路径类型为第三路径类型，则判断所述属性信息中包括的数据量值是否满足预设的数据量条件；

若满足预设的数据量条件，则选择并确定第一引用规则，以便于基于所述第一引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

8.如权利要求7所述的方法，其特征在于，所述根据所述路径类型和所述属性信息选择引用规则，还包括：

若不满足预设的数据量条件，则选择第三引用规则，以便于基于所述第三引用规则将所述图片引用路径下存储的图片引用到所述待构建网页中。

9.如权利要求1所述的方法，其特征在于，所述引用规则包括的第一规则为：单图模式引用规则；所述方法还包括：

如为所述图片引用路径下存储的图片选择了第一规则，则按照预设的地址包裹方式直接对所述图片引用路径进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

10.如权利要求1所述的方法，其特征在于，所述引用规则包括的第二规则为：基于base64模式引用规则；所述方法还包括：

如为所述图片引用路径下存储的图片选择了第二规则，则将所述图片引用路径下的所述图片按照base64模式进行编码；

将所述编码结果按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

11.如权利要求1所述的方法，其特征在于，所述引用规则包括的第三规则为：雪碧模式引用规则；所述方法还包括：

如为所述图片引用路径下存储的图片选择了第三规则，则将所述图片引用路径下的所述图片组合为一张合成图片；

获取该合成图片的图片存储地址；

将所述图片存储地址按照预设的地址包裹方式进行包裹处理，得到在标准层叠式表文件中的路径信息，以便完成从所述样式指示文件到标准的层叠样式文件之间的转换。

12.一种网页的处理装置，其特征在于，包括：

获取模块，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；

处理模块，用于解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；

确定模块，用于根据所述路径类型和所述属性信息选择引用规则，所述引用规则包括将所述图片引用路径下存储的图片引用到所述待构建网页中的规则。

13.一种智能设备，其特征在于，包括：处理器；

所述处理器，用于获取待构建网页的样式指示文件中的图片引用路径，所述图片引用路径下存储了需要引用到所述待构建网页的图片；解析得到所述图片引用路径的路径类型，并获取该图片引用路径下存储的图片的属性信息；根据所述路径类型和所述属性信息选择引用规则，所述引用规则包括将所述图片引用路径下存储的图片引用到所述待构建网页中的规则。

14.一种计算机存储介质，其特征在于，该计算机存储介质中存储有程序指令，该程序指令被执行时用于实现如权利要求1-11任一项所述网页的处理方法。