Какие паттерны использовал?

Использованные паттерны проектирования в Frontend-разработке

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

1. Структурные паттерны

Компонентный подход (Component Pattern)

Основа современных UI-библиотек. Каждый компонент инкапсулирует свою логику, шаблон и стили.

// Пример React-компонента
const UserCard = ({ user, onEdit }) => {
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <button onClick={() => onEdit(user.id)}>
        Редактировать
      </button>
    </div>
  );
};

Компоновщик (Composite Pattern)

Позволяет работать с древовидными структурами (например, вложенные компоненты).

Декоратор (Decorator Pattern)

В React часто реализуется через Higher-Order Components (HOC) или custom hooks:

// HOC для логирования
const withLogger = (WrappedComponent) => {
  return function WithLogger(props) {
    console.log(`Рендер ${WrappedComponent.name}:`, props);
    return <WrappedComponent {...props} />;
  };
};

2. Поведенческие паттерны

Наблюдатель (Observer Pattern)

Краеугольный камень реактивности. Реализуется через:

• Event listeners в DOM
• React хуки (useState, useEffect)
• Сторы в состоянии приложения (Redux, MobX)

Стратегия (Strategy Pattern)

Полезен для замены алгоритмов в рантайме:

// Стратегии валидации
const validationStrategies = {
  email: (value) => /\S+@\S+\.\S+/.test(value),
  password: (value) => value.length >= 8,
  phone: (value) => /^\+?[\d\s\-\(\)]+$/.test(value)
};

const validateField = (type, value) => {
  return validationStrategies[type]?.(value) ?? true;
};

Состояние (State Pattern)

Управление сложными состояниями компонентов:

class FormState {
  constructor() {
    this.state = 'idle';
  }
  
  submit() {
    if (this.state === 'idle') {
      this.state = 'submitting';
      // Логика отправки
    } else if (this.state === 'submitting') {
      // Игнорируем повторный вызов
    }
  }
}

3. Порождающие паттерны

Фабрика (Factory Pattern)

Создание объектов без указания точного класса:

// Фабрика компонентов
const componentFactory = (type, props) => {
  const components = {
    button: Button,
    input: Input,
    modal: Modal
  };
  
  const Component = components[type];
  return Component ? <Component {...props} /> : null;
};

Строитель (Builder Pattern)

Постепенное создание сложных объектов:

class QueryBuilder {
  constructor() {
    this.query = {};
  }
  
  select(fields) {
    this.query.select = fields;
    return this;
  }
  
  where(conditions) {
    this.query.where = conditions;
    return this;
  }
  
  build() {
    return this.query;
  }
}

// Использование
const query = new QueryBuilder()
  .select(['id', 'name'])
  .where({ active: true })
  .build();

4. Архитектурные паттерны

MV (MVC, MVP, MVVM)*

В зависимости от фреймворка:

• React + Redux ≈ MVVM (View + ViewModel + Store)
• Angular ≈ MVC/MVVM (с Dependency Injection)
• Vue ≈ MVVM (с реактивной системой)

Flux/Redux Pattern

Однонаправленный поток данных:

Action → Dispatcher → Store → View → Action

Container/Presentational Pattern

Разделение компонентов на:

• Контейнеры (логика, состояние)
• Презентационные (отображение, получение данных через props)

5. Специфичные для React/Vue паттерны

Render Props

Передача функции рендеринга как prop:

<DataFetcher
  url="/api/users"
  render={(data) => <UserList users={data} />}
/>

Compound Components

Группа компонентов, разделяющих состояние:

<Tabs>
  <Tabs.List>
    <Tabs.Tab>Профиль</Tabs.Tab>
    <Tabs.Tab>Настройки</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panels>
    <Tabs.Panel>Контент профиля</Tabs.Panel>
    <Tabs.Panel>Контент настроек</Tabs.Panel>
  </Tabs.Panels>
</Tabs>

Custom Hooks (React)

Кастомные хуки как современная замена многим классическим паттернам:

// Хук для управления формой
const useForm = (initialValues) => {
  const [values, setValues] = useState(initialValues);
  
  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };
  
  return { values, handleChange };
};

Критерии выбора паттернов

При выборе паттернов я руководствуюсь:

1. Сложность задачи – простые компоненты не требуют сложных паттернов
2. Масштабируемость – как решение будет развиваться
3. Производительность – влияние на рендеры и бандл
4. Сопровождаемость – насколько легко понять код новым разработчикам
5. Переиспользование – возможность использовать код в других местах

Эволюция использования

За годы практики подходы изменились:

• Раньше: Классические ООП-паттерны, MVC
• Сейчас: Функциональные паттерны, композиция хуков, принципы composition over inheritance

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