皮皮网

1.可能是表单源你见过最专业的表单方案---解密Formily2.0
2.基于 VUE3 可视化低代码表单设计器
3.手写el-form表单组件

可能是你见过最专业的表单方案---解密Formily2.0

       Formily2.0官网：v2.formilyjs.org/，源码地址：github.com/alibaba/formilyjs。码好项目由笔者发起，表单特别感谢阿里数字供应链事业部对Formily项目的源码重视与支持，以及宋思辰为Formily2.0贡献了高性能的表单源@formily/vue组件，潇泽贡献了智能网格布局组件FormGrid。码好gdi hough源码

       如果你是表单初次接触Formily，可以阅读介绍以了解其如何解决表单问题。源码对于已有使用经验的表单源用户，你会发现Formily2.0的码好定位从复杂场景扩展到了企业级表单的专业解决方案，专业性体现在以下几个方面：

       Formily2.0自信地表示它足够专业，表单并且在性能优化、源码依赖关系管理、表单源包设计、码好答疑成本控制等方面进行了深入改进。表单

       关于性能优化，解决性能问题的关键在于减少初次渲染的阻塞式计算，通过引入Reactive模式并采用类似Mobx的解决方案，优化了性能，同时减少了props脏检查的副作用。此外，引入被动联动模式，rps源码借助@formily/reactive，实现了响应式领域模型，大大提高了性能。

       依赖关系问题上，移除了styled-components、immerjs和rxjs的依赖，改用组件库自身的样式体系，如antd，或替代方案，如less和scss。这不仅减少了体积，还提高了可控性和稳定性。

       在包设计方面，统一组件包到@formily/antd，抽离了@formily/json-schema包，移除了@formily/react-shared-components，确保每个包的职责明确。

       答疑成本问题得到缓解，通过定义新Schema Type Void、引入x-decorator/x-decorator-props描述包装器、维护dataSource状态、惠农 源码定义x-reactions响应器概念，以及废弃自动删值的默认行为，使答疑更加清晰。

       自定义组件扩展机制采用工厂式注册，使用@formily/reactive实现更优雅的开发方式，引入readPretty模式，使自定义组件更加灵活。

       文档体系的完善使得查找文档变得容易，便于维护和使用者查找。

       发量问题得到了解决，通过解决所有之前的问题，确保了系统更加高效稳定。

       Formily2.0的亮点包括独立的响应式解决方案@formily/reactive，更优雅的开发方式，支持Vue2/Vue3，以及Effects局部状态、智能网格布局、响应式并发渲染等特性。

       总结来说，Formily2.0在多个方面进行了全面改进，旨在提供专业级的留学源码企业级表单解决方案，通过引入Reactive响应式编程模式，解决了性能、依赖、包设计、答疑成本等核心问题，为开发者提供了一个高效、灵活且易于维护的表单框架。

