CN114138372A - 前端组件加载方法及装置 - Google Patents

Abstract

本申请实施例提供一种前端组件加载方法及装置，可用于金融领域，方法包括：获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本；根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载；根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页；本申请能够有效提高前端工程开发的灵活性和开发效率。

Description

前端组件加载方法及装置

技术领域

本申请涉及前端软件开发领域，也可用于金融领域，具体涉及一种前端组件加载方法及装置。

背景技术

在前端开发过程中，前端代码在开发完成后就会打包为静态文件进行部署，代码功能不能再做任何修改。以前端渐进式框架组件Vue为例，在开发阶段，源代码通常以.vue文件存在，需要经过特定的源码解析器转换为浏览器支持的文件格式(例如js、css、html等)才可运行，在经过解析器解析并打包为静态文件后，就不支持再以源代码形式在运行态添加自定义组件。

发明人发现，由于打包后不能再以源代码形式添加自定义组件，就要求在开发阶段完全确定开发内容，因此当面临需要进行自定义功能扩展的需求时，只能尽量将所有可能的扩展情况都提前写入代码中，比如现有技术中通过开发一个参数化组件来应对该问题，在部署后通过接收的参数进行相应显示，但是这样不仅会带来额外的开发成本，而且参数化组件本身会成为业务扩展的瓶颈，在不能满足需求的情况下只能重新开发和部署，存在响应时间长的问题。

发明内容

针对现有技术中的问题，本申请提供一种前端组件加载方法及装置，能够有效提高前端工程开发的灵活性和开发效率。

为了解决上述问题中的至少一个，本申请提供以下技术方案：

第一方面，本申请提供一种前端组件加载方法，包括：

获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本；

根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载；

根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

进一步地，所述根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载，包括：

将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中；

将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

进一步地，在所述将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象之后，还包括：

若所述页面逻辑文本中不包含页面代码文本，则直接将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

进一步地，所述根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页，包括：

若所述样式文本中包含有特定局部属性标识符，则判定所述样式文本的样式类型为局部样式，并根据所述待加载组件源代码类名确定样式格式；

根据所述样式格式和所述样式文本网页样式标签，将所述网页样式标签挂在至所述目标网页的头文件中并重新渲染所述目标网页。

进一步地，在判定所述样式文本的样式类型为局部样式之前，还包括：

若所述样式文本中包含有特定预处理属性标识符，则判定所述样式文本的样式格式为预处理器格式；

调用与所述预处理器格式对应的预处理器对所述样式文本进行解析，得到解析后的样式文本。

第二方面，本申请提供一种前端组件加载装置，包括：

组件管理模块，用于获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本；

页面逻辑处理模块，用于根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载；

样式处理模块，用于根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

进一步地，所述页面逻辑处理模块包括：

代码转换单元，用于将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中；

组件构造单元，用于将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

第三方面，本申请提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的前端组件加载方法的步骤。

第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述的前端组件加载方法的步骤。

第五方面，本申请提供一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现所述的前端组件加载方法的步骤。

由上述技术方案可知，本申请提供一种前端组件加载方法及装置，通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

附图说明

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

图1为本申请实施例中的前端组件加载方法的流程示意图之一；

图2为本申请实施例中的前端组件加载方法的流程示意图之二；

图3为本申请实施例中的前端组件加载方法的流程示意图之三；

图4为本申请实施例中的前端组件加载方法的流程示意图之四；

图5为本申请实施例中的前端组件加载装置的结构图之一；

图6为本申请实施例中的前端组件加载装置的结构图之二；

图7为本申请实施例中的电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

考虑到现有技术中通过开发一个参数化组件来应对添加组件问题，在部署后通过接收的参数进行相应显示，但是这样不仅会带来额外的开发成本，而且参数化组件本身会成为业务扩展的瓶颈，在不能满足需求的情况下只能重新开发和部署，存在响应时间长的问题，本申请提供一种前端组件加载方法及装置，通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

