CN114238831A - Html代码片段的处理方法、系统、电子设备和存储介质 - Google Patents

Abstract

本发明涉及页面开发技术领域，提供一种HTML代码片段的处理方法、系统、电子设备和存储介质。所述HTML代码片段的处理方法包括：对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；基于闭包机制隔离所述第一代码部分的作用域，生成模块化组件；对所述第二代码部分进行服务端渲染，生成HTML字符串；以及，生成含所述模块化组件和所述HTML字符串的目标组件。本发明通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；进而使用闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件，并对HTML代码部分和CSS代码部分进行服务端初步渲染，以提高组件的渲染性能，提升页面渲染效率。

Description

HTML代码片段的处理方法、系统、电子设备和存储介质

技术领域

本发明涉及页面开发技术领域，具体地说，涉及一种HTML代码片段的处理方法、系统、电子设备和存储介质。

背景技术

目前，部分页面是基于HTML(Hyper Text Markup Language，超文本标记语言)、CSS(Cascading Style Sheets，层叠样式表)和普通JS(JavaScript)或者jQuery(一种快速、简洁的JavaScript框架)开发的。这些页面的HTML代码(包含HTML片段，CSS片段和JS片段)定制化、硬编码，因此无法复用，也只能在客户端渲染，导致每次都需要重复开发，或者通过拷贝代码并修改具体数据的方式，耗时耗力，且可靠性不够。

如何将这些定制化的HTML代码转化成可复用的组件，并能够在服务端渲染，是本领域亟需解决的问题。

需要说明的是，上述背景技术部分公开的信息仅用于加强对本发明的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

有鉴于此，本发明提供一种HTML代码片段的处理方法、系统、电子设备和存储介质，能够将定制化的HTML代码(基于CSS片段和JS或者jQuery片段)转化为可复用的组件，并能够在服务端初步渲染。

根据本发明的一个方面，提供一种HTML代码片段的处理方法，包括：对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；基于闭包机制隔离所述第一代码部分的作用域，生成模块化组件；对所述第二代码部分进行服务端渲染，生成HTML字符串；以及，生成含所述模块化组件和所述HTML字符串的目标组件。

在一些实施例中，所述第一代码部分包含至少一个JS代码段；所述基于闭包机制隔离所述第一代码部分的作用域，包括：使用闭包函数包裹各所述JS代码段，生成至少一个功能组件；根据各所述JS代码段的属性数据，设定各所述功能组件的作用域变量，使所述目标组件被调用时各所述功能组件通过对应的作用域变量获取对应的属性数据。

在一些实施例中，所述生成含所述模块化组件和所述HTML字符串的目标组件之后，还包括：当所述目标组件被调用时，所述模块化组件中的各所述功能组件获得分发的作用域变量；各所述功能组件根据对应的作用域变量，获取对应的属性数据；根据所述属性数据将所述模块化组件渲染至H5页面，并将所述HTML字符串渲染至所述H5页面，生成目标页面。

在一些实施例中，所述生成模块化组件之后，还包括：向所述模块化组件分发公共方法，使所述目标组件包含所述公共方法。

在一些实施例中，所述公共方法包括：跳转处理、图片懒加载和公共埋点。

在一些实施例中，所述生成模块化组件之后，还包括：为所述模块化组件添加执行所需的环境依赖。

在一些实施例中，所述对所述第二代码部分进行服务端渲染，包括：使用React组件包裹所述第二代码部分；对所述React组件进行服务端渲染，以同时渲染所述第二代码部分。

根据本发明的一个方面，提供一种HTML代码片段的处理系统，包括：源代码解析模块，用于对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；模块化处理模块，用于基于闭包机制隔离所述第一代码部分的作用域，生成模块化组件；服务端渲染模块，用于对所述第二代码部分进行服务端渲染，生成HTML字符串；以及，目标组件生成模块，用于生成含所述模块化组件和所述HTML字符串的目标组件。

根据本发明的一个方面，提供一种电子设备，包括：一处理器；一存储器，所述存储器中存储有可执行指令；其中，所述可执行指令被所述处理器执行时，实现如上述任意实施例所述的HTML代码片段的处理方法。

根据本发明的一个方面，提供一种计算机可读的存储介质，用于存储程序，所述程序被处理器执行时实现如上述任意实施例所述的HTML代码片段的处理方法。

