作者简介
Daryl,携程高级研发经理,关注业界大前端及高并发应用解决方案。
一、简介
在很多软件系统中,表单开发都是很重要的一个部分。在表单开发中,往往会遇到重复开发的问题,例如在页面搭建系统中,除了组件本身的逻辑,配置组件数据的表单通常也需要开发人员重复手动开发。这就导致开发人员不仅要维护组件本身的逻辑,还要维护组件的配置表单,严重影响组件的开发和迭代效率。
为了让开发人员更加专注于组件本身的逻辑处理,我们开发了DynamicForm动态表单配置系统,可以通过拖拽的方式,快速创建一个表单。
DynamicForm是由携程市场营销”活动平台”及”会员平台”共同设计的React表单组件,它包括表单可视化设计、校验、预览、渲染等功能。目前最重要的应用场景,是为乐高平台提供组件属性配置的动态化表单配置能力。
乐高平台是探索组件化构建页面的实际应用,期望通过归纳常规web组件和业务组件,归纳单一职责服务接口从而构建出通过配置自动生成h5页面的方案,以达到代码复用,逻辑复用,节省开发时间,经验积累,节省页面上线时间等目的。
二、乐高早期表单的实现
实现阶段1:手动开发
乐高最初完全使用定制化开发的形式来实现属性表单,这样做的好处是表单外观可以随心所欲,界面对于运营可以做的非常友好。当然,缺点也是显而易见的,定制化的开发无法满足快速迭代的活动运营要求,往往一个需求来了立马就要上线,这个时候定制化的开发和发布流程就会严重制约生产力。
实现阶段2:动态表单1.0
乐高表单第二版使用的是半自动化表单,支持动态配置表单控件类型和表单校验等。
配置面板如图: