# schema-form

**Repository Path**: uixepm/schema-form

## Basic Information

- **Project Name**: schema-form
- **Description**: 可配置化的react表单引擎
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-05-02
- **Last Updated**: 2022-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# schema-form
## 简述
表单是后台管理最常遇到的一种数据管理模式，在管理系统中被大量使用。由于react并不提供双向数据绑定,使得表单的开发却相对比较复杂，即便像fish等组件库提供了Form组件，实现一个表单往往也需要编写大量代码，而且表单之间存在复杂的关联操作，联动规则，造成表单代码复杂，开发调试工作量大，影响项目的开发效率。复杂的业务关联也容易使代码间的耦合关系复杂，造成可读性与维护性较差。
schema-form是一个基于react的半配置化的表单引擎，通过配置化提供了一种相对简易的方式开发表单。通过对表单各字段的定义就可以快速建立一个业务表单。使表单开发更加简便，为开发者提供更愉快的开发体验。

## 功能
* 配置化表单字段：通过schema来定义表单中每个字段相关属性。
* 观察者：提供了灵活的观察者，实现表单字段联动。
* 提供常用的表单字段组件：schemaForm内置了部分常用组件，如`input`,`select`等，同时也支持开发者自定义字段组件。
* 提供了`新增`，`修改`，`详情`三种模式，只需设置参数`mode`并针对不同模式进行少量差异化处理，就能使schem-form在`新增`，`修改`，`查看`这三种场景中使用。

## 特点与优势
* **提高开发效率**：配置化可以减少大量模版代码，加上内置常用组件，使表单开发更简单快速。
* **灵活的页面布局**：schema的配置只声明了字段相关的基本信息与逻辑，而表单布局完全开放给开发者自定义，实现逻辑与视图的解耦。
* **清晰的逻辑结构**：集中化的配置方式，使业务逻辑与视图展现进行了分离。字段的基本设置集中管理，避免了业务逻辑散布在各个地方，提供了清晰的组织方式，增加了代码可读性，可维护性，使查找定位问题更加简便。
* **扩展能力强**：schema-form支持自定义组件的开发，当内置的常用组件无法满足业务需求时，可以根据需求开发自定义组件，而且自定义组件开发也非常简单。
* **高效的组件渲染**：配置化表单通常会造成表单渲染问题，schema-form对组件渲染进行了优化，每次变动只会渲染必要的组件。
* **高适配性**：schema-form提供了适配层，可以支持不同组件库的接入，目前接入的组件库有fish和antd，后期还可以接入fish-mobile(H5)。

## 安装
> npm install --save @amazebird/fish-schema-form