CN117130610A - 页面生成方法、相关装置及计算机存储介质 - Google Patents

Abstract

本申请公开了一种页面生成方法、相关装置及计算机存储介质，其中，该方法包括：获取至少一个插件和至少一个页面的信息；基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。由此本申请可以有效提升了开发效率，降低了开发成本。

Description

页面生成方法、相关装置及计算机存储介质

技术领域

本申请涉及信息处理领域，具体涉及一种页面生成方法、相关装置及计算机存储介质。

背景技术

前端是对静态页面的设计，通俗的来说，就是用户可以在终端上看的到的界面。通常前端主要包括用于说明页面中的文字、图形、以及动画等的链接等事项的超文本标记语言(Hyper Text Markup Language，HTML)，用于对页面中对象和格式设置规则等事项的层叠样式表(Cascading Style Sheets，CSS)、以及用于对浏览器事件做出响应等事项的即时编译型的编程语言(JavaScript，JS)。

具体地，CSS的格式设置规则是指页面中规定字体的大小、颜色，在屏幕中的显示位置等等，其控制着网页以及应用程序(Application，APP)中的界面等外观。

发明内容

本申请实施例提供了一种页面生成方法、相关装置及计算机存储介质。

第一方面，本申请实施例提供了一种页面生成方法，该方法包括：

获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

第二方面，本申请实施例提供了一种页面生成装置，该装置包括：

获取模块，用于获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

匹配模块，用于基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

第一得到模块，用于在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

第二得到模块，用于利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

生成模块，用于基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

第三方面，本申请实施例提供了一种电子设备，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由处理器加载并执行本申请实施例第二方面提供的方法步骤。

第四方面，本申请实施例提供了一种电子设备，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由处理器加载并执行本申请实施例第三方面提供的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

在本申请实施例中，可以通过获取至少一个插件和至少一个页面的信息；基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。由此，本申请实施例可以在对层叠样式表CSS代码对应的第一语法树进行处理过程中，基于预设的匹配规则和预设的节点类型生成第二语法树，即在处理过程中就可以完成对CSS代码编译是否正确的验证过程，从而避免了相关技术中使用Node.js方法只有在程序运行Runtime时才可以确定编写是否正确、无法及时报错等弊端。

附图说明

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

图1为本申请实施例提供的页面生成方法的应用场景图；

图2为本申请实施例提供的一种页面生成方法的流程示意图；

图3为本申请实施例提供的一种页面生成方法中层叠样式表的处理过程示意图；

图4为本申请实施例提供的另一种页面生成方法的流程示意图；

图5为本申请实施例提供的一种页面生成方法中的根节点类示意图；

图6为本申请实施例提供的一种页面生成装置的结构示意图；

图7为本申请实施例提供的一种服务器的结构示意图。

具体实施方式

下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

在相关技术中，CSS由于没有变量、不支持嵌套、编程能力较弱、代码复用性差等原因导致写出来的CSS代码维护性差，并且还包含大量重复性的代码。因此，CSS的代码是无法直接运行于网页、APP等前端应用环境。相应地，就诞生了对CSS进行自动添加代码前缀、检测语法错误、格式化、压缩代码、整理代码等等后处理过程环节。

目前，可以采用提供各种JS插件功能的PostCSS来对CSS实现后处理过程环节。PostCSS的核心部分是一个Node.js模块，它有一个由200多个插件组成的生态系统，用户可以在项目中选择使用这些插件。PostCSS的优势在于其丰富的插件生态，但由于PostCSS是基于JS的一个代码库，其虽然可以提升开发效率但不能在与Node.js模块不兼容的WebAssembly以及Deno运行环境等下使用。