为了能够有效提高前端工程开发的灵活性和开发效率，本申请提供一种前端组件加载方法的实施例，参见图1，所述前端组件加载方法具体包含有如下内容：

步骤S101：获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本。

可以理解的是，所述待加载组件是指在目标网页处于运行态时需要热加载至目标网页中的前端组件，例如前端渐进式架构组件Vue。

可选的，本申请可以通过特定接口获取待加载组件源代码，同时可以为待加载组件确定一对应的class类名，所述class类名用于在后续对页面逻辑文本和样式文本中限定当前组件的生效范围。

可选的，本申请可以通过现有技术对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本，以前端渐进式架构组件Vue为例，Vue组件通常包含页面(template)、逻辑(script)、样式(style)三部分，通过对其进行源代码拆分，可以分别得到由页面(template)和逻辑(script)部分组成的页面逻辑文本，以及由样式(style)部分组成的样式文本。

在本申请的其他一些可行实施例中，本申请还可以为待加载组件确定一对应的标识符。所述标识符用于避免同一个组件重复处理。

步骤S102：根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载。

可选的，所述页面逻辑文本可以包括页面代码文本(通常为<template>部分)和逻辑代码文本(通常为<script>部分)，本申请可以根据所述页面逻辑文本和上述待加载组件源代码类名进行网页脚本转换，即将其转换为目标网页的脚步程序中的JavaScript对象，而后构造得到对应的网页调用组件并对目标网页进行组件加载。

可选的，本申请可以将逻辑代码文本中export default{xxx}的{xxx}部分取出，转换为JavaScript对象，例如{data:xxx,methods:{xxx},…}。

同时，由于Vue组件中<template>为可选性，如果当前组件不包含<template>部分，则表示组件页面部分通过函数形式生成，这里不进行处理，如果包含则将页面代码文本<template>部分添加至刚才生成的JavaScript对象中，得到例如{template:“xxx”,data:xxx,methods:{xxx},…}的结构，然后在生成的JavaScript对象中，将唯一待加载组件源代码class类名添加至JavaScript对象的描述字段(template字段或render字段)。

接着以上述JavaScript对象为参数，调用Vue.extend方法生成当前组件的构造器，最后利用Vue自带的render方法将构造器生成为目标网页的网页调用组件，由此完成针对待加载组件的页面及逻辑的处理。

步骤S103：根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

可以理解的是，所述样式文本的通常格式为<style>xxx</style>。

可选的，本申请可以首先进行样本格式判断，当style标签包含lang属性时，则表示当前样式文本为预处理器格式，例如<style lang＝”scss”>xxx</style>或<style lang＝”less”>xxx</style>，浏览器无法直接渲染这种格式，需要调用对应预处理器进行解析后生成css格式的文本，如果不包含lang则表示文本已经是css格式，则不需要进行处理。

然后，本申请可以通过style标签是否包含scoped属性来判断当前样式是否为局部样式，例如<style scoped>xxx</style>表示当前文本为局部样式，为了限定生效范围，此时本申请可以在生成的css样式文本上增加待加载组件源代码class类名限定，最终生成的样式格式为.compName{xxx}，compName即为待加载组件源代码class类名。

最后，本申请将上述得到的css样式格式和css样式文本生成网页样式信息，例如style标签，挂载至目标网页的页面<head>部分，完成对Vue组件样式部分的处理。

由此，在经过样式处理和页面及逻辑处理后，完成了待加载组件的在线热加载过程，至此待加载组件已经可以正常使用，与现有技术中事先开发好的代码中组件使用无异。

从上述描述可知，本申请实施例提供的前端组件加载方法，能够通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

为了能够转换得到目标网页的网页调用组件，在本申请的前端组件加载方法的一实施例中，参见图2，上述步骤S102还可以具体包含如下内容：

步骤S201：将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中。

步骤S202：将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