基于 VUE3 可视化低代码表单设计器

       格子表单/GRID-FORM已在Github开源，如能帮到您麻烦给个星点此查看在线文档及演示

       楔子

       大概4年前，我做了一个简单的动态表单功能，开发人员通过UI界面配置表单（其实就是添加常用的控件，如文本框、下拉框等）就能向用户提供数据查询，反响不错，尤其是偏后端开发的小伙伴。

       时至今日，上述功能存在以下问题：

       目前书面上已经有不少优秀开源的同类产品，这里列出可二次开发的，同时具备表单渲染、表单设计的工具（截止至年底）

       再造个轮子吧

       同类型的开源产品各有千秋，适合不同的sketchpad源码应用场景，然而跟我想要的还不够契合。权衡后，还是觉得自己弄一个。技术选型为vue3 + naive UI，使用pnpm进行包管理（monorepo结构）。

       不同于同类型产品的组件拖拽，我采用栅栏布局来堆积组件（实现起来简单，省事，暂不支持容器嵌套、子表单），通过设置组件占据的格子数可以使其独占一行，故取名GRID-FORM（栅栏表单），源码详见Github。

       表单设计器

       得益于VUE的响应式，设计器所见即所得显得尤为丝滑，不然得自己手撸监听配置项变动事件及界面重绘。

       编辑器分为左中右三个区域（这是业内约定俗成的标准设计），有别于兄弟产品，我把左区域用作表单整体的参数编辑。为方便用户自定义组件，设计器对外暴露组件库参数，并封装了常用的组件（诸如输入框、单选/多选框、日期选择）。

       组件分为数据型（对应上图中的输入组件、选择组件）及展示型（上图的展示组件）两类，后者不参与表单提交。

       渲染器组件渲染

       每个组件有唯一编号，渲染函数为一个Object（key即为组件编号），需要扩展组件时添加对应的渲染函数即可。渲染时属性分为基本信息（名称我用_开头加以区分）及组件层面两类，分别对应了组件渲染函数的两个参数：attrs、props。

       渲染引擎处理完属性后，调用Render函数（不同UI库各自实现，使用者可根据业务需要自行覆写）得到组件实例。此处以文本输入框INPUT为例：

       默认值

       表单项默认值可以填写常量或占位符（在初始化时被模板引擎赋值），占位符格式为${ code}，用户可自行扩展处理函数。

       校验

       此处校验分为非空、内容格式两种

       当表单项勾选是否必填，则在提交前渲染器会对该值进行非空检测；若设置了校验正则，则对非空值进行正则表达式校验。

       事件&钩子函数

       参数说明

       数据联动

       常规的做法是输入类表单项增加事件（如onChange、onBlur、onFocus等），但是这样操作（实现）繁琐（困难），我的做法只需要填写一处代码（直观简单）

       要启用联动需要满足以下条件：

       渲染器初始化后，会对勾选监听值变动的表单项开启监听（没错，是每个表单值有独立的监听）从而获取到新旧值。注意，若在回调函数中对form改动会重新触发onChange事件。

       示例

       适配更多UI库

       目前已实现Naive UI、Vant4的渲染器

       我封装了渲染器的基础框架（组合式API），帮助使用者根据需要快速适配心仪的UI库。

       结语

       因个人能力有限，此工具在设计、实现上存在诸多不足，仅作学习交流。

手写el-form表单组件

       在初入编程领域时，我仅知如何使用表单组件，随着时间的推移，技能并未有显著提升，成为了一个操作简单的工具人，日常多为复制粘贴。去年转职至一家新公司，接手新项目，面对一团糟的旧代码，意识到构建高效、可维护的代码至关重要。项目主要针对小程序与H5端，因现有UI库难以满足需求，开始深入研究组件原理与封装组件。

       最近的项目引入了element-ui，我回想起对el-form表单的困惑，通过查阅源码与技术文章，对el-form有了新的理解。表单组件使用方式需明确，最终构建出特定代码结构。组件嵌套则通过slot插槽实现，构建出el-form、el-form-item与el-input等元素。

       在组件通讯方面，需解决组件嵌套问题。单一查找父级组件方式可能失效。为解决这一问题，引入了provide与inject机制。通过provide，将el-form实例传递至所有子组件，子组件通过inject接收。此过程中，this指代el-form组件，便于访问组件中的数据与方法。

       组件间通讯问题的解决方案包括$dispatch与$broadcast。$dispatch能向上触发事件，并传入祖先组件名称与参数，当事件传递至对应祖先组件，触发事件侦听器，同时传播停止。$broadcast则向所有后代组件广播事件，传入后代组件名称与参数，当事件传递至对应后代组件，触发事件侦听器，传播也在此停止，确保组件通讯效率。

       在验证表单功能上，async-validator是一个强大的表单异步验证第三方库，el-form组件采用此库进行表单验证，确保数据输入的准确性与合法性。

       本文旨在分享el-form表单组件的使用与组件通讯机制的理解，帮助开发者在项目中构建高效、可维护的表单组件。文章由星野撰写，来源于“前端有道”，内容版权归作者所有，任何商业或非商业用途需获得作者授权。