专栏首页携程技术干货 | 携程动态表单DynamicForm的设计与实现

干货 | 携程动态表单DynamicForm的设计与实现

作者简介

Daryl,携程高级研发经理,关注业界大前端及高并发应用解决方案。

一、简介

在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重复手动开发。这就导致开发人员不仅要维护组件本身的逻辑,还要维护组件的配置表单,严重影响组件的开发和迭代效率。

为了让开发人员更加专注于组件本身的逻辑处理,我们开发了DynamicForm动态表单配置系统,可以通过拖拽的方式,快速创建一个表单。

DynamicForm是由携程市场营销”活动平台”及”会员平台”共同设计的React表单组件,它包括表单可视化设计、校验、预览、渲染等功能。目前最重要的应用场景,是为乐高平台提供组件属性配置的动态化表单配置能力。

乐高平台是探索组件化构建页面的实际应用,期望通过归纳常规web组件和业务组件,归纳单一职责服务接口从而构建出通过配置自动生成h5页面的方案,以达到代码复用,逻辑复用,节省开发时间,经验积累,节省页面上线时间等目的。

二、乐高早期表单的实现

实现阶段1:手动开发

乐高最初完全使用定制化开发的形式来实现属性表单,这样做的好处是表单外观可以随心所欲,界面对于运营可以做的非常友好。当然,缺点也是显而易见的,定制化的开发无法满足快速迭代的活动运营要求,往往一个需求来了立马就要上线,这个时候定制化的开发和发布流程就会严重制约生产力。

实现阶段2:动态表单1.0

乐高表单第二版使用的是半自动化表单,支持动态配置表单控件类型和表单校验等。

配置面板如图:

此版本的表单不支持可视化拖拽,控件自上而下顺序排列。解决了需求快读迭代的问题,但因为无法自定义布局,随之带来了属性的臃肿以及运营人员操作复杂的问题。

因此我们开发了动态表单2.0(DynamicForm)。

DynamicForm在乐高平台的应用

为了应对乐高组件快速迭代的业务需求,必须研发出一种能够让组件属性快速得到应用的表单技术框架,这样以保证在组件新增属性时,无需进行新代码的开发,仅需通过简单的配置即可生成新的组件属性。

为了达到表单配置的灵活性,DynamicForm必须满足以下几个条件:

1)丰富的表单控件类型

DynamicForm包含了以下内容,满足了多样化的配置要求。

  • 通用控件:文本框、单选框、多选框、下拉选择、颜色选择、图片上传等
  • 自定义控件:组件可视化选择,热区定义,JSON可视化配置控件等。

2)DIY表单界面

运维人员可以通过对控件拖拽,实时编辑的形式,对表单进行自由设计,以达到理想的UI效果。

3)表单控件配置

可以对控件的默认值、是否必填、提示信息、控件宽度、正则匹配等进行自由配置,以达到理想效果。

4)表单数据关联

为了达到表单的属性项的关联,需配置数据关联,控制分组关联等。

配置界面示例见下图:

二、亮点

已实现的DynamicForm具有如下亮点:

  • 可视化:可视化搭建、修改和预览表单
  • 可拖拽布局:控件可在画布内拖拽至任意坐标,以搭建最佳布局
  • 可扩展:可二次开发,可扩展控件集
  • 可联动:某个控件可以控制别的控件的显示和隐藏
  • 支持复杂数据类型:支持对象结构以及对象数组结构等复杂数据类型(JSON)的配置

三、架构

DynamicForm架构设计的目的是降低表单的维护成本、降低开发人力,解决表单开发中常见的联动、校验、自定义展示等问题。

3.1 功能梳理

Dynamic的核心功能包括联动、校验、扩展、可视化等。

  • 联动:某个控件变化后,改变其他控件的显示和隐藏。
  • 校验:通过正则表达式(预留或者自定义)进行表单校验。
  • 扩展:支持自定义控件和校验。
  • 可视化:支持可视化拖拽和可视化编辑,节省开发表单时间,并降低运营的配置成本。

3.2 架构模块

渲染流程:

系统有表单生成器编辑面板Form Generator,表单渲染入口Form Viewer两个主要模块。

这两个模块共用常规的基础组件如输入框,颜色选择等,还有一些基于业务扩展的复杂组件,例如热区选择,视频上传,数据聚合(JSON列表)等。

动态表单一个比较重要的点是需要解决JSON可视化配置,为此表单也开发了table列表式的JSON列表组件,子项的配置就基于嵌套表单实现配置字段,并且能够增删改查条目,excel导入,导出数据。

其他复杂数据类型配置,如["a","b"]和["a","c"],表单提交数据结构即为{a:{b:"",c:""}}

另外一个功能点是解决动态属性间的联动问题,为此表单通过配置联动表达式解决了控件联动问题,例如控制显隐等。

表单底层则依赖React(hooks),Ant Design的主题UI库,Mobx。

3.3 灵活的布局

  • 组件自由拖拽布局,自动对齐等
  • 组件可控制添加分组,从而批量操作布局

3.4 校验

提供预留的常规校验,如中文,英文校验等,以及可自定义扩展的校验配置。

四、后续计划

