从formily v1的版本使用到formily v2正式版本的使用与开发,有了一点心得体会,分享给大家:
首先来了解下formily是什么:
基于本人的理解,它主要是用于表单场景的使用,antd大家都很清楚,就不多说,formily是一个在antd的基础上二次封装,不需要再写繁重的表单逻辑,直接可通过json格式配置的一个新的ui框架
按照使用antd或element等ui框架的使用习惯,我们通常会这样来定义一个表单:
(图片来自于antd官网)
但基于使用formily的习惯,我们定义一个表单,通过用json的格式配置出一个页面,传入相应的组件名以及使用方法等
(样例本地获取)
将写好的json传入fomily暴露出来的相应方法:
样例本地获取)
以下为展示效果,基本于antd中form的表单展示效果一样
(图片来自于本地)
基于官网:它能实现的功能有很多,解决很多问题,例如:1.字段数量多,如何让性能不随字段数量增加而变差?2.字段关联逻辑复杂,如何更简单的实现复杂的联动逻辑?字段与字段关联时,如何保证不影响表单性能?3.表单数据管理复杂 4.表单状态管理复杂 5.表单的场景化复用 6.动态渲染述求很强烈 7.如何在表单协议中描述逻辑?等问题。它是阿里数字供应链团队,在经历了大量的中后台实践和探索之后,沉淀出的 Formily 表单解决方案
领域模型:
首先表单联动是非常复杂的,基本上都是基于某些字段的值引发的联动,但是,实际业务需求可能会比较恶心,不仅要基于某些字段值引发联动,还会基于其他副作用值引发联动,用张图片表示:(图片来自官网)
(field基本模型,图片来自官网)
协议驱动:
为了不污染标准 JSON-Schema 属性,统一以x-*格式来表达扩展属性,通俗来说,我们使用antd的组件的时候,我们希望使用他的属性,我们可以直接按照antd的文档属性直接使用,另外formily现有的控件或者antd现有的控件还不能满足我们的使用要求的时候,我们可以自行封装组件,然后注册进去(怎么自行封装组件以及注册,下次再说),相关属性也可通过"x-component-props"属性去传入
这样看来,UI 协议与数据协议混合在一起,只要有一个统一的扩展约定,也还是能保证两种协议职责单一。
(图片来自官网)
然后,如果想要在某些字段上包裹一个 UI 容器怎么办呢?这里,Formily 定义了一个新的 schema type,叫void,在 JSON Schema 中,引入 void,代表一个虚数据节点,表示该节点并不占用实际数据结构
(图片来自官网)
那么讲到字段联动:
{
"type": "object",
"properties": {
"source": {
"type": "string",
"title": "Source",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
}
},
"target": {
"type": "string",
"title": "Target",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
},
"x-reactions": [
{
"dependencies": ["source"],
"when": "{{$deps[0] == '123'}}",
"fulfill": {
"state": {
"visible": true
}
},
"otherwise": {
"state": {
"visible": false
}
}
}
]
}
}
}
可以在x-reactions中进行相关操作,借助x-reactions描述了 target 字段,依赖了 source 字段的值,如果值为'123'的时候则显示 target 字段,否则隐藏,这种联动方式是一种被动联动,那如果我们希望实现主动联动呢?可以这样:
{
"type": "object",
"properties": {
"source": {
"type": "string",
"title": "Source",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
},
"x-reactions": [
{
"when": "{{$self.value == '123'}}",
"target": "target",
"fulfill": {
"state": {
"visible": true
}
},
"otherwise": {
"state": {
"visible": false
}
}
}
]
},
"target": {
"type": "string",
"title": "Target",
"x-component": "Input",
"x-component-props": {
"placeholder": "请输入"
}
}
}
}
所以,以上表单完全可以使用协议来描述了,不管是再复杂的布局,还是很复杂的联动,都能做到可配置
核心优势:高性能,开箱即用,联动逻辑实现高效,跨端能力,逻辑可跨框架,跨终端复用,动态渲染能力
核心劣势: 学习成本较高,虽然 2.x 已经在大量收敛概念,但还是存在一定的学习成本。
相关使用:
具体使用请上官网细看https://v2.formilyjs.org/zh-CN/guide
欢迎大家学习formily,并且有什么自己的使用想法欢迎一起讨论~