本发明与现有技术相比的有益效果至少包括：

通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用；

采用本发明的技术方案，相对于普通的HTML代码片段而言解耦了组件，不仅使得定制化的HTML代码片段组件化，从而更方便管理，实现一次开发重复使用，节省人力成本；此外还利用服务端渲染提高组件的渲染性能，提升页面渲染效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出本发明一实施例中HTML代码片段的处理方法的步骤示意图；

图2示出本发明一实施例中HTML代码片段的处理方法的场景示意图；

图3示出本发明一实施例中HTML代码片段的处理系统的模块示意图；

图4示出本发明一实施例中电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的实施方式。相反，提供这些实施方式使本发明全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

附图仅为本发明的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

此外，附图中所示的流程仅是示例性说明，不是必须包括所有的步骤。例如，有的步骤可以分解，有的步骤可以合并或部分合并，且实际执行的顺序有可能根据实际情况改变。具体描述时使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。需要说明的是，在不冲突的情况下，本发明的实施例及不同实施例中的特征可以相互组合。

现有的页面开发方式，需要重复开发相同功能的代码片段，或者通过拷贝代码，并且修改具体数据的方式来使用已经开发过的代码片段，十分繁琐。HTML代码相对于框架代码来说，没有现成的隔离作用域的方式，因此无法通过一个公共的框架代码分发给同一个片段不同的属性参数，导致HTML代码不方便写组件复用；且HTML代码是针对客户端渲染开发的，并没有考虑服务端渲染，因此也没有现成的机制能够实现HTML代码在服务端渲染。

本发明的技术方案，能够实现将HTML代码片段(基于CSS片段和JS或者jQuery片段)转换为可复用的组件，并能够在服务端初步渲染，并嵌入H5页面，实现一次开发多次复用。

图1示出一实施例中HTML代码片段的处理方法的主要步骤，图2示出一实施例HTML代码片段的处理方法的示例场景，结合图1和图2所示，本实施例的HTML代码片段的处理方法包括：

步骤S110，对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分。

参照图2所示，HTML代码片段是指基于特定需求，已经开发好的HTML资源200，其中包含了HTML代码部分、CSS代码部分和JS代码部分(基于普通JS或者jQuery)。对HTML代码片段进行解析，也即拆解代码，从中解析出第一代码部分进行后续的模块化处理，以及第二代码部分进行后续的服务端渲染。

步骤S120，基于闭包机制隔离第一代码部分的作用域，生成模块化组件。

第一代码部分中，包含至少一个JS代码段，每个JS代码段用于实现一种功能。基于闭包机制隔离第一代码部分的作用域，具体包括：使用闭包函数包裹各JS代码段，生成至少一个功能组件；根据各JS代码段的属性数据，设定各功能组件的作用域变量，使目标组件被调用时各功能组件通过对应的作用域变量获取对应的属性数据。

闭包函数是JavaScript的一个功能函数，能够隔离HTML代码片段的执行作用域，形成模块化。使用闭包函数包裹JS代码部分后，还分发各个功能组件后续渲染需要的属性数据，具体是为各功能组件设定作用域变量，以使各个功能组件在被调用时使用约定的作用域变量获取属性数据，进行后续渲染。

参照图2所示，对JS代码部分进行模块化处理，能够生成至少一个功能组件300。

进一步地，对JS代码部分进行模块化处理之后，还包括：向模块化组件分发公共方法，使目标组件包含公共方法，从而进一步提高代码开发效率。参照图2所示，公共方法具体可包括：跳转处理、图片懒加载和公共埋点。根据开发需要，还可向模块化组件分发其他的公共方法，此处不再列举。

此外，生成模块化组件之后，还包括：为模块化组件添加执行所需的环境依赖，例如jQuery工具库、Underscore工具库等。Underscore是一个JavaScript实用库，提供一整套函数式编程的实用功能，弥补部分jQuery没有实现的功能。

步骤S130，对第二代码部分进行服务端渲染，生成HTML字符串。

为了在服务端也能渲染HTML代码片段，因此拆解代码，单独渲染HTML代码部分和CSS代码部分。