图1示出应用于本申请实施例的页面生成方法的系统架构图。其中，本申请实施例提供的页面生成方法可以应用在服务器中。具体地，服务器可以通过网络和终端连接。网络用以在终端和服务器之间提供通信链路。网络可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。终端包括但不限于：可穿戴设备、监控设备、手持设备、个人电脑、平板电脑、车载设备、智能手机、计算设备或连接到无线调制解调器的其它处理设备等。在不同的网络中终端设备可以叫做不同的名称，例如：监控设备、用户设备、接入终端、用户单元、用户站、移动站、移动台、远方站、远程终端、移动设备、用户终端、终端、无线通信设备、用户代理或用户装置、蜂窝电话、无绳电话、个人数字处理(personal digital assistant，PDA)、第五代移动通信技术(5th generation mobile networks，5G)网络或未来演进网络中的终端设备等。终端系统是指可以运行在终端上的操作系统，是管理和控制终端硬件和终端应用的程序，是终端不可或缺的系统应用。该系统包括担不限于安卓Android系统、IOS系统、Windows phone(WP)系统和Ubuntu移动版操作系统等。

应该理解，图1中的终端、网络和服务器的数目仅仅是示意性的。根据现实需要，可以具有任意数目的终端、网络和服务器。比如服务器可以是多个服务器组成的服务器集群等。用户可以使用服务器通过网络与终端交互，以获取优化后的版本等。

在一个实施例中，图2所示，提供了一种页面生成方法的流程示意图。如图2所示，该方法可以包括如下步骤：

S201，获取至少一个插件和至少一个页面的信息。

其中，本申请实施例中的页面的信息可以包括页面对应的第一层叠样式表。第一层叠样式表可以包括字符流。

可以理解的是，本申请实施例中页面对应的第一层叠样式表是CSS代码，即未经任何处理的CSS源代码。其中，每个页面对应的CSS源代码对应的字符流可以包括多个子串。具体地，子串可以是一个字符、一个字符数组、字符数组的一部分、一个字符串、或一个字符串的一部分。

可能地，本申请实施例可以通过延迟加载LazyResult的方式传入CSS源码。

具体地，本申请实施例中的插件是一种遵循一定规范的应用程序接口编写出来的程序，其可以运行在预先设定的平台下，而不能脱离指定的平台单独运行。插件的种类多种多样，其可以调用原提供的函数库或者数据以完成需要实现的功能，例如添加代码前缀、检测语法错误、格式化等等。

S202，基于预设的匹配规则和预设的节点类型对至少一个页面的第一层叠样式表中的至少一个字符流进行节点类型匹配，匹配成功，执行S203-S205；匹配失败，执行S206。

可能地，本申请实施例中预设的匹配规则可以是正则匹配，即正则表达式，其被用来检索、替换CSS代码中符合节点类型的文本。也就是说，正则表达式描述了字符流中子串的匹配模式，其可以用来检查子串是否对应某种节点类型、将匹配的子串替换或者取出符合某个条件的子串等。

具体地，正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。正则表达式是由普通字符(例如字符a到z)以及特殊字符组成的文字模式。模式描述在搜索文本时要匹配的一个或多个子串。

S203，在至少一个页面的第一层叠样式表中的字符流与节点类型相互匹配的情况下，得到至少一个页面的第一语法树。

其中，本申请实施例中的节点类型可以包括：注释节点、申明节点、表达式节点、选择器节点中的任意一项或多项。

可能地，本申请实施例将CSS中存在注释的子串定义为注释节点对象tokencoment。将以@开头的节点，例如@charset“UTF-8”或@media(screen){}等子串定义为申明节点token atrule。将声明变量、函数、class、import、export的子串定义为表达式节点token Declaration，例如，键值对key-value、属性color:值black。将包含选择器的子串定义为选择器节点token rule，比如定义input,button样式的选择器。

进一步地，在本申请实施例可以基于预设的匹配规则和节点类型，利用预设编译器对至少一个页面的第一层叠样式表中字符流的子串进行节点类型匹配。若至少一个页面的第一层叠样式表中字符流的各子串均匹配到节点类型中的一项，得到至少一个页面的第一语法树。

