前端组件动态扩展的方法、系统及计算机可读存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN113220295A(43)申请公布日2021.08.06(21)申请号202110464243.0(22)申请日2021.04.26(71)申请人深圳市云网万店科技有限公司地址518002广东省深圳市罗湖区东门街道城东社区深南东路2028号罗湖商务中心3510-130单元(72)发明人丁一鸣(74)专利代理机构北京市万慧达律师事务所11111代理人黄玉东(51)Int.Cl.G06F8/38(2018.01)G06F8/41(2018.01)权利要求书1页说明书5页附图2页(54)发明名称前端组件动态扩展的方法、系统及计算机可读存储介质(57)摘要本发明属于软件技术开发领域，公开了一种前端组件动态扩展的方法及系统，该方法包括：打包编译组件的源代码并上传到组件库中存储；根据创建的页面从组件库选取相应的组件，并配置组件参数；对客户端站点发起的页面加载请求进行解析，以获取该页面加载所需的组件类型及组件源代码；同时，根据前端页面的布局，加载所需的组件到对应区域以呈现渲染内容。本发明提供的一种前端组件动态扩展的方法及系统，通过将前端组件进行独立打包开发，在项目中可实现灵活切换组件及扩展组件，针对在配置化的场景下，更加能提高大型单页面应用的加载性能，加速页面加载效率，极大提升了用户使用体验。CN113220295ACN113220295A权利要求书1/1页1.一种前端组件动态扩展的方法，其特征在于，所述方法包括：打包编译组件的源代码并上传到组件库中存储；根据创建的页面从组件库选取相应的组件，并配置组件参数；对客户端站点发起的页面加载请求进行解析，以获取该页面加载所需的组件类型及组件源代码；同时，根据前端页面的布局，加载所需的组件到对应区域以呈现渲染内容。2.根据权利要求1所述的前端组件动态扩展的方法，其特征在于，将前端页面应用程序的资源数据分拆成块，每块的资源数据分别对应为加载不同组件所需的组件源代码。3.根据权利要求2所述的前端组件动态扩展的方法，其特征在于，在所述前端页面中内置组件加载模块，所述组件加载模块根据配置的不同组件，从服务器获取相应的组件资源到前端页面中加载并运行。4.根据权利要求3所述的前端组件动态扩展的方法，其特征在于，所述的组件加载模块是基于UMD模块化设计的。5.根据权利要求4所述的前端组件动态扩展的方法，其特征在于，所述组件加载模块加载的组件包括页面内置组件和/或自定义组件。6.根据权利要求1所述的前端组件动态扩展的方法，其特征在于，所述组件的配置过程包括：创建页面，进行页面的布局配置；根据页面布局，选取相应的组件；配置组件的属性参数及效果参数，保存当前页面配置。7.根据权利要求1所述的前端组件动态扩展的方法，其特征在于，在打包编译组件的源代码后，将源代码进行压缩混淆后，再上传到所述组件库中。8.一种前端组件动态扩展的系统，其特征在于，所述系统包括：组件创建模块，用于打包编译组件的源代码并上传到组件库中存储；组件配置模块，用于根据创建的页面从组件库选取相应的组件，并配置组件参数；组件加载模块，对客户端站点发起的页面加载请求进行解析，以获取该页面加载所需的组件类型及组件源代码；同时，根据前端页面的布局，加载所需的组件到对应区域以呈现渲染内容。9.如权利要求8所述的前端组件动态扩展的系统，其特征在于，所述组件加载模块包括页面内置组件和/或自定义组件。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述方法的操作步骤。2CN113220295A说明书1/5页前端组件动态扩展的方法、系统及计算机可读存储介质技术领域[0001]本发明属于软件技术开发领域，尤其是涉及一种前端组件动态扩展的方法及系统。背景技术[0002]现有的单页面应用都是前端在开发后直接进行打包生成的，这部署后就固定了其页面代码和属性，是无法灵活根据业务变化实现扩展的，尤其对于在配置化报表项目中，这种形式将固定内容，无法快速实现内容扩展，也无法实现第三方加入扩展组件和内容。[0003]因此，在前端页面中，如何提高页面的扩展性和加载效率，是目前亟需解决的问题。发明内容[0004]针对现有技术中存在的上述缺陷，本发明的目的是，提供一种前端组件动态扩展的方法及系统，通过将前端组件进行独立打包开发，在项目中可实现灵活切换组件及扩展组件，针对在配置化的场景下，更加能提高大型单页面应用的加载性能，加速页面加载效率，提升用户使用体验。[0005]本发明的第一方面，提供了一种前端组件动态扩展的方法，该方法包括：[0006]打包编译组件的源代码并上传到组件库中存储；[0007]根据创建的页面从组件库选取相应的组件，并配置组件参数