组件化的前端开发方法、装置、计算机设备和存储介质制造方法及图纸

技术编号:38265706 阅读:13 留言:0更新日期:2023-07-27 10:23
本申请涉及一种组件化的前端原生开发方法、装置、计算机设备、存储介质和计算机程序产品。所述方法包括:在接收到浏览器发送的运行请求的情况下,获取与运行请求对应的前端信息,确认前端信息中的必加载组件和可加载组件;前端信息均根据浏览器的原生接口得到;加载必加载组件,生成浏览器的前端页面;在接收到前端页面发送的组件调用请求的情况下,从可加载组件中,识别出与组件调用请求对应的目标组件;在前端页面上,加载目标组件。采用本方法,能够提高前端页面的运行性能。能够提高前端页面的运行性能。能够提高前端页面的运行性能。

【技术实现步骤摘要】
组件化的前端开发方法、装置、计算机设备和存储介质


[0001]本申请涉及互联网
,特别是涉及一种组件化的前端开发方法、装置、计算机设备、存储介质和计算机程序产品。

技术介绍

[0002]随着互联网技术的发展,出现了浏览器的前端开发技术;前端开发,是指将数据转换为图形界面,以供用户查看数据并与数据进行交互的过程。
[0003]在传统的前端开发技术中,通常是按照例如Bootstrap、Vue以及React等第三方框架来进行开发,同时按需将其他第三方库集成到第三方框架中,最后再将程序统一编译成浏览器能够读懂的静态代码。然而,不同的第三方框架之间互不兼容,因此会导致开发出来的组件之间发生冲突、覆盖以及篡改等问题,从而使得前端页面的运行性能较低。

技术实现思路

