1. Введение

DripForm — это компонент формы React с открытым исходным кодом командой JD Retail iPaaS, который можно гибко расширять в соответствии с различными библиотеками пользовательского интерфейса, включая рендеринг, проверку, визуальное редактирование и другие возможности, а также решать различные сложные сценарии форм посредством настройки.

Репозиторий проекта:GitHub.com/JD Fed/кап-…

2. Фон

Формы являются наиболее часто встречающимися сценариями в бизнесе B-side, таком как CMS, и их бизнес-сложность часто очень высока.Вы должны не только учитывать макет стиля, проверку данных и отправку, но также необходимо реализовать асинхронную логику, вложенную связь и другие функции. В то же время жизненный цикл бизнеса B-стороны, как правило, длинный, а это означает, что в реальной разработке, если планирование не будет выполнено в начале, код будет только заполняться болееif elseилиswitch caseТакая логика в конечном итоге приведет к существенному увеличению затрат на обслуживание системы.

Кроме того, помимо уровня фронтенда, в форме еще есть ситуация, что возможности фронтенда и бекенда проверки не могут быть согласованы. Часто бывает так, что правила верификации фронтенда и бекенда несовместимы, или на одном энде отсутствует верификация, а поддержка двух копий кода также влечет за собой более высокие затраты.

Поэтому мы разработали динамическую программу конфигурации формы с открытым исходным кодом DripForm, чтобы решить вышеуказанные проблемы и повысить эффективность разработки формы.

3. Особенности и отличия

По сравнению с другими решениями в отрасли, DripForm имеет следующие преимущества:

• Семантика: лаконичный и эффективный протокол JSON полезен для понимания разработчиками.
• Интеграция проверки: опираясь на стандартизированные возможности проверки ajv, можно реализовать интеграцию внешней и внутренней проверки.
• Визуализация: визуально создавайте формы и изменяйте схему формы.
• Расширяемость: поддержка вторичной разработки, расширение набора пользовательских компонентов, проверка набора.

Интеграция внешней и внутренней проверки и масштабируемость на основе стандартизированных протоколов являются самыми большими различиями между DripForm и другими решениями.В то же время визуализация и автоматизация могут еще больше снизить затраты на изучение и настройку протокола.

4. Как использовать

DripForm можно использовать независимо как модуль npm или с визуальным генератором для создания схемы путем перетаскивания.

npm install @jdfed/drip-form @jdfed/drip-form-theme-xxx

Примечание: xxx — это имя библиотеки тем.

Простой в использовании

import React, { memo } from 'react'
// 引入核心包和主题
import DripForm from '@jdfed/drip-form'
import dripTheme from '@jdfed/drip-form-theme-xxx'
import '@jdfed/drip-form-theme/dist/index.css'
// 引入配置项
import unitedSchema from './unitedSchema.json'

const Form = memo(() => {
  return
    <DripForm
      unitedSchema={unitedSchema}
      uiComponents={{'drip': dripTheme}}
    />
})

В дополнение к вышеперечисленным методам разработки, ориентированным на программирование, DripForm сочетает в себе DripDesign, DripTable и другие модули, а с возможностями FaaS в iPaaS предоставляет платформу DripWorks, которая может быстро создавать CMS с минимальным кодом. Вышеупомянутые модули и платформы также будут постепенно открывать исходный код или предоставлять внешний опыт в последующем.

5. Архитектурный дизайн

Целью проектирования архитектуры DripForm является снижение затрат на обслуживание разработки групповых форм и решение сложных сценариев, таких как связывание, проверка, асинхронный сбор данных и настраиваемые формы, которые распространены при разработке форм, в простой в использовании и гибкой форме. расширение.

1. Функциональная сортировка и дизайн

Основные функции включают в себя пользовательский интерфейс, проверку и привязку и настраиваются с помощью протокола JSON Schema. Кроме того, он также должен иметь такие функции, как расширение и визуализация.

