前端代码共享的方法、装置、电子设备以及存储介质制造方法及图纸

本申请公开了一种前端代码共享的方法、装置、电子设备以及存储介质。该方法应用于客户端，客户端用于与服务端连接，该方法包括：响应于针对目标应用的访问事件，从服务端获取目标应用的业务代码文件和目标应用的基础框架文件的标识；若目标应用的基础框架文件的标识与客户端本地的基础框架文件的标识匹配，则读取客户端本地的基础框架文件；基于业务代码文件和从客户端本地读取的基础框架文件，加载目标应用。本申请通过在目标应用的基础框架文件命中客户端本地的基础框架文件时，基于目标应用的业务代码文件以及从客户端本地读取的基础框架文件，加载目标应用，提高了前端代码的复用程度和共享性，也降低了加载目标应用的成本。本。本。

【技术实现步骤摘要】
前端代码共享的方法、装置、电子设备以及存储介质


[0001]本申请涉及软件
，更具体地，涉及一种前端代码共享的方法、装置、电子设备以及存储介质。

技术介绍

[0002]近年来，随着微服务架构的流行，前端微服务架构也日趋流行。在项目开发工作中，微前端架构中各个前端虽然各自独立开发、部署，但用户看起来仍然是个内聚的单个产品。因此，目前，项目页面设计中前端代码可以共享，以保持各子前端界面风格、交互风格的一致。然而由于各个前端相互独立，相关技术中，前端代码共享仍存在复用不彻底的问题。

技术实现思路