可选的，所述页面逻辑文本可以包括页面代码文本(通常为<template>部分)和逻辑代码文本(通常为<script>部分)，本申请可以根据所述页面逻辑文本和上述待加载组件源代码类名进行网页脚本转换，即将其转换为目标网页的脚步程序中的JavaScript对象，而后构造得到对应的网页调用组件并对目标网页进行组件加载。

可选的，本申请可以将逻辑代码文本中export default{xxx}的{xxx}部分取出，转换为JavaScript对象，例如{data:xxx,methods:{xxx},…}。

如果当前组件包含<template>部分，则将页面代码文本<template>部分添加至刚才生成的JavaScript对象中，得到例如{template:“xxx”,data:xxx,methods:{xxx},…}的结构，然后在生成的JavaScript对象中，将唯一待加载组件源代码class类名添加至JavaScript对象的描述字段(template字段或render字段)。

接着以上述JavaScript对象为参数，调用Vue.extend方法生成当前组件的构造器，最后利用Vue自带的render方法将构造器生成为目标网页的网页调用组件，由此完成针对待加载组件的页面及逻辑的处理。

为了能够对由函数形式直接生成的页面代码文件进行处理，在本申请的前端组件加载方法的一实施例中，在上述步骤S201之后，还可以具体包含如下内容：

若所述页面逻辑文本中不包含页面代码文本，则直接将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

可选的，由于Vue组件中<template>为可选性，如果当前组件的页面逻辑文本中不包含<template>部分，则表示组件页面部分通过函数形式生成，则此时不进行处理，

为了能够准确得到并渲染目标网页的网页样式，在本申请的前端组件加载方法的一实施例中，参见图3，上述步骤S103还可以具体包含如下内容：

步骤S301：若所述样式文本中包含有特定局部属性标识符，则判定所述样式文本的样式类型为局部样式，并根据所述待加载组件源代码类名确定样式格式。

步骤S302：根据所述样式格式和所述样式文本网页样式标签，将所述网页样式标签挂在至所述目标网页的头文件中并重新渲染所述目标网页。

可选的，本申请可以通过style标签是否包含scoped属性来判断当前样式是否为局部样式，例如<style scoped>xxx</style>表示当前文本为局部样式，为了限定生效范围，此时本申请可以在生成的css样式文本上增加待加载组件源代码class类名限定，最终生成的样式格式为.compName{xxx}，compName即为待加载组件源代码class类名。

最后，本申请将上述得到的css样式格式和css样式文本生成网页样式信息，例如style标签，挂载至目标网页的页面<head>部分，完成对Vue组件样式部分的处理。

为了能够准确对样式文本中的预处理属性进行针对处理，在本申请的前端组件加载方法的一实施例中，参见图4，在上述步骤S301之前，还可以具体包含如下内容：

步骤S401：若所述样式文本中包含有特定预处理属性标识符，则判定所述样式文本的样式格式为预处理器格式。

步骤S402：调用与所述预处理器格式对应的预处理器对所述样式文本进行解析，得到解析后的样式文本。

可选的，本申请可以首先进行样本格式判断，当style标签包含lang属性时，则表示当前样式文本为预处理器格式，例如<style lang＝”scss”>xxx</style>或<style lang＝”less”>xxx</style>，浏览器无法直接渲染这种格式，需要调用对应预处理器进行解析后生成css格式的文本，如果不包含lang则表示文本已经是css格式，则不需要进行处理。

为了能够有效提高前端工程开发的灵活性和开发效率，本申请提供一种用于实现所述前端组件加载方法的全部或部分内容的前端组件加载装置的实施例，参见图5，所述前端组件加载装置具体包含有如下内容：

组件管理模块10，用于获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本。

页面逻辑处理模块20，用于根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载。

样式处理模块30，用于根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

从上述描述可知，本申请实施例提供的前端组件加载装置，能够通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

为了能够转换得到目标网页的网页调用组件，在本申请的前端组件加载装置的一实施例中，参见图6，所述页面逻辑处理模块20包括：

代码转换单元21，用于将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中。

组件构造单元22，用于将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

