背景
本项目是 formily 的一个非严格意义上的 fork。fork 的原因当然是非常看好这一套设计但是官方又似乎停止维护了。因此才有了 fork 出去独立维护的想法。表单一直是中后台开发当中的重难点,每个前端都有一套自己的写法。如果没有一套统一的框架去管理则项目的可维护性会急剧下降。
有人可能会说已经 AI 时代了,我为什么还需要自己写表单?我为什么还需要这套东西来管理?直接AI一把梭不好吗?如果你完全放弃了自己维护的可能,从头到尾到后期的维护问题排查全部都是 Vibe Coding 可能问题也不大。如果还想保持表单的可维护性,特别是整个项目的表单开发心智的一致性,那 formily 还是有价值的。不如说在 AI 时代反而更合适了,因为个人认为 formily 这套框架最大的问题还是学习成本过高,然而这部分学习成本是可以被 AI 抹平的。
介绍
简单的来说是一个跨前端框架的表单框架,他的生态非常的复杂,每一个模块都各司其职,如果不对各个模块的职责有了解那学习也无从谈起。
可以先从模块分层来建立整体认知:
基础模块
这些模块并不算是 formily 核心,但是又是 formily 运行的基础。
| 模块 | 职责 |
|---|---|
@silver-formily/shared | 提供底层通用工具和类型辅助,供多个运行时包共享。目前没有文档 |
@silver-formily/reactive | 提供响应式状态能力,是 observable、reaction 和依赖追踪的基础。 |
提示
基础模块可以先不急着学习,但需要了解 formily 框架使用的是一套与任何前端框架无关的、独立的响应式。如果不清楚这一点在使用过程中会碰上很多问题。
核心模块
这些模块负责 formily 的运行时模型、Schema 语义和表单能力编排。
| 模块 | 职责 |
|---|---|
@silver-formily/core | 表单运行时核心,负责表单状态、字段生命周期、effects 编排和校验调度。 |
@silver-formily/json-schema | 提供 Schema 描述层,把 JSON Schema 风格结构映射到表单运行时语义。 |
@silver-formily/validator | 提供声明式校验能力,支持规则、格式、本地化和异步校验。 |
@silver-formily/path | 提供路径解析、模式匹配和深层访问工具,供运行时模块复用。 |
formily的写法可以分为两个大类 Template/JSX/TSX 的写法和 Schema 的写法。其中 Schema 的写法又分为 MarkupSchema 和 JSONSChema。对于初学者来说如果一开始就要用 Schema 的写法不免有些学习曲线过于陡峭。个人建议刚开始使用时可以避开 Schema 的写法。这样的好处是可以先少看一个文档,降低学习成本。
@silver-formily/validator 和 @silver-formily/path 其实也是 @silver-formily/core 的补充,为了方便管理才独立出来的依赖,可以在使用时碰到了再查阅文档。
提示
重点需要学习的是 @silver-formily/core。
前端框架绑定
| 模块 | 职责 |
|---|---|
@silver-formily/vue | Vue 3 渲染层,负责字段组件、Schema 渲染和 Vue 侧适配能力。 |
@silver-formily/reactive-vue | 将响应式内核接入 Vue 3,负责 observer、生命周期联动和副作用绑定。 |
@silver-formily/vue提供了@silver-formily/core的领域模型的 Vue 的封装。@silver-formily/reactive-vue提供了@silver-formily/reactive响应式与 Vue 绑定的封装。
这两个包都是属于胶水层,实际开发时存在感会更强一些,因为很少会直接用到 @silver-formily/core 或者直接用到 @silver-formily/reactive,一般都会通过这前端框架绑定库来使用其能力。
UI 绑定
这些模块把核心能力接入具体前端框架和组件库,形成可直接使用的表单界面。
| 模块 | 职责 |
|---|---|
@silver-formily/element-plus | 提供基于 Element Plus 的桌面端表单组件绑定和场景化封装。 |
@silver-formily/vant | 提供基于 Vant 的移动端表单组件绑定和场景化封装。 |
@silver-formily/grid | 提供响应式栅格布局能力,根据容器尺寸、断点和字段跨度组织表单布局。 |
在实际使用时用的最多的模块(@silver-formily/grid 例外,@silver-formily/grid 是不同的前端组件库封装中通用的网格布局封装)。可以根据需要选择(目前好像也没得选)。