DynamicForm将作为独立的npm模块使用,为其他动态表单场景提供公共功能,打造泛应用动态表单。

DynamicForm代码开源,与社区共同交流与进步。

【推荐阅读】

 “携程技术”公众号

  分享,交流,成长

文章分享自微信公众号:
携程技术中心

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:​Daryl
原始发表时间:2022-03-10
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 干货 | 携程开源配置中心Apollo的设计与实现

    作者简介 宋顺,携程框架研发部技术专家。2016年初加入携程,主要负责中间件产品的相关研发工作。毕业于复旦大学软件工程系,曾就职于大众点评,担任后台系统技术负责...

    携程技术
  • 携程开源项目——Apollo的设计与实现

    内容来源:2017 年 7 月 22 日,携程框架研发部技术专家宋顺在“携程技术沙龙 | 海量互联网基础架构”进行《携程开源配置中心Apollo的设计与实现》演...

    IT大咖说
  • 动态表单的设计与实现(基于Vue ElementUI)

    在xxx信息管理这种业务场景中我认为最常见的操作就是对字段的处理(例如查询、编辑等区域的表单、图表的列名、表格的列名),而字段恰恰是最为 '规范的',它有自己的...

    用户7741497
  • 干货 | 实现一个属于你的“语言”-携程Kotlin DSL开发与实践

    DSL(domain specific language),即领域专用语言:专门解决某一特定问题的计算机语言。由于它是以简洁的形式进行表达,整体上直观易懂,使得...

    携程技术
  • 干货 | 携程微信小程序如何进行Size治理

    作者简介 携程前端框架团队,为携程集团各业务线在PC、H5、小程序等各阶段提供优秀的Web解决方案。产品涉及各类前端/Node端应用框架、研发工作台、前端中台...

    携程技术
  • 干货 | 携程机票前端Svelte生产实践

    作者简介 shuan feng,携程高级前端开发工程师,关注性能优化、低代码、svelte等领域。 一、技术调研 最近几年,前端框架层出不穷。近两年,前端圈又...

    携程技术
  • Attribute(特性),怎么用才更好?

    前几年:   2008年的某一天,我坐火车去北京。硬卧上铺,一晚上就到北京了。爬到上铺之后发现,旁边上铺有一老兄抱着一个笔记本,一开始还以为是看电影呢,仔细一...

    用户1174620
  • 干货 | 携程活动搭建平台的前端“开放性”建设探索

    作者简介 Jackie,携程前端开发,关注组件化开发,低代码式建设,致力于通过前端技术解决现实问题。 乐高系统是携程市场研发部开发的活动搭建平台,主要满足运营...

    携程技术
  • 干货 | 携程中台化背景下的元数据驱动架构实践

    为解决系统重复建设、能力复用性低的问题,携程启动了中台化建设步伐。旅游行业的中台建设,携程并非从零开始,前期已经积累了行业中多个场景的业务和技术的中台能力。因系...

    携程技术
  • 作为架构师,如何结合业务特点进行架构优化?

    流量洪峰所带来的一系列挑战,足以激发每位程序员的斗志:高并发、大吞吐、紧急扩容、降级保护……那么,作为程序员,应该如何应对? 今晚8点整,携程集团机票业务技术...

    腾讯大讲堂
  • k3cloud开发实例

           插件Building路径(K3Cloud\K3CloudServer\Bin\)

    py3study
  • 干货 | React Native实践之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套程...

    携程技术
  • React Native之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试。但有一个痛点是,在移动端,我们是否有必要开发多套...

    xiangzhihong
  • 干货 | 携程基于 GraphQL 的前端 BFF 服务开发实践

    作者简介 工业聚,携程高级前端开发专家,react-lite, react-imvc, farrow 等开源项目作者。 兰迪咚,携程高级前端开发专家,对开发框...

    携程技术
  • 敏捷转型,以用户为中心——携程的项目管理实践

    移动互联网时代,产品更新迭代日新月异,企业如何永葆活力不断创新呢?在“2016中国IT项目管理大会”上,携程作为中国旅游电商首席提出,积极拥抱变化,合力前行,但...

    携程技术
  • 干货 | 从47%到80%,携程酒店APP流畅度提升实践

    作者简介 Jin,携程高级研发经理,专注移动技术开发;Dan,携程测试开发经理,关注数据挖掘以及数据在系统质量提升中的应用;Lanbo,携程软件技术专家,专注...

    携程技术
  • 干货 | 已配置4000+页面,携程前端组件化探索之“乐高”运营系统

    市场部活动组主要负责各种运营活动的相关开发,分为常规运营活动和定制运营活动。常规运营活动因为组件(模块)具有复用性,并且配置化需求非常多,因此我们建设了一个可视...

    携程技术
  • 学生个人网页设计作品:旅游网页设计与实现——成都旅游网站4个页HTML+CSS web前端网页设计期末课程大作业 学生DW静态网页设计 学生个人网页设计作品

    ?‍?静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计?‍?,一般的网页作业需要融入以下知识点:div布局、浮动定位、高级css、表...

    IT司马青衫

扫码关注腾讯云开发者

领取腾讯云代金券