技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受

从formily v1的版本使用到formily v2正式版本的使用与开发,有了一点心得体会,分享给大家:

首先来了解下formily是什么:

基于本人的理解,它主要是用于表单场景的使用,antd大家都很清楚,就不多说,formily是一个在antd的基础上二次封装,不需要再写繁重的表单逻辑,直接可通过json格式配置的一个新的ui框架

按照使用antd或element等ui框架的使用习惯,我们通常会这样来定义一个表单:

技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受

(图片来自于antd官网)

但基于使用formily的习惯,我们定义一个表单,通过用json的格式配置出一个页面,传入相应的组件名以及使用方法等
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受
(样例本地获取)

将写好的json传入fomily暴露出来的相应方法:
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受
样例本地获取)

以下为展示效果,基本于antd中form的表单展示效果一样
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受
(图片来自于本地)

基于官网:它能实现的功能有很多,解决很多问题,例如:1.字段数量多,如何让性能不随字段数量增加而变差?2.字段关联逻辑复杂,如何更简单的实现复杂的联动逻辑?字段与字段关联时,如何保证不影响表单性能?3.表单数据管理复杂 4.表单状态管理复杂 5.表单的场景化复用 6.动态渲染述求很强烈 7.如何在表单协议中描述逻辑?等问题。它是阿里数字供应链团队,在经历了大量的中后台实践和探索之后,沉淀出 Formily 表单解决方案 

领域模型:

首先表单联动是非常复杂的,基本上都是基于某些字段的值引发的联动,但是,实际业务需求可能会比较恶心,不仅要基于某些字段值引发联动,还会基于其他副作用值引发联动,用张图片表示:技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受(图片来自官网)
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受

(field基本模型,图片来自官网)

协议驱动:

为了不污染标准 JSON-Schema 属性,统一以x-*格式来表达扩展属性,通俗来说,我们使用antd的组件的时候,我们希望使用他的属性,我们可以直接按照antd的文档属性直接使用,另外formily现有的控件或者antd现有的控件还不能满足我们的使用要求的时候,我们可以自行封装组件,然后注册进去(怎么自行封装组件以及注册,下次再说),相关属性也可通过"x-component-props"属性去传入

这样看来,UI 协议与数据协议混合在一起,只要有一个统一的扩展约定,也还是能保证两种协议职责单一。
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受
(图片来自官网)

 

然后,如果想要在某些字段上包裹一个 UI 容器怎么办呢?这里,Formily 定义了一个新的 schema type,叫void,在 JSON Schema 中,引入 void,代表一个虚数据节点,表示该节点并不占用实际数据结构
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受

(图片来自官网)

 

 

那么讲到字段联动:

{

  "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 已经在大量收敛概念,但还是存在一定的学习成本。

相关使用:
技术分享【大安全开发部前端技术团队】formily是个什么东东?-使用感受
具体使用请上官网细看https://v2.formilyjs.org/zh-CN/guide

欢迎大家学习formily,并且有什么自己的使用想法欢迎一起讨论~

上一篇:pyqt5的下载进度条 实现模板


下一篇:JAVA实现单例模式的四种方法和一些特点