对第二代码部分进行服务端渲染(SSR，Server Side Render)，具体包括：使用React组件包裹第二代码部分；对React组件进行服务端渲染，以同时渲染第二代码部分。React组件可以是自定义的，通过在服务端把HTML代码片段的HTML代码部分和CSS代码部分解析出来，并用自定义的React组件包裹，从而在React的服务端渲染的时候实现将HTML代码部分和CSS代码部分同时渲染。

步骤S140，生成含模块化组件和HTML字符串的目标组件400。

从而，上述的HTML代码片段的处理方法，通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用。

进一步地，生成含模块化组件和HTML字符串的目标组件之后，还可包括：当目标组件被调用时，模块化组件中的各功能组件获得分发的作用域变量；各功能组件根据对应的作用域变量，获取对应的属性数据；根据属性数据将模块化组件渲染至H5页面，并将HTML字符串渲染至H5页面，生成目标页面。

目标组件被调用的场景，例如，在一个页面开发平台中，可以通过调用目标组件的方式，直接加载定制化的基于HTML+JS+CSS已经开发好的页面功能，方便快捷。页面开发平台在调用并渲染目标组件时，会向模块化组件分发作用域变量；从而，各个功能组件根据各自的作用域变量，获得各自配置的属性数据，渲染至目标H5页面中。同时，在服务端已经完成初步渲染的HTML字符串也能快速地渲染至H5页面中，高效地生成目标页面。从而，通过一次开发，实现多次配置使用。

综上，本发明的HTML代码片段的处理方法，实现了将HTML代码片段转换为通用组件并嵌入H5页面。具体来说，本发明的HTML代码片段的处理方法通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用。采用本发明的技术方案，相对于普通的HTML代码片段而言解耦了组件，不仅使得定制化的HTML代码片段组件化，从而更方便管理，实现一次开发重复使用，节省人力成本；此外还利用服务端渲染提高组件的渲染性能，提升页面渲染效率。

本发明实施例还提供一种HTML代码片段的处理系统，可用于实现上述任意实施例描述的HTML代码片段的处理方法。上述任意实施例描述的HTML代码片段的处理方法的特征和原理均可应用至下面的HTML代码片段的处理系统实施例。在下面的HTML代码片段的处理系统实施例中，对已经阐明的关于HTML代码片段的模块化处理、服务端渲染和目标组件渲染等特征和原理不再重复说明。

图3示出一实施例中HTML代码片段的处理系统的主要模块，参照图3所示，本实施例的HTML代码片段的处理系统500包括：源代码解析模块510，用于对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；模块化处理模块520，用于基于闭包机制隔离第一代码部分的作用域，生成模块化组件；服务端渲染模块530，用于对第二代码部分进行服务端渲染，生成HTML字符串；以及，目标组件生成模块540，用于生成含模块化组件和HTML字符串的目标组件。

进一步地，HTML代码片段的处理系统500还可包括实现上述各HTML代码片段的处理方法实施例的其他流程步骤的模块，各个模块的具体原理可参照上述各HTML代码片段的处理方法实施例的描述，此处不再重复说明。

如上所述，本发明的HTML代码片段的处理系统，能够通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用；采用本发明的技术方案，相对于普通的HTML代码片段而言解耦了组件，不仅使得定制化的HTML代码片段组件化，从而更方便管理，实现一次开发重复使用，节省人力成本；此外还利用服务端渲染提高组件的渲染性能，提升页面渲染效率。

本发明实施例还提供一种电子设备，包括处理器和存储器，存储器中存储有可执行指令，可执行指令被处理器执行时，实现上述任意实施例描述的HTML代码片段的处理方法。

本发明的电子设备可部署于服务端，能够实现通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用；采用本发明的技术方案，相对于普通的HTML代码片段而言解耦了组件，不仅使得定制化的HTML代码片段组件化，从而更方便管理，实现一次开发重复使用，节省人力成本；此外还利用服务端渲染提高组件的渲染性能，提升页面渲染效率。

图4是本发明实施例中电子设备的结构示意图，应当理解的是，图4仅仅是示意性地示出各个模块，这些模块可以是虚拟的软件模块或实际的硬件模块，这些模块的合并、拆分及其余模块的增加都在本发明的保护范围之内。

如图4所示，电子设备600以通用计算设备的形式表现。电子设备600的组件包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同平台组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，存储单元存储有程序代码，程序代码可以被处理单元610执行，使得处理单元610执行上述任意实施例描述的HTML代码片段的处理方法的步骤。例如，处理单元610可以执行如图1所示的HTML代码片段的处理步骤。

