Что такое логика представления?

Что такое логика представления?

Логика представления (Presentation Logic) — это часть бизнес-логики, которая непосредственно связана с подготовкой данных для их отображения в пользовательском интерфейсе. Она отвечает за преобразование, форматирование и организацию данных, полученных от серверной части или состояния приложения, в форму, понятную и удобную для конечного пользователя.

Основные задачи логики представления

1. Форматирование данных: преобразование сырых данных в читаемый формат. Например, преобразование даты из формата ISO 8601 (2024-05-15T10:30:00Z) в пользовательский вид (15 мая 2024, 10:30).
2. Агрегация и вычисления: подсчет суммы элементов в списке, вычисление среднего значения, определение статуса на основе нескольких условий.
3. Управление видимостью и состоянием UI: определение того, какой компонент, кнопка или секция должна быть показана или скрыта в зависимости от данных или условий (например, показывать кнопку "Сохранить" только если данные были изменены).
4. Обработка и валидация пользовательского ввода: часто на уровне UI — проверка формата email в поле ввода перед отправкой на сервер, динамическое сообщение об ошибке.
5. Организация потоков данных для отображения: сортировка списка, фильтрация элементов, группировка данных по категориям.

Разделение логики представления и бизнес-логики

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

• Бизнес-логика: правила, расчеты, взаимодействие с API, манипуляции с данными, не зависящие от UI. Пример: вычисление итоговой стоимости заказа с учетом налогов и скидок.
• Логика представления: как именно эта итогововая стоимость будет показана — округление до двух знаков, добавление символа валюты, окрашивание в красный цвет если сумма превышает бюджет.

Примеры логики представления в коде

Рассмотрим пример в контексте React компонента.

// ProductList.jsx
import React from 'react';

const ProductList = ({ products }) => {
  // Логика представления: вычисление общей стоимости для отображения
  const totalPrice = products.reduce((sum, product) => sum + product.price, 0);
  const formattedTotalPrice = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
  }).format(totalPrice);

  // Логика представления: фильтрация и сортировка для UI
  const filteredAndSortedProducts = products
    .filter(product => product.isAvailable) // Фильтрация по доступности
    .sort((a, b) => b.price - a.price); // Сортировка по цене (от высокой к низкой)

  // Логика представления: определение условия для отображения сообщения
  const isListEmpty = filteredAndSortedProducts.length === 0;

  return (
    <div>
      <h2>Список продуктов</h2>
      <p>Общая стоимость: <strong>{formattedTotalPrice}</strong></p>

      {isListEmpty ? (
        <p>Нет доступных продуктов.</p>
      ) : (
        <ul>
          {filteredAndSortedProducts.map(product => (
            <li key={product.id}>
              {product.name} - {/* Форматирование цены каждого продукта */}
              {new Intl.NumberFormat('ru-RU', {
                style: 'currency',
                currency: 'RUB'
              }).format(product.price)}
              {product.isPopular && <span> 🔥 Популярный</span>} // Условное отображение значка
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ProductList;

В этом примере:

• Вычисление totalPrice и его форматирование — это логика представления.
• Фильтрация и сортировка массива products для отображения (filteredAndSortedProducts) — логика представления.
• Проверка isListEmpty для условного рендеринга сообщения — логика представления.
• Форматирование цены каждого продукта внутри списка — логика представления.

Где должна располагаться логика представления?

Идеальное место для логики представления — внутри компонентов UI (особенно в компонентах-контейнерах или "умных" компонентах), либо в специализированных утилитах/хуках, предназначенных для подготовки данных к отображению.

// presentationUtils.js - Пример выделения логики представления в утилиты
export const formatCurrency = (value, locale = 'ru-RU', currency = 'RUB') => {
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(value);
};

export const getStatusLabel = (statusCode) => {
  const statusMap = {
    1: '✅ Активен',
    2: '⚠️ На проверке',
    3: '❌ Отклонен'
  };
  return statusMap[statusCode] || 'Неизвестный статус';
};

Почему важно разделять эту логику?

• Повышение переиспользуемости: компоненты становятся более универсальными, их легче тестировать.
• Упрощение тестирования: логику представления можно тестировать отдельно от бизнес-логики и рендеринга.
• Чистота кода: компоненты остаются focused на своей основной задаче — отображении.
• Поддержка и изменения: изменения в правилах форматирования или отображения локализованы в одном месте.

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