От абстракции формы к средней стадии формы

Добавить Автора

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

понять форму

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

основная форма

<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form -->
<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

Этот код завершает самую простую форму. Давайте проанализируем его. Что он имеет?

• Адрес подачи и способ подачи
• оперативная информация
• Поле ввода
• кнопка отправки И сегодня такая простая форма уже не может удовлетворить потребности более сложных приложений.

более богатые формы

После JQ, React, Vue и т. д. в сети и сообществе появилось больше компонентов форм, таких как выбор даты, селектор времени, обрезка и загрузка изображений и т. д.

//https://codepen.io/pen/?&editable=true&editors=001
const { TimePicker } = antd;

function onChange(time, timeString) {
  console.log(time, timeString);
}

ReactDOM.render(
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
  mountNode
);

определить форму

Но что бы ни изменилось,Адрес подачи и способ подачи,оперативная информация,пользовательский ввод,кнопка отправки, они необходимы, поэтому я стараюсь использовать краткий язык, чтобы абстрагироваться от того, что такое форма:

Форма — это визуальное интерфейсное приложение, которое преобразует взаимодействие человека с компьютером в данные и отправляет их на сервер.

Для понимания формы особенно важны эти два слова:

• взаимодействие человека с компьютером
• преобразовать в данные

взаимодействие человека с компьютером

Почему не компоненты формы (поля ввода, загрузка файлов, поля выбора и т. д.), а поведение взаимодействия человека с компьютером? Потому что при разработке приложений для форм будет больше сценариев ввода данных пользователем, а базовые компоненты формы — это только один тип поведения.Если однажды в нашей форме пользователям нужно будет рисовать круги на чертежной доске Шерстяная ткань?

преобразовать в данные

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

Итак, форма выглядит так:

Расширенный режим — динамические формы

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

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

Даже без четкого понимания формы компоненты, фреймворки или библиотечные классы для динамических форм существуют уже давно. Но у него все еще есть некоторые проблемы:

• Стоимость изучения конфигурации
• Стоимость разработки и обслуживания конфигурации

Для решения этой проблемы автор разработал промежуточную платформу формы на основе динамических форм.

Дизайн центра формы

Промежуточная платформа формы разработана путем абстрагирования формы, а затем отдельно для всех форм в приложении веб-сайта.

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

Визуальное производство конфигурации формы

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

Когда конфигурация соответствует форме, но у нас есть несколько сценариев в приложении веб-сайта (бизнес), для которых требуется несколько форм, тогда будет несколько конфигураций, и несколько конфигураций необходимо будет согласовать для управления или даже требуется Динамическая загрузка конфигурации асинхронно . Я также включил вопросы, связанные с конфигурацией, в дизайн центра форм, чтобы сделать ссылку более полной.

Говоря об этом, некоторые люди могут подумать о некоторых веб-сайтах и ​​приложениях для проведения опросов. По сути, они одинаковы, но приложение для опроса будет сильно отличаться от вашей сложной работы по разработке формы, поэтому, когда есть запрос формы, вы не скажете своей бизнес-стороне: «Вы просто создаете опрос». Разница между ней и системой анкетирования такая же, как между коммерческой системой и системой мидл-офиса. Так называемая средняя платформа используется для управления и поддержки бизнес-системы.

Способ достижения визуализации состоит в том, чтобы сгенерировать конфигурацию через форму, а затем визуализировать форму.

Страница для визуализации конфигурации производственной формы:

центр формы

Промежуточная платформа формы — это продукт, который может полностью управляться внешним интерфейсом, поскольку форма и запрос на хранение данных являются относительно противоположными частями. быть сформулированы передним концом. Таким образом, это децентрализованный продукт, который также может стать промежуточной платформой. Поскольку это промежуточный офис, он также может поддерживать и управлять различными промежуточными офисами N и развитием бизнеса.

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

Коммуникационный уровень и сервер

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

Например, настройте интерфейс запроса:

параметр	Типы	Это необходимо	иллюстрировать
formId	Long	нет	Идентификатор формы
type	Long	да	0 означает получение списка конфигураций пользователя в соответствии с userId, 1 означает получение конкретной конфигурации в соответствии с formId

основной слой

Благодаря предыдущей абстракции формы некоторые классы JS, связанные с формой, могут быть абстрагированы.Эти классы на самом деле являются некоторыми операциями, связанными с данными, включая, помимо прочего:

• проверка данных формы
• данные формы для чтения и записи
• Основные свойства элементов формы

/**
   * 定义一些标准的表单属性
   *  - defaultValue
   *  - key
   *  - dataSource
   *  - disabled
   *  - size
   *  - title/labelText
   * 
   * 方法:
   *  - onChange
   *  - setValue
   *  - verify
   * @param {Object} config 
   */
  initFormProps(config){
    let onChange = (value) => {
      this.setValue(value)
      this.formChange(this.key,value)
    }
    let getValue = () => {
      return this._value
    }
    return {
      onChange,
      getValue,
      size: this.config.size,
      dataSource: this.dataSource || [],
      disabled: this.disabled,
      defaultValue: this.defaultValue,
      value: this._value,
      key: this.key,
      block: this.config.block === "true" || this.config.block === "true",
      title: this.title || this.labelText,
      labelText: this.labelText || this.title,
      _type: this.type
    }
  }

С их помощью вы можете выполнять стыковку многокадрового рендеринга со слоем рендеринга.

Бизнес-уровень

При выводе компонент рендеринга и производственный компонент конфигурации выводятся одновременно.Настроенный производственный компонент не должен выходить в онлайн, пока он подключен к бизнес-интерфейсу; компонент рендеринга автоматически извлекает конфигурацию формы из соответствующую сцену для рендеринга.

Следовательно, пока осуществляется один доступ, последующая работа по развитию формы состоит из трех шагов:

1. Разработка пользовательских компонентов формы (неудовлетворительные компоненты формы) 2. Создать форму в настройке производственных компонентов 3. Доступ к компонентам рендеринга в соответствующей сцене

Суммировать

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

В этой статье речь идет только о средней стадии формы, на самом деле эту идею можно скопировать.

От визуализации страниц форм до визуализации страниц таблиц и визуализации мидл- и бэкэнд-сайтов путь и архитектурный дизайн будут примерно одинаковыми. Поэтому до высвобождения производительных сил еще далеко.

Колонка другие статьи

• Позвольте вам разработать серию библиотек диаграмм с 0 до обретения формы
• Программирование потокового вещания ReactiveX — начиная с xstream
• Что вы не знали о Терминале
• Как реализовать интервальный хук

FE One

Подпишитесь на нашу официальную учетную запись FE One, мы время от времени будем делиться знаниями о внешнем интерфейсе, такими как функциональное программирование JS, углубленное изучение React, Rxjs, проектирование, WebGL, создание среднего и внутреннего интерфейса.