[0003]鉴于上述问题，本申请提出了一种前端代码共享的方法、装置、电子设备以及存储介质，可以通过在目标应用的基础框架文件命中客户端本地的基础框架文件时，基于目标应用的业务代码文件以及从客户端本地读取的基础框架文件，加载目标应用，提高了前端代码的复用程度和共享性，也降低了加载目标应用的成本。
[0004]第一方面，本申请实施例提供了一种前端代码共享的方法，应用于客户端，所述客户端用于与服务端连接，所述方法包括：响应于针对目标应用的访问事件，从所述服务端获取所述目标应用的业务代码文件和所述目标应用的基础框架文件的标识，其中，所述基础框架文件为多个应用的共享文件；若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识匹配，则读取所述客户端本地的基础框架文件；基于所述业务代码文件和从所述客户端本地读取的基础框架文件，加载所述目标应用。
[0005]第二方面，本申请实施例提供了一种前端代码共享的装置，应用于电子设备，所述装置包括：访问响应模块、标识匹配模块以及目标应用加载模块。其中，访问响应模块，用于响应于针对目标应用的访问事件，从所述服务端获取所述目标应用的业务代码文件和所述目标应用的基础框架文件的标识，其中，所述基础框架文件为多个应用的共享文件；标识匹配模块，用于若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识匹配，则读取所述客户端本地的基础框架文件；目标应用加载模块，用于基于所述业务代码文件和从所述客户端本地读取的基础框架文件，加载所述目标应用。
[0006]第三方面，本申请实施例提供了一种电子设备，包括存储器和处理器，所述存储器耦接到所述处理器，所述存储器存储指令，当所述指令由所述处理器执行时所述处理器执行上述方法。
[0007]第四方面，本申请实施例提供了一种计算机可读取存储介质，所述计算机可读取存储介质中存储有程序代码，所述程序代码可被处理器调用执行上述方法。
[0008]本申请实施例提供的前端代码共享的方法、装置、电子设备以及存储介质，应用于客户端，客户端用于与服务端连接，通过响应于针对目标应用的访问事件，从服务端获取目标应用的业务代码文件和目标应用的基础框架文件的标识，若目标应用的基础框架文件的
标识与客户端本地的基础框架文件的标识匹配，确定目标应用的基础框架文件命中客户端本地的基础框架文件，读取客户端本地的基础框架文件，以基于业务代码文件和从客户端本地读取的基础框架文件，加载目标应用。进而基于客户端的本地资源加载应用，降低了加载应用的耗能和成本，提高了客户端本地的前端代码的复用程度和共享性。
附图说明
[0009]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。
[0010]图1示出了相关技术中提供的前端代码共享的方法的流程示意图；
[0011]图2示出了本申请一实施例提供的前端代码共享的方法的流程示意图；
[0012]图3示出了本申请一实施例提供的前端代码共享的方法的流程示意图；
[0013]图4示出了本申请一实施例提供的前端代码共享的方法的流程示意图；
[0014]图5示出了本申请一实施例提供的前端代码共享的方法的流程示意图；
[0015]图6示出了本申请一实施例提供的前端代码共享的方法的流程示意图；
[0016]图7示出了本申请一实施例提供的前端代码共享的装置的模块框图；
[0017]图8示出了本申请实施例用于执行根据本申请实施例的前端代码共享的方法的电子设备的框图；
[0018]图9示出了本申请实施例的用于保存或者携带实现根据本申请实施例的前端代码共享的方法的程序代码的存储单元。
具体实施方式
[0019]为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
[0020]前端近年来一直在尝试如何提高开发人员的效率，从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线IDE，大家都在为未来的新的且高效率的方式做着努力。
[0021]相关技术中，请参阅图1，开发人员通过将可以共享的代码上传到npm仓库，其他的开发者再通过npm仓库的下载功能，将代码下载到自身的仓库中，并通过npm包管理工具将代码在多个项目进行代码共享。其中，npm是JavaScript脚本语言运行时环境Node.js的默认包管理器。但是，利用前端代码完成项目构建后，产生的公共包的名称都会发生变化，导致每一次上线后需要重新加载新的公共资源。但其中大部分资源都是未发生改变的，这样并没有很好的利用浏览器缓存的策略。因此，相关技术中，前端可以共享的代码的缓存策略不灵活。另外，每个项目构建都需要花费时间，并且项目的包产物中含有大量重复的代码，但是生产包部署到不同的域名，浏览器缓存的代码包也是独立的，没有在多个业务域名下复用。因此相关技术中，前端可以共享的代码的复用不彻底。
[0022]针对上述问题，专利技术人经过长期的研究发现，并提出了本申请实施例提供的前端代码共享的方法、装置、电子设备以及存储介质，通过在目标应用的基础框架文件命中客户
端本地的基础框架文件时，基于目标应用的业务代码文件以及从客户端本地读取的基础框架文件，加载目标应用，提高了前端代码的复用程度和共享性，也降低了加载目标应用的成本。其中，具体的前端代码共享的方法在后续的实施例中进行详细的说明。
[0023]请参阅图2，图2示出了本申请一实施例提供的前端代码共享的方法的流程示意图。该前端代码共享的方法应用于客户端，客户端用于与服务端连接，通过响应于针对目标应用的访问事件，从服务端获取目标应用的业务代码文件和目标应用的基础框架文件的标识，若目标应用的基础框架文件的标识与客户端本地的基础框架文件的标识匹配，确定目标应用的基础框架文件命中客户端本地的基础框架文件，读取客户端本地的基础框架文件，以基于业务代码文件和从客户端本地读取的基础框架文件，加载目标应用，降低了加载应用的耗能和成本，提高了客户端本地的前端代码的复用程度和共享性。在具体的实施例中，该前端代码共享的方法可以应用于如图7所示的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端代码共享的方法，其特征在于，应用于客户端，所述客户端用于与服务端连接，所述方法包括：响应于针对目标应用的访问事件，从所述服务端获取所述目标应用的业务代码文件和所述目标应用的基础框架文件的标识，其中，所述基础框架文件为多个应用的共享文件；若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识匹配，则读取所述客户端本地的基础框架文件；基于所述业务代码文件和从所述客户端本地读取的基础框架文件，加载所述目标应用。2.根据权利1所述的方法，其特征在于，所述方法还包括：若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识不匹配，则从所述服务端获取所述目标应用的基础框架文件；基于所述业务代码文件和从所述服务端获取的基础框架文件，加载所述目标应用。3.根据权利要求2所述的方法，其特征在于，所述若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识不匹配，则从所述服务端获取所述目标应用的基础框架文件，包括：若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识不匹配，检测所述访问事件对应的访问次数；若所述访问次数为一次，则从所述服务器获取所述目标应用的基础框架文件；或者若所述访问次数大于一次，则从所述目标应用所在的浏览器的缓存中获取所述目标应用的基础框架文件，其中，所述浏览器中的所述目标应用的基础框架文件为在所述客户端首次从所述服务端获取所述目标应用的基础框架文件缓存。4.根据权利要求2所述的方法，其特征在于，所述客户端还用于与内容分发网络连接，所述内容分发网络还与所述服务端连接，所述若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识不匹配，则从所述服务端获取所述目标应用的基础框架文件，包括：若所述目标应用的基础框架文件的标识与所述客户端本地的基础框架文件的标识不匹配，则从所述内容分发网络获取所述目标应用的基础框架文件，其中，所述目标应用程序的基础框架文件由所述服务端构建完成，并经数据压缩技术压缩后发送至所述内容分发网络。5.根据权利要求1所述的方法，其特征在于，在所述若所述目标应用的基础框架文件的标识与所述客户端本地的基...

【专利技术属性】
技术研发人员：黄良兴，
申请(专利权)人：深圳市欢太数字科技有限公司，
类型：发明
国别省市：