Сборщики — JS: Объектно-ориентированный дизайн

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

Валидация — это процесс проверки данных на корректность по заданным условиям. А валидатор — это что-то, выполняющее данную проверку.

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

Самый простой способ сделать валидацию, это выполнить ручную проверку:

if (data.email === '') {
  errors.push('емейл пустой');
}

// гипотетическая функция проверки формата
if (!hasEmailFormat(data.email)) {
  errors.push('емейл имеет неверный формат');
}

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

Yup

В JavaScript для выполнения валидации очень популярна библиотека yup. Посмотрите на пример, эквивалентный проверкам выше:

import * as yup from 'yup';

const schema = yup.string().required().email();

schema.validateSync(''); // ValidationError: this is a required field
schema.validateSync('wrongemail'); // ValidationError: this must be a valid email
schema.validateSync('support@hexlet.io'); // возвращает само значение

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

// методы positive() и integer() есть только у number
const schema1 = yup.number().required().positive().integer();

// массив должен содержать от 5 до 10 элементов
const schema2 = yup.array().min(5).max(10);

Во всех этих ситуациях наша задача – сформировать правильную схему под конкретную задачу. Затем эту схему можно использовать множество раз на разных данных. Подобный способ формирования объекта-схемы называется сборкой, а сам объект – сборщиком. По большому счету это небольшая разновидность использования текучего интерфейса. Чем он удобен? С его помощью просто собирать даже сложные проверки, используя очень понятную механику объединения вызовов. Код при этом получается простым и понятным.

Из дополнительных плюсов – наличие готовых сообщений об ошибках для всех встроенных проверок. При необходимости их можно поменять для конкретной схемы, просто передав текст в методы проверок:

// Замена идет только для данной схемы
const schema1 = yup.string().required('Пусто!');

const schema2 = yup.string().required(); // здесь будет значение по умолчанию

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

А что делать в ситуации, когда мы работаем с объектом, у которого каждое свойство имеет свои собственные проверки? Yup решает эту задачу очень элегантно, через рекурсивное определение:

// object().shape() позволяет задать структуру объекта
const schema = yup.object().shape({
  name: yup.string().required(),
  age: yup.number().required().positive().integer(),
  email: yup.string().email(),
  website: yup.string().url(),
  createdOn: yup.date().default(() => new Date()), // значение по умолчанию
});

const data = {
  name: 'jimmy',
  age: 24,
};
schema.validateSync(data);

https://repl.it/@hexlet/js-object-oriented-design-buider-yup-object#index.js

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

Дополнительные материалы

1. JSON schema

---

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Вебинар «Как самостоятельно учиться»