基于formily表单统一方案

基于formily表单统一方案

摘要：
本文介旨在探讨基于 Formily 框架构建表单统一方案的可行性及其优势。通过详细分析 Formily 的核心特性、设计理念以及在实际项目中的应用效果，本报告将展示如何利用 Formily 实现高效的表单管理和优化用户体验。此外，还将讨论在实施过程中可能遇到的挑战及应对策略。

关键词：
Formily, JsonSchema，DSL 表单管理, 统一方案, 高效开发

背景

随着企业级应用的发展，用户界面（UI）变得越来越复杂，特别是对于需要处理大量数据输入的表单来说更是如此。传统的表单处理方法往往难以满足现代Web应用的需求。因此，寻找一种更加高效且易于维护的解决方案变得尤为重要。Formily作为一种新兴的表单管理工具，提供了一种全新的思路来简化这一过程。

在前端技术架构中，表单的应用尚未达到高效性和可维护性的理想状态。尽管这一现状暂时能够满足开发的基本需求，但随着业务范围的不断拓展及功能需求的日益复杂化，现有的表单处理机制将不可避免地成为阻碍团队实现快速迭代的重要瓶颈之一。为了确保平台能够持续支持并促进业务的健康发展，迫切需要对现有表单体系进行优化升级，以提高其灵活性、易用性和扩展性，从而更好地服务于未来的项目开发与维护工作。

了解Fromily

什么是Formily？

Formily 是一个专为复杂表单场景设计的前端库，它不仅包含了丰富的组件集合，还引入了schema的概念作为外部DSL（领域特定语言），用于定义表单结构、验证规则等。这种设计使得开发者能够以声明式的方式快速搭建出符合业务需求的表单界面，并轻松地进行扩展和定制。

Formily能解决什么问题？

1. 复杂业务场景优化：Formily针对中后台复杂业务场景进行了深度优化，提供了高性能、可维护的解决方案。通过抽象FieldState和FormState，简化了表单状态管理，减少了因复杂业务逻辑带来的性能瓶颈。
2. 提高开发效率： Formily基于JSON Schema扩展的表单协议，定义了一套通用协议来描述表单UI和逻辑。这种方式不仅提高了表单开发效率，还支持低代码搭建，使得表单设计更加灵活和高效。
3. 优化表单性能：Formily采用Reactive响应式编程模型，在字段数量无限多和高频输入场景下，可以保证O(1)时间复杂度。通过构建整个响应式表单领域模型，实现数据变化精确渲染，避免大量脏检查成本。
4. **解决联动问题：**在中后台场景中，表单字段之间的联动是一个常见的需求。Formily通过发布订阅模式和响应式模型实现了字段联动功能。当一个字段的值发生变化时，相关的表单元素会自动更新，从而满足联动需求。
5. 支持多端适配：Formily不仅支持Web端的表单开发，还提供了跨框架+跨终端组件生态体系。这意味着开发者可以使用Formily开发一套表单逻辑，然后适配到不同的终端（如PC、手机等）上，提高了代码的复用性和可维护性。

Formily集成到VUE项目中

安装依赖

// STEP1
// 安装内核库
// 使用 Formily 必须要用到@formily/core，它负责管理表单的状态，表单校验，联动等等。

pnpm install --save @formily/core

// STEP2
// 安装UI桥接库
// vue
pnpm install --save @formily/vue

// STEP3
// 安装组件库
// element-plus
pnpm install --save @formily/element-plus

封装组件 SchemaForm

UI桥阶层与UI组件库进行绑定形成 Formily 表单组件

// 全局组件
const componentStore = reactive<SchemaVueComponents>({
   
// 全局组件、@formily/vue容器组件 
}) 

/* formily UI桥阶层与UI组件绑定，并跑出去 Schema 实例 */ 

export function useSchema() {
   
const componentSelf = reactive<SchemaVueComponents>({
   
// 应用内组件，不污染全局，相同命名的，内部组件会覆盖公共组件
}) 

const FormilySchema = computed({
   
    return createSchemaField({
    components: {
    ...componentStore, ...componentSelf  }})
})
/**
 	* 注册自定义组件到组件库
 	* @param name
 	* @param component
 	* @param type
 	*/
	function setFormilyComponent(name: string, component: VueComponent, type: 'public' | 'self' = 'public') {
    }

	return {
   
 		FormilySchema,
  		setFormilyComponent,
	}
} 

使用方法

Formily在日常开发中的使用

注册自定义组件：
全局注册：可以在新建一个ts文件，集中处理，然后在main中引入，作用域是整个系统
应用内注册：在应用内页面注册，作用域只在当前页面

1. 表单校验

1. 基础的表单校验

// 基础的非空表单校验可以写在 Schmea 表达式中，这里的 x-validator 和我们自己写 rules 是一样的，它也是能够自定义校验逻辑。
const formSchema = reactive<ISchema>({
   
	type: 'object',
	properties: {
   
		taskName: {
   
			type: 'string',
			'x-decorator': 'FormItem', // 容器组件
			'x-validator': [
				{
   
					required: true,
					message: t(</