• Пользовательский интерфейс: представление и поведение формы. Необходимо удовлетворить потребности различных предприятий в разных библиотеках пользовательского интерфейса.Учитывая, что текущие основные библиотеки пользовательского интерфейса являются зрелыми и стабильными, библиотеки пользовательского интерфейса в архитектуре DripForm разделены, и различные библиотеки пользовательского интерфейса могут применяться через темы.
• Проверка: проверка значений сложной формы. Используйте схему JSON, чтобы стандартизировать проверку данных, и сотрудничайте с ajv, чтобы добиться унифицированной внешней и внутренней проверки.
• Связывание: после изменения элемента формы связь между различными формами реализуется посредством трансляции событий.
• Расширяемость: общие элементы управления и проверки не могут удовлетворить все бизнес-требования, поэтому DripForm также поддерживает настраиваемые наборы компонентов и наборы проверок.
• Визуализация: конфигурация JSON не так сложна, как написание кода, поэтому предоставляется визуальный генератор для дальнейшего повышения эффективности форм с минимальным кодом, и его также можно использовать независимо от npm.

2. Основные модули

Вышеуказанные функции DripForm в основном реализуются через стандартизированные протоколы, с ядром формы, темой, проверкой поведения и другими модулями, а также дополнительно предоставляет генератор визуализации формы (generator).

1) Спецификация протокола

Протокол DripForm разделен на две части, внутреннюю и внешнюю, что обеспечивает разработчикам упрощеннуюunitedSchema, который далее делится на проверку конфигурацииdataSchema(т. е. спецификация схемы JSON), пользовательский интерфейс конфигурацииuiSchemaдва вида.

Как DripForm был разработан и поставленdataSchema,uiSchemaпревратился вunitedSchemaиз? Это можно проиллюстрировать следующим случаем, предполагая, что существуют данные формы следующим образом:

{
	name:'张三',
	age: 18
}

1. Выход соответствуетdataSchemaпротокол:

{
    "type": "object",
    "properties":{
        "name":{
            "title":"姓名",
            "type":"string"
        },
        "age":{
            "title":"年龄",
            "type":"number"
        }
    }
}

2. Добавьте проверку, например, есть обязательные требования к именам, минимальные и максимальные ограничения, вы можете добавить соответствующие ключевые слова в соответствии со спецификацией JSON Schema и в соответствии сajv-errorMessageДобавить сообщение об ошибке.

{
    "type": "object",
  	"required":["name"],
  	"errorMessage":{
     	"required":{
        "name":"必填"
      }
    },
    "properties":{
        "name":{
            "title":"姓名",
            "type":"string",
          	"minLength":2,
          	"maxLength":4,
          	"errorMessage":{
              "minLength":"最小输入2",
              "maxLength":"最大输入4"
            }
        },
        "age":{
            "title":"年龄",
            "type":"number",
        }
    }
}

3. Добавьте описание пользовательского интерфейса и измените его следующим образом:

{
  "type": "object",
  "schema": [
    {
      "title": "姓名",
      "type": "string",
      "minLength": 2,
      "maxLength": 4,
      "requiredMsg": "必填",
      "errorMessage": {
        "minLength": "最小输入2",
        "maxLength": "最大输入4"
      },
      "ui": {
        "type": "text"
      },
      "fieldKey": "name"
    },
    {
      "title": "年龄",
      "type": "number",
      "ui": {
        "type": "number"
      },
      "fieldKey": "age"
    }
  ]
}

Учитывая простоту конфигурации разработчика, требуются некоторые оптимизации протокола, такие как:

• propertiesКлючевое слово не соответствует требованиям к порядку формы, поэтому используйтеschemaзамена ключевых словpropertiesключевое слово; использоватьfieldKeyзаменятьpropertiesсвойства в .

• Добавить кuiключевые слова,uiЭто объект, используемый для описания элемента управления формы, а остальные поля проходят через тему, соответствующую полю реквизитов компонента фреймворка пользовательского интерфейса.

  {
      //表单控件类型
      type:string,
      //表单标题样式
      title?:TitleStyle,
      //表单提示样式
      description?:Description,
      //表单是否展示
      vcontrol?:string|VcontrolFunc,
      //表单数据变化触发函数体
      onchange?:string|CustomFunc,
      //表单主题
      theme?:string,
      [propName:string]:unknown
  }
  

