CN114385167A - 前端页面生成方法、装置、设备及介质 - Google Patents

Abstract

本发明涉及开发技术领域，揭露一种前端页面生成方法，包括：遍历前端页面的通用样式文件目录，得到多个样式列表；获取每个样式列表对应的样式选择器，并对样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；将样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；将层叠样式表编译文件应用于目标前端页面中，生成包含层叠样式表编译文件对应的页面样式的前端页面。本发明还涉及一种区块链技术，前端页面可以存储在区块链节点中。本发明还提出一种前端页面生成装置、设备以及介质。本发明可以提高生成前端页面的效率。

Description

前端页面生成方法、装置、设备及介质

技术领域

本发明涉及开发技术领域，尤其涉及一种前端页面生成方法、装置、电子设备及计算机可读存储介质。

背景技术

随着互联网的发展，进行前端开发的网站、WebAPP等产品形态通常由HTML+CSS+JavaScript实现。

但是，随着产品业务的开展，CSS样式越来越多，且分布在数十数百个文件中，造成应用资源臃肿，且存在大量重复或者无效的样式。这些大量重复或无效的样式会使得前端页面在样式编译过程中出现页面显示异常问题，需要重新识别重复或无效样式，导致前端页面的页面样式编译效率低下，进而导致前端页面生成效率较低。

发明内容

本发明提供一种前端页面生成方法、装置、电子设备及计算机可读存储介质，其主要目的是为了提高生成前端页面的效率。

为实现上述目的，本发明提供的一种前端页面生成方法，包括：

遍历前端页面的通用样式文件目录，得到多个样式列表；

获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

可选地，所述将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，包括：

依次从所述样式选择器组合选取一样式选择器为目标样式选择器；

判断所述目标样式选择器在预设前端页面中是否被引用；

若所述目标样式选择器在所述预设前端页面没有被引用，将所述目标样式选择器进行回收处理；

若所述目标样式选择器在所述预设前端页面被引用，并将所述目标样式选择器对应的样式列表进行汇总，得到目标层叠样式表样式编译文件；

汇总所有目标层叠样式表样式编译文件得到所述层叠样式表编译文件。

可选地，所述将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，包括：

获取层叠样式表编译文件对应的层叠样式表结构树；

解析所述层叠样式表结构树，得到多个树节点；

从多个所述树节点中获取层叠样式表编译规则，将所述层叠样式表编译规则应用于所述目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

可选地，所述获取层叠样式表编译文件对应的层叠样式表结构树，包括：

获取所述层叠样式表编译文件对应的字符串，识别所述字符串对应的所有数组；

将所述所有数组分别按照预设的语法转化为对应的树节点，按照树形结构连接所述树节点，得到所述层叠样式表结构树。

可选地，所述将所述所有数组分别按照预设的语法转化为对应的树节点之前，所述方法还包括：

利用预设的语法分析器对所述所有数组的语法进行遍历，将遍历后的所述所有数组组合成语法短语，并对所述语法短语中存在语法错误的数组进行语法改正。

可选地，所述从多个所述树节点中获取层叠样式表编译规则，包括：

计算多个所述树节点的样式属性，得到前端页面样式属性；

去除多个所述树节点中的不可视元素，得到前端页面可视树节点；

根据所述前端页面样式属性获取所述前端页面可视树节点的层叠样式表编译规则。

可选地，所述对分类后的样式选择器按照优先级进行排序，包括：

获取分类之后的所述样式选择器的权重值，按照所述权重值由大至小对所述样式选择器进行优先级排序。

为了解决上述问题，本发明还提供一种前端页面生成装置，所述装置包括：

样式列表获取模块，用于遍历前端页面的通用样式文件目录，得到多个样式列表；

样式选择器组合模块，用于获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

编译文件生成模块，用于将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

前端页面生成模块，用于将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：

存储器，存储至少一个计算机程序；及

处理器，执行所述存储器中存储的计算机程序以实现上述所述的前端页面生成方法。

为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的前端页面生成方法。