具体地，本申请实施例中的预设编译器可以是Rust语言。Rust语言旨在以简单的方式开发高度可靠和快速的软件。Rust语言抛弃了C/C++之外的语言都有的垃圾回收器，也就是说它消除了垃圾回收机制带来的性能损耗。并且Rust语言具有天生多线程安全运行程序Rust语言的拥有者概念和内存安全规则使得它天生支持高并发，而且是支持没有数据竞争的高并发。此外，Rust语言还支持Web Assembly语言以及Deno语言。

具体地，Rust语言支持通过把代码编译成Web Assembly语言从而能够在浏览器端以实现快速，可靠的运行。Web Assembly语言是被设计用来在浏览器端/嵌入式设别上运行的，用于执行CPU计算密集型的语言。也就是说Web Assembly语言的目标是和Javascript一样能够在浏览器里运行，但因为是编译型所以更高效。因为Deno具有严格的权限系统，可以限制进程可用的功能。在明确授予访问权限之前，无法访问网络、文件系统或外部环境。相比之下，任何用Node.js执行的东西都可以自动使用这三者。因此，Rust语言不仅保证了运行的高效性，还保证了内存和线程的安全性。

S204，利用至少一个插件对至少一个页面的第一语法树进行处理，得到至少一个页面对应的第二层叠样式表。

可以理解的是，本申请实施例中的第二层叠样式表用于表示经过插件处理后得到的CSS代码。

参见图3，对页面的信息中的第一层叠样式表CSS进行解析后可以得到一个第一语法树AST1，利用多个插件分别对AST1进行添加代码前缀、检测语法错误、以及格式化等处理以后，可以得到第二语法树AST2，进一步地，可以对AST2进行转化即可得到第二层叠样式表CSS。

S205，基于至少一个页面对应的第二层叠样式表生成至少一个页面。

可以理解的是，由于CSS可以定义页面中的样式结构如字体、颜色、位置等的语言，并且可以直接存储于HTML网页或者单独的样式单文件。因此，本申请实施例可以将处理后的第二层叠样式表CSS结合HTML在任一终端生成相应的页面。

具体地，CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。利用它可以实现修改一个小的样式更新以及与其相关的所有页面元素。总体来说，CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。CSS可以将所有的样式声明统一存放进行统一管理。

进一步地，本申请实施例还可以对至少一个页面对应的第一层叠样式表和至少一个页面对应的第二层叠样式表进行存储。

可能地，本申请实施例可以在对得到的第二语法树进行递归的树形遍历，以构建转换后的字符串形式代码生成字符流，并生成sourcemap信息文件，以对对至少一个页面对应的第一层叠样式表和至少一个页面对应的第二层叠样式表进行存储，方便后续对CSS代码的调试或修改。

S206，若至少一个页面的第一层叠样式表中存在至少一个子串与节点类型中的任意一项均不匹配，则预设编译器停止编译并上报至少一个页面的第一层叠样式表中不匹配的子串。

具体地，在本申请实施例中第一层叠样式表CSS中存在一个子串与节点类型中的任意一项均不匹配时，Rust语言的编译器即停止编译并将错误信息上报给服务器。

可能地，本申请可以采用如下方式定义错误信息：例如，第一层叠样式表CSS中可能存在未闭合框架unclosedBracket、未知名称unknowWord、未知模块unCloseBlock等错误。

在一个具体的例子中，可以获取服务器中一个APP包含的20张页面对应的CSS代码以及用于检查上述页面对应的CSS代码语法错误的插件1、用于格式化CSS代码的插件2、用于压缩CSS代码的插件3、用于CSS代码整理代码的插件4。基于正则匹配和注释节点、申明节点、表达式节点、以及选择器节点等预设的节点类型对上述页面的第一层叠样式表中字符流的子串进行节点类型匹配；在上述页面的第一层叠样式表中字符流的子串存在相互匹配的节点类型的情况下，可以得到该APP中页面对应的第一语法树AST1。进一步地，可以利用插件1-插件4对AST第一语法树进行处理，得到第二语法树AST2，通过对AST2进行转换即可生成第二层叠样式表。进一步地，基于该APP中页面对应的第二层叠样式表并结合HTML、JS等信息就可以生成APP包含的20张页面。