从硬件层面来说，为了能够有效提高前端工程开发的灵活性和开发效率，本申请提供一种用于实现所述前端组件加载方法中的全部或部分内容的电子设备的实施例，所述电子设备具体包含有如下内容：

处理器(processor)、存储器(memory)、通信接口(Communications Interface)和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述通信接口用于实现前端组件加载装置与核心业务系统、用户终端以及相关数据库等相关设备之间的信息传输；该逻辑控制器可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该逻辑控制器可以参照实施例中的前端组件加载方法的实施例，以及前端组件加载装置的实施例进行实施，其内容被合并于此，重复之处不再赘述。

可以理解的是，所述用户终端可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(PDA)、车载设备、智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表、智能手环等。

在实际应用中，前端组件加载方法的部分可以在如上述内容所述的电子设备侧执行，也可以所有的操作都在所述客户端设备中完成。具体可以根据所述客户端设备的处理能力，以及用户使用场景的限制等进行选择。本申请对此不作限定。若所有的操作都在所述客户端设备中完成，所述客户端设备还可以包括处理器。

上述的客户端设备可以具有通信模块(即通信单元)，可以与远程的服务器进行通信连接，实现与所述服务器的数据传输。所述服务器可以包括任务调度中心一侧的服务器，其他的实施场景中也可以包括中间平台的服务器，例如与任务调度中心服务器有通信链接的第三方服务器平台的服务器。所述的服务器可以包括单台计算机设备，也可以包括多个服务器组成的服务器集群，或者分布式装置的服务器结构。

图7为本申请实施例的电子设备9600的系统构成的示意框图。如图7所示，该电子设备9600可以包括中央处理器9100和存储器9140；存储器9140耦合到中央处理器9100。值得注意的是，该图7是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。

一实施例中，前端组件加载方法功能可以被集成到中央处理器9100中。其中，中央处理器9100可以被配置为进行如下控制：

步骤S101：获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本。

步骤S102：根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载。

步骤S103：根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

从上述描述可知，本申请实施例提供的电子设备，通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

在另一个实施方式中，前端组件加载装置可以与中央处理器9100分开配置，例如可以将前端组件加载装置配置为与中央处理器9100连接的芯片，通过中央处理器的控制来实现前端组件加载方法功能。

如图7所示，该电子设备9600还可以包括：通信模块9110、输入单元9120、音频处理器9130、显示器9160、电源9170。值得注意的是，电子设备9600也并不是必须要包括图7中所示的所有部件；此外，电子设备9600还可以包括图7中没有示出的部件，可以参考现有技术。

如图7所示，中央处理器9100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器9100接收输入并控制电子设备9600的各个部件的操作。

其中，存储器9140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器9100可执行该存储器9140存储的该程序，以实现信息存储或处理等。

输入单元9120向中央处理器9100提供输入。该输入单元9120例如为按键或触摸输入装置。电源9170用于向电子设备9600提供电力。显示器9160用于进行图像和文字等显示对象的显示。该显示器例如可为LCD显示器，但并不限于此。

该存储器9140可以是固态存储器，例如，只读存储器(ROM)、随机存取存储器(RAM)、SIM卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为EPROM等。存储器9140还可以是某种其它类型的装置。存储器9140包括缓冲存储器9141(有时被称为缓冲器)。存储器9140可以包括应用/功能存储部9142，该应用/功能存储部9142用于存储应用程序和功能程序或用于通过中央处理器9100执行电子设备9600的操作的流程。

存储器9140还可以包括数据存储部9143，该数据存储部9143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器9140的驱动程序存储部9144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。

通信模块9110即为经由天线9111发送和接收信号的发送机/接收机9110。通信模块(发送机/接收机)9110耦合到中央处理器9100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。

基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块9110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)9110还经由音频处理器9130耦合到扬声器9131和麦克风9132，以经由扬声器9131提供音频输出，并接收来自麦克风9132的音频输入，从而实现通常的电信功能。音频处理器9130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器9130还耦合到中央处理器9100，从而使得可以通过麦克风9132能够在本机上录音，且使得可以通过扬声器9131来播放本机上存储的声音。