存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

存储单元620还可以包括具有一个或多个程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700通信，外部设备700可以是键盘、指向设备、蓝牙设备等设备中的一种或多种。这些外部设备700使得用户能与该电子设备600进行交互通信。电子设备600也能与一个或多个其它计算设备进行通信，所示计算机设备包括路由器、调制解调器。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。

本发明实施例还提供一种计算机可读的存储介质，用于存储程序，程序被执行时实现上述任意实施例描述的HTML代码片段的处理方法。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行上述任意实施例描述的HTML代码片段的处理方法。

本发明的存储介质可由部署于服务端的处理器执行，能够实现通过对HTML代码片段进行解析，获得HTML代码部分、CSS代码部分和JS/jQuery代码部分；通过闭包机制隔离JS/jQuery代码部分的作用域，生成可复用的模块化组件；并对HTML代码部分和CSS代码部分进行服务端初步渲染，以加快后续渲染进程并便于目标组件的调用；采用本发明的技术方案，相对于普通的HTML代码片段而言解耦了组件，不仅使得定制化的HTML代码片段组件化，从而更方便管理，实现一次开发重复使用，节省人力成本；此外还利用服务端渲染提高组件的渲染性能，提升页面渲染效率。

程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，其可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子包括但不限于：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备，例如利用因特网服务提供商来通过因特网连接。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (10)

1.一种HTML代码片段的处理方法，其特征在于，包括：

对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；

基于闭包机制隔离所述第一代码部分的作用域，生成模块化组件；

对所述第二代码部分进行服务端渲染，生成HTML字符串；以及

生成含所述模块化组件和所述HTML字符串的目标组件。

2.如权利要求1所述的处理方法，其特征在于，所述第一代码部分包含至少一个JS代码段；

所述基于闭包机制隔离所述第一代码部分的作用域，包括：

使用闭包函数包裹各所述JS代码段，生成至少一个功能组件；

根据各所述JS代码段的属性数据，设定各所述功能组件的作用域变量，使所述目标组件被调用时各所述功能组件通过对应的作用域变量获取对应的属性数据。

3.如权利要求2所述的处理方法，其特征在于，所述生成含所述模块化组件和所述HTML字符串的目标组件之后，还包括：

当所述目标组件被调用时，所述模块化组件中的各所述功能组件获得分发的作用域变量；

各所述功能组件根据对应的作用域变量，获取对应的属性数据；

根据所述属性数据将所述模块化组件渲染至H5页面，并将所述HTML字符串渲染至所述H5页面，生成目标页面。

4.如权利要求1所述的处理方法，其特征在于，所述生成模块化组件之后，还包括：

向所述模块化组件分发公共方法，使所述目标组件包含所述公共方法。

5.如权利要求4所述的处理方法，其特征在于，所述公共方法包括：跳转处理、图片懒加载和公共埋点。

6.如权利要求1所述的处理方法，其特征在于，所述生成模块化组件之后，还包括：

为所述模块化组件添加执行所需的环境依赖。

7.如权利要求1所述的处理方法，其特征在于，所述对所述第二代码部分进行服务端渲染，包括：

使用React组件包裹所述第二代码部分；

对所述React组件进行服务端渲染，以同时渲染所述第二代码部分。

8.一种HTML代码片段的处理系统，其特征在于，包括：

源代码解析模块，用于对HTML代码片段进行解析，获得基于JS语言的第一代码部分、及基于HTML语言和CSS语言的第二代码部分；

模块化处理模块，用于基于闭包机制隔离所述第一代码部分的作用域，生成模块化组件；

服务端渲染模块，用于对所述第二代码部分进行服务端渲染，生成HTML字符串；以及

目标组件生成模块，用于生成含所述模块化组件和所述HTML字符串的目标组件。

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

一处理器；

一存储器，所述存储器中存储有可执行指令；

其中，所述可执行指令被所述处理器执行时，实现如权利要求1-7任一项所述的HTML代码片段的处理方法。

10.一种计算机可读的存储介质，用于存储程序，其特征在于，所述程序被处理器执行时实现如权利要求1-7任一项所述的HTML代码片段的处理方法。

Images