一种前端领域通用表单组件封装方法及系统与流程

    技术2025-01-05  57


    本发明涉及web应用,具体地说是一种前端领域通用表单组件封装方法及系统。


    背景技术:

    1、传统的表单组件设计方法,通常需要根据业务需求,将表单组件分为多个组件,每个组件负责一个字段的输入。不管是原生的组件还是第三方的组件,都需要根据业务场景,自己渲染需要的组件,这要求我们必须学习和了解所使用的表单组件,尤其是自己封装的或者第三方封装的复杂表单组件,学习成本更高。在切换框架或平台时,即要重新学习这些组件,又要重新开发代码,而这种开发本身创造不了业务价值,只能消耗研发团队的时间和精力。


    技术实现思路

    1、本发明的技术任务是针对以上不足之处,提供一种前端领域通用表单组件封装方法及系统,能够减少研发人员的学习成本和开发成本,提高开发效率,同时支持多框架、多端、多平台的兼容性,实现研发人员开发一套业务代码,适用于不同平台和框架。

    2、本发明解决其技术问题所采用的技术方案是:

    3、一种前端领域通用表单组件封装方法,通过抽象表单组件,将表单组件的渲染逻辑与表单的配置逻辑分离出来,从而实现表单组件的动态化;该方法的实现包括:

    4、1)抽象表单组件;

    5、2)定义抽象表单组件的属性和配置;

    6、3)提供抽象表单组件的事件、钩子以及扩展;

    7、4)提供抽象表单的配置管理功能,使研发人员可以更容易的配置表单,可以通过配置功能适配不同项目、不同用户的个性化需求。

    8、该方法抽象表单组件,使研发人员可以更快的实现表单功能,降低学习成本,减少重复代码,提高开发效率,且更适配市场多变和个性化的需求。

    9、进一步的,所述抽象表单组件,抽象了表单的渲染引擎,由渲染引擎根据当前运行的平台和环境,决定使用何种渲染组件;

    10、抽象表单组件抽取校验逻辑,由校验引擎负责校验,将校验结果抛给渲染引擎,由渲染引擎根据校验结果,决定如何更改渲染状态;

    11、抽象表单组件抽取表单数据,由表单数据引擎负责处理,将表单数据抛给渲染引擎,由渲染引擎根据表单数据,决定如何渲染表单;

    12、表单渲染引擎渲染的组件,监听到表单数据变化,通知表单数据引擎,更新表单数据;通知表单校验引擎,校验表单数据,而是否校验,根据配置决定。

    13、进一步的,所述渲染组件,包括:文本渲染、文本输入框、多行文本输入框、数字输入框、下拉框、日期选择框、单选框、复选框、树形选择器、穿梭框、通用帮助框、自定义表单组件等。

    14、进一步的,所述定义抽象表单组件的属性和配置,包括:

    15、2.1)表单支持自定义样式属性,根据不同平台的规则,传递样式属性;

    16、2.2)表单支持传递表单数据配置,数据使用json形式,支持双向绑定;

    17、2.3)表单支持传递表单项配置,数据使用json形式,配置均支持动态计算。

    18、进一步的,所述表单支持传递表单项配置,配置包括每个表单项的渲染栅格数、渲染类型、校验规则、校验错误提示、渲染条件、渲染组件所需的属性等信息,这些配置均支持动态计算,给业务提供灵活的配置能力。

    19、进一步的,所述提供抽象表单组件的事件、钩子以及扩展,

    20、表单组件暴露出业务层需要的事件,包括:表单项输入、表单校验成功、校验失败、表单提交成功、表单提交失败、表单提交前、表单提交后、表单提交时等,供业务研发人员根据这些事件,完成业务逻辑,更改业务表单的数据或者其他业务操作;

    21、表单组件暴露出业务层需要的钩子,包括:表单项校验、表单校验、表单提交、表单提交前、表单提交后、表单提交时等,供业务研发人员根据业务管理表单的声明周期;

    22、表单组件提供插槽扩展能力,以满足业务开发更加复杂的研发需求。

    23、进一步的,所述提供抽象表单的配置管理功能,在实施了抽象表单后,在实施的系统中,开发管理表单配置的功能,包括:

    24、配置表单的配置管理功能,要支持系统级的默认表单配置、功能级的表单配置、用户级的表单配置,以支持配置的动态变更;

    25、配置表单的配置管理功能,要有表单项的校验功能,防止破坏性修改,验证成功后,数据持久化到持久层。

    26、本发明还要求保护一种前端领域通用表单组件封装系统,包括:

    27、表单组件抽象模块,用于抽象表单的渲染引擎;

    28、抽象表单组件定义模块,用于定义抽象表单组件的属性和配置;

    29、表单组件,提供抽象表单组件的事件、钩子以及扩展;

    30、抽象表单配置模块,实现抽象表单的配置管理功能,使研发人员可以更容易的配置表单,可以通过配置功能适配不同项目、不同用户的个性化需求;

    31、该系统通过上述的前端领域通用表单组件封装方法实现表单组件封装。

    32、本发明还要求保护一种实现前端领域通用表单组件封装的装置,包括:至少一个存储器和至少一个处理器;

    33、所述至少一个存储器,用于存储机器可读程序;

    34、所述至少一个处理器,用于调用所述机器可读程序,实现上述的方法。

    35、本发明还要求保护计算机可读介质,所述计算机可读介质上存储有计算机指令,所述计算机指令在被处理器执行时,使所述处理器能够实现上述的方法。

    36、本发明的一种前端领域通用表单组件封装方法及系统与现有技术相比,具有以下有益效果:

    37、通过使用本方法,抽象表单组件,使研发人员可以更快的实现表单功能,降低学习成本,减少重复代码,提高开发效率,且更适配市场多变和个性化的需求。



    技术特征:

    1.一种前端领域通用表单组件封装方法,其特征在于,通过抽象表单组件,将表单组件的渲染逻辑与表单的配置逻辑分离出来,从而实现表单组件的动态化;该方法的实现包括:

    2.根据权利要求1所述的一种前端领域通用表单组件封装方法,其特征在于,所述抽象表单组件,抽象了表单的渲染引擎,由渲染引擎根据当前运行的平台和环境,决定使用何种渲染组件;

    3.根据权利要求2所述的一种前端领域通用表单组件封装方法,其特征在于,所述渲染组件,包括:文本渲染、文本输入框、多行文本输入框、数字输入框、下拉框、日期选择框、单选框、复选框、树形选择器、穿梭框、通用帮助框、自定义表单组件。

    4.根据权利要求1所述的一种前端领域通用表单组件封装方法,其特征在于,所述定义抽象表单组件的属性和配置,包括:

    5.根据权利要求4所述的一种前端领域通用表单组件封装方法,其特征在于,所述表单支持传递表单项配置,配置包括每个表单项的渲染栅格数、渲染类型、校验规则、校验错误提示、渲染条件、渲染组件所需的属性信息,这些配置均支持动态计算。

    6.根据权利要求1所述的一种前端领域通用表单组件封装方法,其特征在于,所述提供抽象表单组件的事件、钩子以及扩展,

    7.根据权利要求1所述的一种前端领域通用表单组件封装方法,其特征在于,所述提供抽象表单的配置管理功能,在实施了抽象表单后,在实施的系统中,开发管理表单配置的功能,包括:

    8.一种前端领域通用表单组件封装系统,其特征在于,包括:

    9.一种实现前端领域通用表单组件封装的装置,其特征在于,包括:至少一个存储器和至少一个处理器;

    10.计算机可读介质,其特征在于,所述计算机可读介质上存储有计算机指令,所述计算机指令在被处理器执行时,使所述处理器能够实现权利要求1至7任一所述的方法。


    技术总结
    本发明公开了一种前端领域通用表单组件封装方法及系统,属于web应用技术领域,通过抽象表单组件,将表单组件的渲染逻辑与表单的配置逻辑分离出来,从而实现表单组件的动态化;该方法的实现包括:1)抽象表单组件;2)定义抽象表单组件的属性和配置;3)提供抽象表单组件的事件、钩子以及扩展;4)提供抽象表单的配置管理功能,通过配置功能适配不同项目、不同用户的个性化需求。本发明能够减少研发人员的学习成本和开发成本,提高开发效率,同时支持多框架、多端、多平台的兼容性,实现研发人员开发一套业务代码,适用于不同平台和框架。

    技术研发人员:张文杰
    受保护的技术使用者:山东浪潮数字商业科技有限公司
    技术研发日:
    技术公布日:2024/10/24
    转载请注明原文地址:https://symbian.8miu.com/read-24622.html

    最新回复(0)