共享前端组件的渲染方法、装置、设备及存储介质.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN111258675A(43)申请公布日2020.06.09(21)申请号202010043561.5(22)申请日2020.01.15(71)申请人平安银行股份有限公司地址518001广东省深圳市罗湖区深南东路5047号(72)发明人许海金(74)专利代理机构北京市京大律师事务所11321代理人刘挽澜(51)Int.Cl.G06F9/445(2018.01)G06F8/65(2018.01)权利要求书2页说明书12页附图4页(54)发明名称共享前端组件的渲染方法、装置、设备及存储介质(57)摘要本发明涉及研发管理技术领域，公开了一种共享前端组件的渲染方法、装置、设备及存储介质，根据用户指令下载对应的前端组件进行渲染，提高了工作效率。本发明方法包括：设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据预置JS对象和预置开发框架生成候选前端组件；根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件；根据渲染后的目标前端组件，生成JS文件；获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，在预置页面中生成相对应的渲染后的目标前端组件。CN111258675ACN111258675A权利要求书1/2页1.一种共享前端组件的渲染方法，其特征在于，包括：设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据所述预置JS对象和预置开发框架生成候选前端组件；根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。2.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件包括：将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。3.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件包括：根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。4.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，在所述设置开发框架的入口函数与JS对象的参数，所述参数包括入口函数的挂载节点值和渲染参数基础数据之前，所述方法还包括：定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；设置开发框架和开发框架的基础样式，获取预置开发框架。5.根据权利要求4所述的共享前端组件的渲染方法，其特征在于，所述设置开发框架和开发框架的基础样式，获取预置开发框架包括：设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。6.根据权利要求1-5中任一项所述的共享前端组件的渲染方法，其特征在于，所述根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染2CN111258675A权利要求书2/2页后的目标前端组件打包生成包括：将所述渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，所述全局对象为window对象；将所述挂载后的前端组件进行打包，得到打包文件；为所述打包文件配置组件名称，所述组件名称以所述打包文件的文件名称进行定义，得到JS文件；将所述JS文件上传至资源共享平台进行注册与发布，以实现对全部所述JS文件的存储。7.根据权利要求6所述的共享前端组件的渲染方法，其特征在于，所述获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染