动态表单技术揭秘-第一章:概述
随着To B领域在国内互联网行业的兴起,大量中后台、SASS系统涌现。这些系统当中至少50%的场景和表单有关,表单成为业务系统的必要条件。在企业级应用的开发中起到举足轻重的作用。
通常表单的场景都是相同或者类似的,如果能够对表单能力进行封装、建模让其能够通过配置的方式化繁为简,提升研发团队的效率,助力企业降本增效成为现阶段互联网企业都在探索和攻克的新课题。
虽然在整个领域已经有无数优秀的开源方案试图解决或已经解决了部分场景下的问题并且方案实现的能力和完整性以及整个生态环境良好。那么,在这样的前提下为什么还要做一个动态表单技术揭秘的系列文章呢?作者主要从以下几方面考虑:
- 知其然 知其所以然: 动态表单的解决方案不同于类似微前端的解决方案,微前端开源的解决方案,基本上调试成功之后很少去修改或配置它。但动态表单解决对业务的入侵很大,和业务绑定较深。如果对原理掌握不够,出现问题或者需求不满足的时候如何定制化开发会成为一个艰难的课题
- 原理介绍的文档不多: 开源方案的源码虽然我们能够获取到,但部分优秀的开源作品源码量庞大,结构复杂,但解释性的技术文档较少,需要开发者自己去研究并理解,成本较高高
- 部分程序员放弃对技术深度的思考: 在企业级系统的日常开发维护过程中,尤其是中后台系统,首先我们会使用一个框架,例如 react、vue,它们能够帮助我们解决很多问题,例如 事件分发、组件化、双向绑定、数据流的传递等。由于使用了框架,很多开发者很少有机会在开发的过程中接触到前端技术的核心本质。其次,在次基础之上我们一般还会配套一个ui组件库,例如 antd、iview等,用来做业务常用组件的开发工作,更多的是结合组件库的文档对其进行调用、组装业务逻辑。这里其实已经有很多同学不了解组件库的工作原理,不了解组件内部的实现,日常的工作成为 “组件调用工程师”或“业务胶水代码编写工程师”,最后,如果我们在组件库的外层再做一层封装,将组件通过配置的形式直接渲染,摆在开发人员面前的只有一个配置文件,那么长此以往,开发人员能力无法得到提升。
基于以上3点,为了让大家能够了解动态表单这项技术的本质,我尝试通过实际的代码案例,结合目前我们正在做的这方面的探索和实践,通过一些列的技术课程告诉大家如何能够从零到一建设一套这样的解决方案,以及过程中有哪些关键技术点需要考虑以及如何攻克。
整体技术架构图:
动态表单技术揭秘-第二章:Schema Parser 解析器原理详解
Schema Parser 解析 JSON Schema,将其转换为能够被表单组件解析的结构。JSON Schema 是一种用于描述数据格式和验证约束的标准,通过使用它来定义表单模型,可以避免硬编码表单布局和校验规则。
动态表单技术揭秘-第三章:Form Renderer 渲染引擎实现原理
Form Renderer 是一个表单渲染引擎,根据 Schema Parser 的输出结果将表单界面渲染出来。通过使用这个引擎,可以实现快速地创建表单界面,并且可以扩展支持不同类型的表单项。
动态表单技术揭秘-第四章:Data Model 数据建模
Data Model 是用于存储表单数据并与 UI 同步更新的模型。该模型用于管理表单的状态,可用于处理表单输入、输出和校验。在 Data Model 中,数据仅被存储在一个位置,以便更好地管理和控制。
动态表单技术揭秘-第五章:Validation Engine 校验引擎实现原理
Validation Engine 是用于按照 JSON Schema 中定义的规则对表单数据进行校验的引擎。它负责检查表单数据是否满足预期的格式和约束条件,并提供给用户实时反馈信息,帮助用户更容易地发现错误和纠正它们。
动态表单技术揭秘-第六章:Plugin System 插件系统
Plugin System 是用于支持动态表单功能扩展的插件系统。它允许用户自定义表单组件和布局方式,以适应不同的业务需求。通过使用插件系统,用户可以轻松添加新的组件或定制已有的组件,从而更好地满足自己的需求。
以上是动态表单架构需要考虑的主要方面,具体的实现方法和技术栈可能因项目需求而有所不同。在接下来的课程中,我会逐一为大家详细讲解各个模块的具体实现及原理,最终会附上完整的项目代码开源地址。
欢迎大家点赞、收藏,敬请期待!