由此，本申请实施例可以在对层叠样式表CSS代码对应的第一语法树进行处理过程中，基于预设的匹配规则和预设的节点类型生成第二语法树，即在处理过程中就可以完成对CSS代码编译是否正确的验证过程，从而避免了相关技术中使用Node.js方法只有在程序运行Runtime时才可以确定编写是否正确、无法及时报错等弊端。

在一些实施方式中，图4示例性示出了本申请实施例提供的一种页面生成方法的流程示意图。如图4所示，页面生成方法至少可以包括以下步骤：

S401，获取至少一个插件和至少一个页面的信息。

具体地，S401与S201一致，此处不再赘述。

S402，建立至少一个页面对应的第一类。

可能地，本申请实施例可以通过创建根节点类的方式建立至少一个页面对应的第一类，该类可以理解为一个平台，在该平台上对字符流进行处理，并存储生成的第一语法树，以及对该第一语法树进行处理生成第二语法树。

参见图5，例如可以建立一个根节点，并在该根节点下建立多个子节点，例如用于注释对象*\n*12345的注释节点，用于申明页面大小的最小值为900px的申明节点，用于定义选择器类型为ul元素的选择器节点，用于定义选择器类型为article元素的选择器节点，用于说明属性在元素周围添加空间的距离为3rem的表达式节点，用于说明属性一个边框到另一个边框之间距离为1rem的表达式节点。

S403，建立第二类。

其中，第二类可以包括至少一个插件。

具体地，本申请实施例可以创建一个第二类，该类可以被理解为是一个平台，在该平台中可以通过的use方法加载多个插件，然后通过执行process方法将这些插件输出到通过LazyResult方式传入到第一类中以对CSS代码对应的第一语法树进行处理。

可以理解的是，由于相关技术中采用Node.js方法的Postcss支持很多插件，因此，为了兼容这些插件本申请建立了一个用于加载这些插件的第二类。

S404，在至少一个页面对应的第一类中，基于匹配规则和节点类型对至少一个页面的第一层叠样式表中的字符流进行节点类型匹配，匹配成功，执行S405-S408；匹配失败，执行S409。

可以理解的是，本申请实施例可以在第一类中基于正则匹配和注释节点、申明节点、表达式节点、选择器节点等节点类型对至少一个页面的第一层叠样式表中的字符流进行节点类型匹配。

S405，在至少一个页面的第一层叠样式表中的字符流与节点类型相互匹配的情况下，得到至少一个页面的第一语法树。

具体地，S404与S203一致，此处不再赘述。

S406，调用第二类中的至少一个插件对至少一个页面对应的第一类中的至少一个页面的第一语法树进行处理，得到至少一个页面的第二语法树。

可以理解的是，本申请实施例可以通过类与类之间的关系实现对第一语法树的处理。也就是说，通过在第一类中调用第二类中的多个插件来实现对第一类中第一语法树的处理过程得到第二语法树。

可以理解的是，插件是用于实现对CSS代码进行自动添加代码前缀、检测语法错误、格式化、压缩代码、整理代码等各项功能的程序，其无需检验编译的正确性，因此，本申请实施例通过建立第二类的方式避免了对多个插件的处理过程，有效提高了开发效率。

S407，基于预设的算法对至少一个页面对应的第一类中的至少一个页面的第二语法树进行遍历，得到至少一个页面对应的第二层叠样式表。

可能地，本申请实施例可以创建一个用于将第二语法树生成CSS目标代码的MapGenerator类以执行尾递归。具体地，可以利用预设的算法，即MapGenerator方法对第二语法树以尾递归的方式进行遍历，即在回归过程中不用做任何操作自动生成CSS目标代码。

S408，基于至少一个页面对应的第二层叠样式表生成至少一个页面。

具体地，S408与S205一致，此处不再赘述。

S409，若至少一个页面的第一层叠样式表中存在至少一个子串与节点类型中的任意一项均不匹配，则预设编译器停止编译并上报至少一个页面的第一层叠样式表中不匹配的子串。

具体地，S409与S206一致，此处不再赘述。

在一个具体的例子中，可以获取服务器中目标网页对应的CSS代码以及用于检查该目标网页对应的CSS代码语法错误的插件1、用于格式化CSS代码的插件2、用于压缩CSS代码的插件3、用于CSS代码整理代码的插件4。进一步地，可以建立一个用于建立CSS代码对应的根节点类和用于存储插件1-插件4的第二类。这样就可以在第一类中基于正则匹配和注释节点、申明节点、表达式节点、以及选择器节点等预设的节点类型对目标页面的第一层叠样式表中字符流的子串进行节点类型匹配；在目标网页的第一层叠样式表中字符流的子串存在相互匹配的节点类型的情况下，可以得到该目标网页对应的第一语法树AST1。进一步地，可以在第一类中调用第二类中的插件1-插件4以对第一语法树AST1进行处理得到第二语法树AST2。进一步地，可以利用MapGenerator对第二语法树AST2进行遍历即可生成第二层叠样式表。进一步地，基于该目标网页对应的第二层叠样式表并结合HTML、JS等信息就可以生成目标网页。

由此，本申请实施例可以通过创建不同类的方式避免对无需编译的插件进行转换处理，这样不仅提高了编译效率，还可以将相关技术中Postcss支持的插件统一转换到Rust语言的编译环境中，有效提升了用户体验。

此外，本申请实施例中对CSS源码的处理过程还可以应用于基于Node.js编写的后端项目，例如软件开发工具包(Software Development Kit，SDK)中。

图6是本申请一示例性实施例提供的页面生成装置的结构示意图。该页面生成装置可以设置于服务器中，执行本申请上述任一实施例的页面生成方法。如图6所示，该页面生成装置包括：

获取模块61，用于获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

匹配模块62，用于基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

第一得到模块63，用于在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

第二得到模块64，用于利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

生成模块65，用于基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

由此，本申请实施例可以在对层叠样式表CSS代码对应的第一语法树进行处理过程中，基于预设的匹配规则和预设的节点类型生成第二语法树，即在处理过程中就可以完成对CSS代码编译是否正确的验证过程，从而避免了相关技术中使用Node.js方法只有在程序运行Runtime时才可以确定编写是否正确、无法及时报错等弊端。

在一些可能的实施例中，每个字符流包括多个子串；所述节点类型包括：注释节点、申明节点、表达式节点、选择器节点中的任意一项或多项；

所述匹配模块，具体用于：基于所述预设的匹配规则和所述节点类型，利用预设编译器对所述至少一个页面的第一层叠样式表中字符流的子串进行节点类型匹配；

所述第一得到模块63，具体用于：若所述至少一个页面的第一层叠样式表中字符流的各子串均匹配到所述节点类型中的一项，得到所述至少一个页面的第一语法树。

在一些可能的实施例中，所述第二得到模块64之前，所述装置包括：上报模块，用于若所述至少一个页面的第一层叠样式表中存在至少一个子串与所述节点类型中的任意一项均不匹配，则所述预设编译器停止编译并上报所述至少一个页面的第一层叠样式表中不匹配的子串。

在一些可能的实施例中，所述匹配模块62之前，所述装置还包括：

第一建立模块，用于建立所述至少一个页面对应的第一类；

所述匹配模块62，具体用于：在所述至少一个页面对应的第一类中，基于所述匹配规则和所述节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配。

在一些可能的实施例中，所述第二得到模块64之前，所述装置还包括：

第二建立模块，用于建立第二类；其中，所述第二类包括至少一个插件；

所述第二得到模块64，具体用于：调用所述第二类中的至少一个插件对所述至少一个页面对应的第一类中的所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表。