[0004]基于此,有必要针对上述技术问题,提供一种能够提高前端页面的运行性能的组件化的前端开发方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
[0005]第一方面,本申请提供了一种组件化的前端开发方法。所述方法包括:
[0006]在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
[0007]加载所述必加载组件,生成所述浏览器的前端页面;
[0008]在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
[0009]在所述前端页面上,加载所述目标组件。
[0010]在其中一个实施例中,所述可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;
[0011]在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件之前,还包括:
[0012]针对各个所述可加载组件,根据所述可加载组件的特征信息,确认所述可加载组件的类型;
[0013]根据所述可加载组件的类型,从所述预设的入栈堆栈中,确认所述可加载组件的目标入栈元素;在所述预设的入栈堆栈中,各个入栈元素对应于所述可加载组件的各个运行状态;
[0014]加载所述可加载组件至预加载入栈元素对应的预运行状态;所述预加载入栈元素为所述预设的入栈堆栈中,所述目标入栈元素的上一个入栈元素;
[0015]所述在所述前端页面上,加载所述目标组件,包括:
[0016]将所述目标组件从所述预运行状态,加载至所述预设的入栈堆栈中的栈底元素对
应的运行状态。
[0017]在其中一个实施例中,所述可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;
[0018]在所述前端页面上,加载所述目标组件之后,还包括:
[0019]针对各个所述可加载组件,根据所述可加载组件的类型,从所述预设的出栈堆栈中,确认所述可加载组件的目标出栈元素;在所述预设的出栈堆栈中,各个出栈元素对应于所述可加载组件的各个删除状态;
[0020]响应于所述前端页面发送的组件删除请求,将所述目标组件从所述预设的入栈堆栈中的栈底元素对应的运行状态,加载至所述目标出栈元素对应的删除状态;
[0021]响应于所述前端页面发送的页面注销请求,将所述目标组件从所述目标出栈元素对应的删除状态,加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态;
[0022]在各个所述可加载组件均加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销所述前端页面,释放所述前端页面的缓存空间。
[0023]在其中一个实施例中,所述确认所述前端信息中的必加载组件和可加载组件,包括:
[0024]根据页面信息的标识,在所述前端信息中识别出所述页面信息;所述页面信息为所述浏览器的首页对应的信息;
[0025]将所述页面信息对应的组件确认为所述必加载组件;
[0026]将所述前端信息对应的组件中除所述必加载组件之外的组件,确认为所述可加载组件。
[0027]在其中一个实施例中,所述在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件,包括:
[0028]获取所述组件调用请求携带的组件标识;
[0029]根据所述组件标识,从所述可加载组件中,识别出与所述组件标识对应的可加载组件;
[0030]将所述与所述组件标识对应的可加载组件,确认为所述与所述组件调用请求对应的目标组件。
[0031]在其中一个实施例中,在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息之前,还包括:
[0032]响应于针对初始前端信息的编译指令,对所述前端页面的初始前端信息进行压缩处理;
[0033]将压缩处理后的初始前端信息中的自定义标识更新为随机标识,得到所述前端页面的前端信息。
[0034]第二方面,本申请还提供了一种组件化的前端原生开发装置。所述装置包括:
[0035]组件确认模块,用于在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
[0036]第一加载模块,用于加载所述必加载组件,生成所述浏览器的前端页面;
[0037]组件识别模块,用于在接收到所述前端页面发送的组件调用请求的情况下,从所
述可加载组件中,识别出与所述组件调用请求对应的目标组件;
[0038]第二加载模块,用于在所述前端页面上,加载所述目标组件。
[0039]第三方面,本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:
[0040]在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
[0041]加载所述必加载组件,生成所述浏览器的前端页面;
[0042]在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;
[0043]在所述前端页面上,加载所述目标组件。
[0044]第四方面,本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:
[0045]在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;
[0046]加载所述必加载组件,生成所述浏览器的前端页面;
[0047]在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种组件化的前端原生开发方法,其特征在于,所述方法包括:在接收到浏览器发送的运行请求的情况下,获取与所述运行请求对应的前端信息,确认所述前端信息中的必加载组件和可加载组件;所述前端信息均根据所述浏览器的原生接口得到;加载所述必加载组件,生成所述浏览器的前端页面;在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件;在所述前端页面上,加载所述目标组件。2.根据权利要求1所述的方法,其特征在于,所述可加载组件按照预设的入栈堆栈中的各个入栈元素依次进行加载;在接收到所述前端页面发送的组件调用请求的情况下,从所述可加载组件中,识别出与所述组件调用请求对应的目标组件之前,还包括:针对各个所述可加载组件,根据所述可加载组件的特征信息,确认所述可加载组件的类型;根据所述可加载组件的类型,从所述预设的入栈堆栈中,确认所述可加载组件的目标入栈元素;在所述预设的入栈堆栈中,各个入栈元素对应于所述可加载组件的各个运行状态;加载所述可加载组件至预加载入栈元素对应的预运行状态;所述预加载入栈元素为所述预设的入栈堆栈中,所述目标入栈元素的上一个入栈元素;所述在所述前端页面上,加载所述目标组件,包括:将所述目标组件从所述预运行状态,加载至所述预设的入栈堆栈中的栈底元素对应的运行状态。3.根据权利要求2所述的方法,其特征在于,所述可加载组件按照预设的出栈堆栈中的各个出栈元素依次进行删除;在所述前端页面上,加载所述目标组件之后,还包括:针对各个所述可加载组件,根据所述可加载组件的类型,从所述预设的出栈堆栈中,确认所述可加载组件的目标出栈元素;在所述预设的出栈堆栈中,各个出栈元素对应于所述可加载组件的各个删除状态;响应于所述前端页面发送的组件删除请求,将所述目标组件从所述预设的入栈堆栈中的栈底元素对应的运行状态,加载至所述目标出栈元素对应的删除状态;响应于所述前端页面发送的页面注销请求,将所述目标组件从所述目标出栈元素对应的删除状态,加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态;在各个所述可加载组件均加载至所述预设的出栈堆栈中的栈顶元素对应的删除状态的情况下,注销所述前端页面,释放所述前端页面的缓存空间。4.根据权利要...

【专利技术属性】
技术研发人员:李书亮沈巍张建金恒昱刘彬
申请(专利权)人:浙大网新科技股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1