本发明实施例中，首先通过遍历前端页面的通用样式文件目录，得到多个样式列表。其次对获取的样式选择器进行分类，对分类后的样式选择器按照优先级进行排序对排序后的样式选择器进行去重、合并，得到样式选择器组合，可以将重复的样式选择器及其对应的样式内容筛选出来避免出现后续前端页面的页面样式被覆盖的情况产生，减少前端页面编译错误。再将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，可以将无效的样式选择器及其对应的样式列表去除，确保后续前端页面的页面样式显示正常，提高前端样式编译的效率，再直接将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，在提高前端样式编译的效率的同时提升了前端页面生成的效率。因此本发明实施例提出的前端页面生成方法、装置、电子设备及可存储介质可以提高前端页面生成的效率。

附图说明

图1为本发明一实施例提供的前端页面生成方法的流程示意图；

图2为本发明一实施例提供的前端页面生成装置的模块示意图；

图3为本发明一实施例提供的实现前端页面生成方法的电子设备的内部结构示意图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明实施例提供一种前端页面生成方法。所述前端页面生成方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述前端页面生成方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。

参照图1所示的本发明一实施例提供的前端页面生成方法的流程示意图，在本发明实施例中，所述前端页面生成方法包括：

S1、遍历前端页面的样式文件目录，得到多个样式列表。

本发明实施例中，所述前端页面的通用样式文件目录是指一个或多个前端页面包含的各个元素在该页面上的排版方式及位置，例如，网页上的字体、图片、表格、文字、字体、颜色及位置的排版方式。

具体的，前端页面的显示样式可由层叠样式表(Cascading Style Sheets,CSS)决定以及生成。

本发明实施例中，所述样式列表中包含对前端页面中各个组件和元素进行属性及属性值限定描述的内容，属性及属性值可以是对前端页面各个组件和元素的字体类别、字体大小及字体粗细的描述。

例如，定义网页的字体种类的属性及属性值为：字体类别为{font-family:"TimesNew Roman"}；字体大小为{font-size：“6.5px”}；字体粗细为{font-weight：“400”}。

详细地，遍历前端页面的通用样式文件目录，得到多个样式列表，包括：

对所述前端页面的通用样式文件目录进行深度遍历，得到样式文件目录中的多个样式文件数据，从所述多个样式文件数据中获取多个样式列表。

本发明一实施例中，可以利用目录遍历器对通用样式文件目录进行深度遍历，获取目录中每个样式文件的路径、名称及属性，并根据样式文件的路径、名称及属性得到多个样式文件数据，其中，所述多个样式文件数据是指对前端页面包括的多个元素样式。

较佳地，所述样式目录遍历器可以为os.walk。

S2、获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合。

本发明实施例中，所述样式选择器是CSS规则中重要的组成部分，具体的，样式选择器用于CSS与HTML元素之间的匹配，与样式选择器关联的样式规则将应用于样式选择器所指定的HTML元素。例如，HTML中的title匹配的颜色样式或字体样式等。

例如，对页面的一部分作限定颜色和字体大小的id样式选择器具体如下：