在一些可能的实施例中，所述第二得到模块64，包括：

调用单元，用于调用所述第二类中的至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面的第二语法树；

得到单元，用于基于预设的算法对所述至少一个页面对应的第一类中的所述至少一个页面的第二语法树进行遍历，得到所述至少一个页面对应的第二层叠样式表。

在一些可能的实施例中，所述装置还包括：存储模块，用于对所述至少一个页面对应的第一层叠样式表和所述至少一个页面对应的第二层叠样式表进行存储。

需要说明的是，上述实施例提供的页面生成装置在执行页面生成方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的提高雷达系统激光测距能力的装置与提高雷达系统激光测距能力的方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

请参见图7，为本申请实施例提供了一种电子设备的结构示意图。如图7所示，所述电子设备70可以包括：至少一个处理器71，至少一个网络接口74，用户接口73，存储器75，至少一个通信总线72。

其中，通信总线72用于实现这些组件之间的连接通信。

其中，用户接口73可以包括显示屏(Display)、摄像头(Camera)，可选用户接口73还可以包括标准的有线接口、无线接口。

其中，网络接口74可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。

其中，处理器71可以包括一个或者多个处理核心。处理器71利用各种借口和线路连接整个电子设备70内的各个部分，通过运行或执行存储在存储器75内的指令、程序、代码集或指令集，以及调用存储在存储器75内的数据，执行电子设备70的各种功能和处理数据。可选的，处理器71可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable LogicArray，PLA)中的至少一种硬件形式来实现。处理器71可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器71中，单独通过一块芯片进行实现。

其中，存储器75可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器75包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器75可用于存储指令、程序、代码、代码集或指令集。存储器75可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器75可选的还可以是至少一个位于远离前述处理器71的存储装置。如图7所示，作为一种计算机存储介质的存储器75中可以包括操作系统、网络通信模块、用户接口模块以及提高雷达系统激光测距能力应用程序。

在图7所示的电子设备70中，用户接口73主要用于为用户提供输入的接口，获取用户输入的数据；而处理器71可以用于调用存储器75中存储的页面生成应用程序，并具体执行以下操作：

获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

在一种可能的实施例中，所述字符流包括多个子串；所述节点类型包括：注释节点、申明节点、表达式节点、选择器节点中的任意一项或多项；

所述处理器71在执行基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配时，具体执行：

基于所述预设的匹配规则和所述节点类型，利用预设编译器对所述至少一个页面的第一层叠样式表中字符流的子串进行节点类型匹配；

所述处理器71在执行所述在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型匹配的情况下，得到所述至少一个页面的第一语法树时，具体执行：若所述至少一个页面的第一层叠样式表中字符流的各子串均匹配到所述节点类型中的一项，得到所述至少一个页面的第一语法树。

在一种可能的实施例中，所述处理器71在所述利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表之前，还执行：

若所述至少一个页面的第一层叠样式表中存在至少一个子串与所述节点类型中的任意一项均不匹配，则所述预设编译器停止编译并上报所述至少一个页面的第一层叠样式表中不匹配的子串。

在一种可能的实施例中，所述处理器71在执行所述基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配之前，还执行：

建立所述至少一个页面对应的第一类；

所述处理器71在执行所述基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配时，具体执行：

在所述至少一个页面对应的第一类中，基于所述匹配规则和所述节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配。

在一种可能的实施例中，所述处理器71在执行所述利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表之前，还执行：建立第二类；其中，所述第二类包括至少一个插件；

所述处理器71在执行利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表时，具体执行：

调用所述第二类中的至少一个插件对所述至少一个页面对应的第一类中的所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表。

在一种可能的实施例中，所述处理器71在执行所述调用所述第二类中的至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表时，具体执行：

调用所述第二类中的至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面的第二语法树；

基于预设的算法对所述至少一个页面对应的第一类中的所述至少一个页面的第二语法树进行遍历，得到所述至少一个页面对应的第二层叠样式表。

