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

作者简介

 

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

一、简介

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

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

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

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

二、乐高早期表单的实现

实现阶段1：手动开发

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

实现阶段2：动态表单1.0

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

配置面板如图：