• Из-за спецификации JSONSchema требуемые настройки и текст ошибки должны быть в родительском элементе, что, несомненно, увеличивает стоимость установки. Итак, untiedSchema используетrequiredMsgВместо требуемой и требуемой копии ошибки.

• Увеличьте глобальную конфигурацию формы, такую ​​как макетcontainerStyle,темаtheme, проверьте времяvalidateTime.

4. Окончательный результатunitedSchemaследующее:

{
  "validateTime": "change",
  "type": "object",
  "theme": "drip-design",
  "schema": [
    {
      "title": "名字",
      "type": "string",
      "minLength": 2,
      "maxLength": 4,
      "errMsg": {
        "minLength": "最小输入2位",
        "maxLength": "最大输入4位",
        "_": "错误兜底文案"
      },
      "ui": {
        "type": "text",
        "placeholder": "请输入姓名",
        "description": {
          "type": "icon",
          "title": "hover触发提示",
          "trigger": "hover"
        }
      },
      "requiredMsg": "必填",
      "fieldKey": "name"
    }
  ]
}

Приведенная выше конфигурация создаст следующую форму:

2) ядро

Основной модуль DripForm используется для загрузки пакетов тем, загрузки плагинов проверки, глобального управления состоянием, парсинга протоколов и т. д.

3) Глобальное управление состоянием

DripForm не вводит дополнительную библиотеку управления состоянием, использует хуки+иммер+мемо и другие методы для управления данными через компоненты верхнего уровня.useImperativeHandleПродвигайте все данные внутри формы. Вне формы можно получить доступ черезrefОбъект получает текущие данные формы, статус проверки, логику пользовательского интерфейса, логику проверки,set,get,mergeЖдать.

4) Темы

DripForm можно настроитьthemeuiComponentsЧтобы решить, какую тему использовать, вы можете использовать одну тему или комбинацию тем.Версия с открытым исходным кодом имеет встроенную адаптацию к основным библиотекам пользовательского интерфейса, таким как antd, что удобно для всех, чтобы легко интегрировать DripForm в систему.

themeКлючевые слова можно настроить глобально или в схеме формы. Настройка формы имеет приоритет над глобальной настройкой.

5) Проверить

Часть проверки реализована с использованием схемы JSON и ajv, и разработчики внешнего и внутреннего интерфейса могут выполнять последовательную проверку формы JSON на основе спецификации ajv. Встроенный по умолчаниюajv-errors,ajv-formats,ajv-keywords,@jdfed/drip-form-plugin-formats,@jdfed/drip-form-plugin-keywordsи другие подключаемые модули для удовлетворения распространенных сценариев, а также вы можете самостоятельно расширять подключаемые модули проверки пользовательских правил, добавляя ключевые слова или функции.

6) Визуальный конструктор

Визуальный генератор предоставляется в виде пакета npm, который поддерживает расширение пользовательских бизнес-компонентов. Генерация конфигурации формы разделена на выбор левого компонента, область перетаскивания среднего вида и правую область конфигурации.Сам генератор также генерируется DripForm. Чтобы добавить новые бизнес-компоненты или настроить существующие компоненты, вам нужно только настроить схему.

Пример использования DripFormGenerator

6. Конец

В дополнение к непрерывной итеративной оптимизации DripForm сосредоточится на предоставлении более открытых API-интерфейсов и автоматическом создании форм на основе данных в ближайшем будущем и надеется общаться и совершенствоваться с сообществом с помощью открытого исходного кода.

твойStarЭто наша самая большая мотивация.Если вы заинтересованы в проекте и у вас есть предложения, пожалуйста, не стесняйтесь общаться с нами~

• Документация:Вспомните Fed.GitHub.IO/drip-form/…
• склад:GitHub.com/JD Fed/кап-…
• лист:GitHub.com/JD Fed/кап-…
• Дополнительные возможности с открытым исходным кодом для клиентской группы iPaaS:Лев Леса, Микроинтерфейс MicroApp, форма капли воды