在一种可能的实施例中，所述处理器71还执行对所述至少一个页面对应的第一层叠样式表和所述至少一个页面对应的第二层叠样式表进行存储。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质中存储有指令，当其在计算机或处理器上运行时，使得计算机或处理器执行上述图2和图4所示实施例中的一个或多个步骤。上述提高雷达系统激光测距能力装置的各组成模块如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在所述计算机可读取存储介质中。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者通过所述计算机可读存储介质进行传输。所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(Digital SubscriberLine，DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，数字多功能光盘(Digital VersatileDisc，DVD))、或者半导体介质(例如，固态硬盘(Solid State Disk，SSD))等。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，该程序可存储于计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。而前述的存储介质包括：制度存储器(Read Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可存储程序代码的介质。在不冲突的情况下，本实施例和实施方案中的技术特征可以任意组合。

以上所述的实施例仅仅是本申请的优选实施例方式进行描述，并非对本申请的范围进行限定，在不脱离本申请的设计精神的前提下，本领域普通技术人员对本申请的技术方案作出的各种变形及改进，均应落入本申请的权利要求书确定的保护范围内。

Claims (10)

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

获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

2.根据权利要求1所述的方法，其特征在于，所述字符流包括多个子串；所述节点类型包括：注释节点、申明节点、表达式节点、选择器节点中的任意一项或多项；

所述基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配，包括：

基于所述预设的匹配规则和所述节点类型，利用预设编译器对所述至少一个页面的第一层叠样式表中字符流的子串进行节点类型匹配；

所述在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型匹配的情况下，得到所述至少一个页面的第一语法树，包括：

若所述至少一个页面的第一层叠样式表中字符流的各子串均匹配到所述节点类型中的一项，得到所述至少一个页面的第一语法树。

3.根据权利要求2所述的方法，其特征在于，所述利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表之前，所述方法包括：

若所述至少一个页面的第一层叠样式表中存在至少一个子串与所述节点类型中的任意一项均不匹配，则所述预设编译器停止编译并上报所述至少一个页面的第一层叠样式表中不匹配的子串。

4.根据权利要求1所述的方法，其特征在于，所述基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配之前，所述方法还包括：

建立所述至少一个页面对应的第一类；

所述基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配，包括：

在所述至少一个页面对应的第一类中，基于所述匹配规则和所述节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配。

5.根据权利要求4所述的方法，其特征在于，所述利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表之前，所述方法还包括：

建立第二类；其中，所述第二类包括至少一个插件；

所述利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表，包括：

调用所述第二类中的至少一个插件对所述至少一个页面对应的第一类中的所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表。

6.根据权利要求5所述的方法，其特征在于，所述调用所述第二类中的至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表，包括：

调用所述第二类中的至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面的第二语法树；

基于预设的算法对所述至少一个页面对应的第一类中的所述至少一个页面的第二语法树进行遍历，得到所述至少一个页面对应的第二层叠样式表。

7.根据权利要求1-6任一所述的方法，其特征在于，所述方法还包括：

对所述至少一个页面对应的第一层叠样式表和所述至少一个页面对应的第二层叠样式表进行存储。

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

获取模块，用于获取至少一个插件和至少一个页面的信息；其中，页面的信息包括页面对应的第一层叠样式表；所述第一层叠样式表包括字符流；

匹配模块，用于基于预设的匹配规则和预设的节点类型对所述至少一个页面的第一层叠样式表中的字符流进行节点类型匹配；

第一得到模块，用于在所述至少一个页面的第一层叠样式表中的字符流与所述节点类型相互匹配的情况下，得到所述至少一个页面的第一语法树；

第二得到模块，用于利用所述至少一个插件对所述至少一个页面的第一语法树进行处理，得到所述至少一个页面对应的第二层叠样式表；

生成模块，用于基于所述至少一个页面对应的第二层叠样式表生成所述至少一个页面。

9.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1-7任一项的方法步骤。

10.一种电子设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由处理器加载并执行如权利要求1-7任一项的方法步骤。