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

Большим преимуществом этого подхода является разделение ответственности. Младшие разработчики могут изменять метки, заполнители, всплывающие подсказки, макеты, классы и многое другое в компоненте, просто изменяя файлы конфигурации. Это сглаживает кривую обучения и сокращает время, необходимое людям, чтобы стать продуктивными при присоединении к команде. Это также снижает вероятность того, что что-то пойдет не так, когда неопытная рука возится с фактическим кодом приложения, потому что JSON — это не код, верно? Ну типа.

Другим преимуществом является централизация кода и возможность повторного использования — один большой двоичный объект JavaScript можно повторно использовать на всем сайте, но в зависимости от конфигурации, переданной в код, он может полностью отображаться. иначе. Примером этого являются формы веб-сайта. В недавнем проекте перед нашей командой была поставлена ​​задача создать компонент формы для сайта, который будет отображаться по-разному в зависимости от страницы, на которой он находится. На странице контактов будет представлена ​​контактная форма, на домашней странице — форма поиска, на странице результатов — форма опроса и так далее. При первоначальном посещении сайта JavaScript кэшировался, а затем каждая последующая страница содержала небольшую конфигурацию JSON, которую javascript искал, и, если находил, отображал требуемую форму. Javascript будет обслуживать все аспекты формы, включая размещение формы, типы полей (текст, выбор, флажок, текстовое поле), поиск AJAX, проверку на уровне поля, действие формы и обработку ответа отправки действия. Однако особенности этого будут определены конфигурацией JSON на самой странице; Javascript просто сделал бы то, что ему сказали.

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

Прежде всего, давайте настроим простой проект Create React App Typescript со следующим файлом index.tsx:

Приведенный выше код довольно прямолинеен и указывает на место, где происходит настоящее волшебство, то есть в компоненте GenericForm. Но прежде чем мы дойдем до этого, просто обратите внимание, как приложение React берет конфигурацию JSON из переменной Javascript веб-страницы с именем forms . Сама ваша страница может быть сгенерирована внутренним препроцессором (таким как Python, PHP или даже ASP .Net) или может быть просто статической HTML-страницей, однако до тех пор, пока страница содержит эту переменную, ваши декларативные формы будут отображаться.

Давайте перейдем к настоящей части кода, к компоненту GenericForm. Это также не слишком сложно (большая часть кода в любом случае является шаблонным Typescript), но в этом случае делает всю тяжелую работу.

Приведенный выше код вызывается один раз для каждой формы, объявленной в вашей конфигурации JSON, и отображается на узле, указанном атрибутом формы selector в конфигурации. Он создает внешний компонент Formik Form, а затем отображает соответствующие поля в форме с помощью простого оператора switch. Переключатель отображает применимый компонент формы на основе свойства input поля.

Я включил некоторые дополнительные свойства, такие как required и maxlen, чтобы вы могли понять, что еще возможно.

Чтобы это работало на любой странице, запустите yarn build в своем приложении React, чтобы сгенерировать большой двоичный объект Javascript, а затем включите этот файл выходного кода в заголовок своей веб-страницы как обычное включение Javascript.

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

Приведенная выше простая веб-страница отображает две приведенные ниже формы с использованием сборки React Javascript.

Вот и все. Надеюсь, вам понравилось создавать формы Formik с помощью декларативной конфигурации JSON.

Хотите проверить этот код и поиграть сами? Почувствуйте клон репозитория здесь: https://github.com/mattfaircliff/declarative-json-formik и, пожалуйста, поставьте звездочку или лайк, если считаете, что эта статья достойна 🙏.

Реквизит изображения отправляется Alex Andu на Unsplash: https://unsplash.com/photos/o9isBQ25H-g