本申请的实施例还提供能够实现上述实施例中的执行主体为服务器或客户端的前端组件加载方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的执行主体为服务器或客户端的前端组件加载方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：

步骤S101：获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本。

步骤S102：根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载。

步骤S103：根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

从上述描述可知，本申请实施例提供的计算机可读存储介质，通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

本申请的实施例还提供能够实现上述实施例中的执行主体为服务器或客户端的前端组件加载方法中全部步骤的一种计算机程序产品，该计算机程序/指令被处理器执行时实现所述的前端组件加载方法的步骤，例如，所述计算机程序/指令实现下述步骤：

步骤S101：获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本。

步骤S102：根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载。

步骤S103：根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

从上述描述可知，本申请实施例提供的计算机程序产品，通过在运行态接收前端源代码组件，并解析和渲染至前端页面中，从而达到在不重新打包编译部署的前提下，对前端工程进行自定义扩展，避免了以往需要额外开发和部署的问题，提高了前端工程的灵活程度，实现了前端功能模块热加载的效果，由此能够有效提高前端工程开发的灵活性和开发效率。

本领域内的技术人员应明白，本发明的实施例可提供为方法、装置、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(装置)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

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

Claims (10)

1.一种前端组件加载方法，其特征在于，所述方法包括：

获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本；

根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载；

根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

2.根据权利要求1所述的前端组件加载方法，其特征在于，所述根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载，包括：

将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中；

将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

3.根据权利要求2所述的前端组件加载方法，其特征在于，在所述将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象之后，还包括：

若所述页面逻辑文本中不包含页面代码文本，则直接将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

4.根据权利要求1所述的前端组件加载方法，其特征在于，所述根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页，包括：

若所述样式文本中包含有特定局部属性标识符，则判定所述样式文本的样式类型为局部样式，并根据所述待加载组件源代码类名确定样式格式；

根据所述样式格式和所述样式文本网页样式标签，将所述网页样式标签挂在至所述目标网页的头文件中并重新渲染所述目标网页。

5.根据权利要求4所述的前端组件加载方法，其特征在于，在判定所述样式文本的样式类型为局部样式之前，还包括：

若所述样式文本中包含有特定预处理属性标识符，则判定所述样式文本的样式格式为预处理器格式；

调用与所述预处理器格式对应的预处理器对所述样式文本进行解析，得到解析后的样式文本。

6.一种前端组件加载装置，其特征在于，包括：

组件管理模块，用于获取待加载组件源代码并确定对应的类名，对所述待加载组件源代码进行拆分，得到页面逻辑文本和样式文本；

页面逻辑处理模块，用于根据所述页面逻辑文本和所述待加载组件源代码类名进行网页脚本转换，得到对应的网页调用组件并对目标网页进行组件加载；

样式处理模块，用于根据所述样式文本和所述待加载组件源代码类名确定网页样式信息，将所述网页样式信息挂载至所述目标网页头文件中并重新渲染所述目标网页。

7.根据权利要求6所述的前端组件加载装置，其特征在于，所述页面逻辑处理模块包括：

代码转换单元，用于将所述页面逻辑文本中的逻辑代码文本转换为网页脚本对象，并将所述页面逻辑文本中的页面代码文本添加至所述网页脚本对象中；

组件构造单元，用于将所述待加载组件源代码类名添加为所述网页脚本对象的描述字段并以所述网页脚本对象为输入参数调用组件构造器，导出所述组件构造器输出的网页调用组件并对目标网页进行组件加载。

8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至5任一项所述的前端组件加载方法的步骤。

9.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至5任一项所述的前端组件加载方法的步骤。

10.一种计算机程序产品，包括计算机程序/指令，其特征在于，该计算机程序/指令被处理器执行时实现权利要求1至5任一项所述的前端组件加载方法的步骤。

Images