part 1{color:#ccc；font-size:12px，<class＝"part1"id>}。

本发明实施例中，对所述样式选择器进行分类，可以得到分类后的样式选择器。例如，类选择器、id选择器、标签选择器、元素选择器及属性选择器等。

本发明实施例中，所述类选择器用于按照给定的class属性的值，选择所有匹配的元素；所述id选择器用于按照id属性选择一个与之匹配的元素，且每个ID属性都应当是唯一的；所述标签选择器用于按照给定的标签，选择所有匹配的元素；所述元素选择器用于按照给定的节点名称，选择所有匹配的元素；所述属性选择器用于按照给定的属性，选择所有匹配的元素。

本发明实施例中，对样式选择器分类之后，得到类选择器、id选择器、标签选择器、元素选择器及属性选择器等，且一个样式选择器对应多个样式列表。

本发明实施例中，由于样式选择器有多种，且当两种不同的样式选择器都对html的同一元素进行定义，若定义的属性存在冲突，可以根据样式选择器存在优先级关系，选取优先级较高的样式选择器作为该元素的定义，因此对样式选择器按照优先级进行排序，所述优先级主要是用来判断定义的属性值与HTML中的哪一个元素最为相关，从而在该元素上应用这些属性值。

详细地，所述对分类后的样式选择器按照优先级进行排序，包括：

获取分类之后的所述样式选择器的权重值，按照所述权重值由大至小对所述样式选择器进行优先级排序。

本发明一实施中，将所有样式选择器的权重值分为四个等级，每个等级代表一类样式选择器。

例如，第一等级为内嵌样式(如style＝“…”)，对应的权重值为1000；第二等级为id选择器，对应的权重值为100；第三等级为属性选择器和标签选择器，对应的权重值为10；第四等级为类选择器及元素选择器，对应的权值为1，可以得到样式选择器的优先级从高到低依次为：内嵌样式、id选择器、属性选择器或标签选择器、类选择器或元素选择器。另外，当本发明实施例中出现“！important”时，“！important”对应的权重值最高。

本发明实施例中，对排序后的样式选择器进行去重(即去掉重复定义的样式)、合并，可以通过查找预设前端页面的样式内容是否存在两类及两类以上的选择器描述同一元素的样式，若是存在删除优先级较低的样式选择器的描述，保留优先级较高的样式选择器对该元素的描述，得到样式选择器组合。

例如，在html中由同样的样式选择器对<head>标签字体进行颜色限定为“棕色”，字体大小限定为“12px”，并对<head>标签中的<title>标签进行字体大小限定为“14px”，由于都是对标题的限定，合并后可得到对<head>标签中<title>标签的进行颜色限定为“棕色”，字体大小限定为“14px”。

例如，在html中类选择器和id选择器都对字体颜色进行限定，由于id选择器的优先级高于类选择器的优先级，删除类选择器对字体颜色的限定，保留id选择器对该字体颜色的限定。

S3、将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件。

本发明实施例中，所述层叠样式表样式编译文件可以是HTML中定义样式结构的所有样式列表汇总，如在网页页面，将网页页面中的字体、字体大小、字体颜色以及网页页面的组件位置加载进一个网页页面的页面规则文档中，该规则文档即为所述层叠样式表样式编译文件，其中，层叠样式表编译文件即为CSS编译文件。

详细地，所述将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，包括：

依次从所述样式选择器组合选取一样式选择器为目标样式选择器；

判断所述目标样式选择器在预设前端页面中是否被引用；

若所述目标样式选择器在所述预设前端页面没有被引用，将所述目标样式选择器进行回收处理；

若所述目标样式选择器在所述预设前端页面被引用，并将所述目标样式选择器对应的样式列表进行汇总，得到目标层叠样式表样式编译文件；

汇总所有目标层叠样式表样式编译文件得到所述层叠样式表编译文件。

本发明一实施例中，若目标样式选择器为id选择器，判断id选择器在前端页面是否被引用，若id选择器在所述预设前端页面被引用，得到引用索引大于0，可以利用通过如下查询语句进行查找：

document.getElementByid("id1")

其中，("id1")表示id选择器在前端页面被引用一次。

若id选择器在所述预设前端页面没有被引用，得到引用索引为0，并将该id选择器进行垃圾回收处理。

document.getElementByid("0")

其中，("0")表示id选择器在前端页面没有被引用。

S4、将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

本发明实施例中，在目标前端页面中加入一个超级链接引用所述层叠样式表样式编译文件，则所述目标前端页面就可按照在所述CSS样式编译文件内定义好的规则进行页面样式显示，生成包含所述CSS编译文件对应的页面样式的前端页面。

本发明实施例中，所述目标前端页面是根据预设组件树及CSS结构树相结合并进行渲染所得，所述预设组件树目标前端页面按照层级关系布置的页面展示逻辑代码，所述CSS结构树是按照层级关系排布的CSS编译规则。

具体的，可以通过获取CSS编译文件对应的CSS结构树并进行解析，得到CSS编译规则，将CSS编译规则应用于目标前端页面中，生成目标前端页面的页面样式，其中，CSS结构树包括多个树节点。

本发明实施例中，利用所述CSS样式编译文件中定义了所述网页页面的页面字体大小、颜色以及页面组件位置等CSS编译规则，且所述CSS样式编译文件中的字节内容转换成字符，再依照CSS编译规则组合成属性与对应的属性值的形式进行页面样式显示，其中，所述属性与属性值可以是页面规则文档中字体类别、字体大小以及颜色。

详细地，所述将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，包括：

获取层叠样式表编译文件对应的层叠样式表结构树；

解析所述层叠样式表结构树，得到多个树节点；

从多个所述树节点中获取层叠样式表编译规则，将所述层叠样式表编译规则应用于所述目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

本发明一实施例中，可以将CSS编译规则应用于目标前端页面中，或是目标前端页面的公共头部中，同时删除现存的其他所有CSS文件及html中的引用，生成目标前端页面的页面样式。

例如，因为CSS样式可以通过设置<link href＝"xxx"/>标签引用于目标前端页面中，也可以直接在目标前端页面中通过<style></style>直接编写，所以需要将重复的CSS样式相关内容进行剔除，即将原有的CSS样式去掉，并在目标前端页面的<head></head>头部插入一个<link href＝"app.css"/>的标签，生成目标前端页面的页面样式。

本发明一实施例中，所述获取层叠样式表编译文件对应的层叠样式表结构树，包括：

获取所述层叠样式表编译文件对应的字符串，识别所述字符串对应的所有数组；

将所述所有数组分别按照预设的语法转化为对应的树节点，按照树形结构连接所述树节点，得到所述层叠样式表结构树。

本发明一实施例中，所述CSS编译文件包含了描述目标前端页面的CSS编译规则，当识别到该编译规则中存在对应的数组Tokens，例如，“开始标签”、“结束标签”或是“属性及属性值”等信息，将这些数组转化为对应的树节点，并于后续对CSS结构树进行深度解析，得到更加详细且有层次的信息。

本发明另一实施例中，所述语法分析是指将数组转化为树节点的形式，便于后续CSS结构树按照各个树节点的结构进行连接。

详细地，所述将所述所有数组分别按照预设的语法转化为对应的树节点之前，所述方法还包括：

利用预设的语法分析器对所述所有数组的语法进行遍历，将遍历后的所述所有数组组合成语法短语，并对所述语法短语中存在语法错误的数组进行语法改正。

本发明一可选实施例中，所述语法分析器可以为LR分析器，当所有数组组合成的语法短语中存在语法错误的数组时，可以利用短语级恢复方式进行错误语法改正。

例如，有X数组为(X＝a+b)，由于X数组缺少分号出现了语法错误，可以利用短语级恢复将X数组修改成(X＝a+b；)实现语法改正。

本实施例中，通过对数组中存在语法错误的数组进行语法改，可以完善所有数组对应的语法。

进一步地，所述从多个所述树节点中获取层叠样式表编译规则，包括：

计算多个所述树节点的样式属性，得到前端页面样式属性；

去除多个所述树节点中的不可视元素，得到前端页面可视树节点；

根据所述前端页面样式属性获取所述前端页面可视树节点的层叠样式表编译规则。

本发明实施例中，所述样式属性是所有可视属性的属性值，若该属性没有被任何匹配的规则定义，则所述样式属性可使用默认值。

进一步地，可以针对不同的前端页面进行自动化编译，不是对整个前端页面都应用同样的CSS样式编译文件，而是按照预设好的规则进行前端页面不同模块间的自动化编译，最终生成生成包含不同CSS编译文件对应的页面样式的前端页面等，解决不同模块间的样式污染及大文件引入造成的其他性能问题。

本发明实施例中，首先通过遍历前端页面的通用样式文件目录，得到多个样式列表。其次对获取的样式选择器进行分类，对分类后的样式选择器按照优先级进行排序对排序后的样式选择器进行去重、合并，得到样式选择器组合，可以将重复的样式选择器及其对应的样式内容筛选出来避免出现后续前端页面的页面样式被覆盖的情况产生，减少前端页面编译错误。再将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，可以将无效的样式选择器及其对应的样式列表去除，确保后续前端页面的页面样式显示正常，提高前端样式编译的效率，再直接将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，在提高前端样式编译的效率的同时提升了前端页面生成的效率。因此本发明实施例提出的前端页面生成方法可以提高前端页面生成的效率。

如图2所示，是本发明前端页面生成装置的功能模块图。

本发明所述前端页面生成装置100可以安装于电子设备中。根据实现的功能，所述前端页面生成装置可以包括样式列表获取模块101、样式选择器组合模块102、编译文件生成模块103、前端页面生成模块104，本发所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。

在本实施例中，关于各模块/单元的功能如下：

所述样式列表获取模块101，用于遍历前端页面的通用样式文件目录，得到多个样式列表。

本发明实施例中，所述前端页面的通用样式文件目录是指一个或多个前端页面包含的各个元素在该页面上的排版方式及位置，例如，网页上的字体、图片、表格、文字、字体、颜色及位置的排版方式。

具体的，前端页面的显示样式可由层叠样式表(Cascading Style Sheets,CSS)决定以及生成。

本发明实施例中，所述样式列表中包含对前端页面中各个组件和元素进行属性及属性值限定描述的内容，属性及属性值可以是对前端页面各个组件和元素的字体类别、字体大小及字体粗细的描述。

例如，定义网页的字体种类的属性及属性值为：字体类别为{font-family:"TimesNew Roman"}；字体大小为{font-size：“6.5px”}；字体粗细为{font-weight：“400”}。

详细地，遍历前端页面的通用样式文件目录，得到多个样式列表，包括：

对所述前端页面的通用样式文件目录进行深度遍历，得到样式文件目录中的多个样式文件数据，从所述多个样式文件数据中获取多个样式列表。

本发明一实施例中，可以利用目录遍历器对通用样式文件目录进行深度遍历，获取目录中每个样式文件的路径、名称及属性，并根据样式文件的路径、名称及属性得到多个样式文件数据，其中，所述多个样式文件数据是指对前端页面包括的多个元素样式。

较佳地，所述样式目录遍历器可以为os.walk。

所述样式选择器组合模块102，用于获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合。

本发明实施例中，所述样式选择器是CSS规则中重要的组成部分，具体的，样式选择器用于CSS与HTML元素之间的匹配，与样式选择器关联的样式规则将应用于样式选择器所指定的HTML元素。例如，HTML中的title匹配的颜色样式或字体样式等。

例如，对页面的一部分作限定颜色和字体大小的id样式选择器具体如下：

part 1{color:#ccc；font-size:12px，<class＝"part1"id>}。

本发明实施例中，对所述样式选择器进行分类，可以得到分类后的样式选择器。例如，类选择器、id选择器、标签选择器、元素选择器及属性选择器等。

本发明实施例中，所述类选择器用于按照给定的class属性的值，选择所有匹配的元素；所述id选择器用于按照id属性选择一个与之匹配的元素，且每个ID属性都应当是唯一的；所述标签选择器用于按照给定的标签，选择所有匹配的元素；所述元素选择器用于按照给定的节点名称，选择所有匹配的元素；所述属性选择器用于按照给定的属性，选择所有匹配的元素。

本发明实施例中，对样式选择器分类之后，得到类选择器、id选择器、标签选择器、元素选择器及属性选择器等，且一个样式选择器对应多个样式列表。

本发明实施例中，由于样式选择器有多种，且当两种不同的样式选择器都对html的同一元素进行定义，若定义的属性存在冲突，可以根据样式选择器存在优先级关系，选取优先级较高的样式选择器作为该元素的定义，因此对样式选择器按照优先级进行排序，所述优先级主要是用来判断定义的属性值与HTML中的哪一个元素最为相关，从而在该元素上应用这些属性值。

详细地，所述样式选择器组合模块102通过执行下述操作对分类后的样式选择器按照优先级进行排序，包括：

获取分类之后的所述样式选择器的权重值，按照所述权重值由大至小对所述样式选择器进行优先级排序。

本发明一实施中，将所有样式选择器的权重值分为四个等级，每个等级代表一类样式选择器。

例如，第一等级为内嵌样式(如style＝“…”)，对应的权重值为1000；第二等级为id选择器，对应的权重值为100；第三等级为属性选择器和标签选择器，对应的权重值为10；第四等级为类选择器及元素选择器，对应的权值为1，可以得到样式选择器的优先级从高到低依次为：内嵌样式、id选择器、属性选择器或标签选择器、类选择器或元素选择器。另外，当本发明实施例中出现“！important”时，“！important”对应的权重值最高。

本发明实施例中，对排序后的样式选择器进行去重(即去掉重复定义的样式)、合并，可以通过查找预设前端页面的样式内容是否存在两类及两类以上的选择器描述同一元素的样式，若是存在删除优先级较低的样式选择器的描述，保留优先级较高的样式选择器对该元素的描述，得到样式选择器组合。

例如，在html中由同样的样式选择器对<head>标签字体进行颜色限定为“棕色”，字体大小限定为“12px”，并对<head>标签中的<title>标签进行字体大小限定为“14px”，由于都是对标题的限定，合并后可得到对<head>标签中<title>标签的进行颜色限定为“棕色”，字体大小限定为“14px”。

例如，在html中类选择器和id选择器都对字体颜色进行限定，由于id选择器的优先级高于类选择器的优先级，删除类选择器对字体颜色的限定，保留id选择器对该字体颜色的限定。

所述编译文件生成模块103，用于将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件。

本发明实施例中，所述层叠样式表样式编译文件可以是HTML中定义样式结构的所有样式列表汇总，如在网页页面，将网页页面中的字体、字体大小、字体颜色以及网页页面的组件位置加载进一个网页页面的页面规则文档中，该规则文档即为所述层叠样式表样式编译文件，其中，层叠样式表编译文件即为CSS编译文件。

详细地，所述编译文件生成模块103通过执行下述操作将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，包括：

依次从所述样式选择器组合选取一样式选择器为目标样式选择器；

判断所述目标样式选择器在预设前端页面中是否被引用；

若所述目标样式选择器在所述预设前端页面没有被引用，将所述目标样式选择器进行回收处理；

若所述目标样式选择器在所述预设前端页面被引用，并将所述目标样式选择器对应的样式列表进行汇总，得到目标层叠样式表样式编译文件；

汇总所有目标层叠样式表样式编译文件得到所述层叠样式表编译文件。

本发明一实施例中，若目标样式选择器为id选择器，判断id选择器在前端页面是否被引用，若id选择器在所述预设前端页面被引用，得到引用索引大于0，可以利用通过如下查询语句进行查找：

document.getElementByid("id1")

其中，("id1")表示id选择器在前端页面被引用一次。

若id选择器在所述预设前端页面没有被引用，得到引用索引为0，并将该id选择器进行垃圾回收处理。

document.getElementByid("0")

其中，("0")表示id选择器在前端页面没有被引用。

所述前端页面生成模块104，用于将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

本发明实施例中，在目标前端页面中加入一个超级链接引用所述其中，层叠样式表编译文件即为CSS编译文件样式编译文件，则所述目标前端页面就可按照在所述CSS样式编译文件内定义好的规则进行页面样式显示，生成包含所述CSS编译文件对应的页面样式的前端页面。

本发明实施例中，所述目标前端页面是根据预设组件树及CSS结构树相结合并进行渲染所得，所述预设组件树目标前端页面按照层级关系布置的页面展示逻辑代码，所述CSS结构树是按照层级关系排布的CSS编译规则。

具体的，可以通过获取CSS编译文件对应的CSS结构树并进行解析，得到CSS编译规则，将CSS编译规则应用于目标前端页面中，生成目标前端页面的页面样式，其中，CSS结构树包括多个树节点。

本发明实施例中，利用所述CSS样式编译文件中定义了所述网页页面的页面字体大小、颜色以及页面组件位置等CSS编译规则，且所述CSS样式编译文件中的字节内容转换成字符，再依照CSS编译规则组合成属性与对应的属性值的形式进行页面样式显示，其中，所述属性与属性值可以是页面规则文档中字体类别、字体大小以及颜色。

详细地，所述前端页面生成模块104通过执行下述操作将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，包括：

获取层叠样式表编译文件对应的层叠样式表结构树；

解析所述层叠样式表结构树，得到多个树节点数据；

从多个所述树节点中获取层叠样式表编译规则，将所述层叠样式表编译规则应用于所述目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

本发明一实施例中，可以将CSS编译规则应用于目标前端页面中，或是目标前端页面的公共头部中，同时删除现存的其他所有CSS文件及html中的引用，生成目标前端页面的页面样式。

例如，因为CSS样式可以通过设置<link href＝"xxx"/>标签引用于目标前端页面中，也可以直接在目标前端页面中通过<style></style>直接编写，所以需要将重复的CSS样式相关内容进行剔除，即将原有的CSS样式去掉，并在目标前端页面的<head></head>头部插入一个<link href＝"app.css"/>的标签，生成目标前端页面的页面样式。

本发明一实施例中，所述获取层叠样式表编译文件对应的层叠样式表结构树，包括：

获取所述层叠样式表编译文件对应的字符串，识别所述字符串对应的所有数组；

将所述所有数组分别按照预设的语法转化为对应的树节点，按照树形结构连接所述树节点，得到所述层叠样式表结构树。

本发明一实施例中，所述CSS编译文件包含了描述目标前端页面的CSS编译规则，当识别到该编译规则中存在对应的数组Tokens，例如，“开始标签”、“结束标签”或是“属性及属性值”等信息，将这些数组转化为对应的树节点，并于后续对CSS结构树进行深度解析，得到更加详细且有层次的信息。

本发明另一实施例中，所述语法分析是指将数组转化为树节点的形式，便于后续CSS结构树按照各个树节点的结构进行连接。

详细地，所述将所述所有数组分别按照预设的语法转化为对应的树节点之前，所述方法还包括：

利用预设的语法分析器对所述所有数组的语法进行遍历，将遍历后的所述所有数组组合成语法短语，并对所述语法短语中存在语法错误的数组进行语法改正。

本发明一可选实施例中，所述语法分析器可以为LR分析器，当所有数组组合成的语法短语中存在语法错误的数组时，可以利用短语级恢复方式进行错误语法改正。

例如，有X数组为(X＝a+b)，由于X数组缺少分号出现了语法错误，可以利用短语级恢复将X数组修改成(X＝a+b；)实现语法改正。

本实施例中，通过对数组中存在语法错误的数组进行语法改，可以完善所有数组对应的语法。

进一步地，所述从多个所述树节点中获取层叠样式表编译规则，包括：

计算多个所述树节点的样式属性，得到前端页面样式属性；

去除多个所述树节点中的不可视元素，得到前端页面可视树节点；

根据所述前端页面样式属性获取所述前端页面可视树节点的层叠样式表编译规则。

本发明实施例中，所述样式属性是所有可视属性的属性值，若该属性没有被任何匹配的规则定义，则所述样式属性可使用默认值。

进一步地，可以针对不同的前端页面进行自动化编译，不是对整个前端页面都应用同样的CSS样式编译文件，而是按照预设好的规则进行前端页面不同模块间的自动化编译，最终生成生成包含不同CSS编译文件对应的页面样式的前端页面等，解决不同模块间的样式污染及大文件引入造成的其他性能问题。

本发明实施例中，首先通过遍历前端页面的通用样式文件目录，得到多个样式列表。其次对获取的样式选择器进行分类，对分类后的样式选择器按照优先级进行排序对排序后的样式选择器进行去重、合并，得到样式选择器组合，可以将重复的样式选择器及其对应的样式内容筛选出来避免出现后续前端页面的页面样式被覆盖的情况产生，减少前端页面编译错误。再将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，可以将无效的样式选择器及其对应的样式列表去除，确保后续前端页面的页面样式显示正常，提高前端样式编译的效率，再直接将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，在提高前端样式编译的效率的同时提升了前端页面生成的效率。因此本发明实施例提出的前端页面生成装置可以提高前端页面生成的效率。

如图3所示，是本发明实现前端页面生成方法的电子设备的结构示意图。

所述电子设备可以包括处理器10、存储器11、通信总线12和通信接口13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如前端页面生成程序。

其中，所述存储器11至少包括一种类型的介质，所述介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、本地磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(Secure Digital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如前端页面生成程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing unit，CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(Control Unit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如前端页面生成程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。

所述通信总线12可以是外设部件互连标准(perIPheral componentinterconnect，简称PCI)总线或扩展工业标准结构(extended industry standardarchitecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述通信总线12总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

图3仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图3示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

可选地，所述通信接口13可以包括有线接口和/或无线接口(如WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。

可选地，所述通信接口13还可以包括用户接口，用户接口可以是显示器(Display)、输入单元(比如键盘(Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。

应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。

所述电子设备中的所述存储器11存储的前端页面生成程序是多个计算机程序的组合，在所述处理器10中运行时，可以实现：

遍历前端页面的通用样式文件目录，得到多个样式列表；

获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

具体地，所述处理器10对上述计算机程序的具体实现方法可参考图1对应实施例中相关步骤的描述，在此不赘述。

进一步地，所述电子设备集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取介质中。所述计算机可读介质可以是非易失性的，也可以是易失性的。所述计算机可读介质可以包括：能够携待所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)。

本发明实施例还可以提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：

遍历前端页面的通用样式文件目录，得到多个样式列表；

获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

进一步地，所述计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。

在本发明所提供的几个实施例中，应该理解到，所揭露的介质、设备、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种前端页面生成方法，其特征在于，所述方法包括：

遍历前端页面的通用样式文件目录，得到多个样式列表；

获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

2.如权利要求1所述的前端页面生成方法，其特征在于，所述将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件，包括：

依次从所述样式选择器组合选取一样式选择器为目标样式选择器；

判断所述目标样式选择器在预设前端页面中是否被引用；

若所述目标样式选择器在所述预设前端页面没有被引用，将所述目标样式选择器进行回收处理；

若所述目标样式选择器在所述预设前端页面被引用，并将所述目标样式选择器对应的样式列表进行汇总，得到目标层叠样式表样式编译文件；

汇总所有目标层叠样式表样式编译文件得到所述层叠样式表编译文件。

3.如权利要求1所述的前端页面生成方法，其特征在于，所述将所述CSS编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面，包括：

获取层叠样式表编译文件对应的层叠样式表结构树；

解析所述层叠样式表结构树，得到多个树节点；

从多个所述树节点中获取层叠样式表编译规则，将所述层叠样式表编译规则应用于所述目标前端页面中，生成包含所述层叠样式表编译文件标识的页面样式的前端页面。

4.如权利要求3所述的前端页面生成方法，其特征在于，所述获取层叠样式表编译文件对应的层叠样式表结构树，包括：

获取所述层叠样式表编译文件对应的字符串，识别所述字符串对应的所有数组；

将所述所有数组分别按照预设的语法转化为对应的树节点，按照树形结构连接所述树节点，得到所述层叠样式表结构树。

5.如权利要求4所述的前端页面生成方法，其特征在于，所述将所述所有数组分别按照预设的语法转化为对应的树节点之前，所述方法还包括：

利用预设的语法分析器对所述所有数组的语法进行遍历，将遍历后的所述所有数组组合成语法短语，并对所述语法短语中存在语法错误的数组进行语法改正。

6.如权利要求3所述的前端页面生成方法，其特征在于，所述从多个所述树节点中获取层叠样式表编译规则，包括：

计算多个所述树节点的样式属性，得到前端页面样式属性；

去除多个所述树节点中的不可视元素，得到前端页面可视树节点；

根据所述前端页面样式属性获取所述前端页面可视树节点的层叠样式表编译规则。

7.如权利要求1所述的前端页面生成方法，其特征在于，所述对分类后的样式选择器按照优先级进行排序，包括：

获取分类之后的所述样式选择器的权重值，按照所述权重值由大至小对所述样式选择器进行优先级排序。

8.一种前端页面生成装置，其特征在于，所述装置包括：

样式列表获取模块，用于遍历前端页面的通用样式文件目录，得到多个样式列表；

样式选择器组合模块，用于获取每个所述样式列表对应的样式选择器，并对所述样式选择器进行分类，对分类后的样式选择器按照优先级进行排序，对排序后的样式选择器进行去重、合并，得到样式选择器组合；

编译文件生成模块，用于将所述样式选择器组合中对应的所有样式列表汇总为层叠样式表编译文件；

前端页面生成模块，用于将所述层叠样式表编译文件应用于目标前端页面中，生成包含所述层叠样式表编译文件对应的页面样式的前端页面。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序指令，所述计算机程序指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任一项所述的前端页面生成方法。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的前端页面生成方法。

Images