Как реализуешь отображение данных в разных форматах?

Подход к реализации отображения данных в разных форматах

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

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

Ключевой принцип — разделение ответственности между:

• Логикой данных (получение, преобразование, валидация)
• Логикой представления (отображение, форматирование)
• Состоянием интерфейса (активный формат, настройки пользователя)

Я создаю абстрактный слой форматеров (formatters), который инкапсулирует все преобразования:

// Базовый интерфейс для форматеров
interface DataFormatter<T, R> {
  format(data: T): R;
  supports(format: string): boolean;
}

// Конкретная реализация для JSON
class JsonFormatter implements DataFormatter<any, string> {
  format(data: any): string {
    return JSON.stringify(data, null, 2);
  }
  
  supports(format: string): boolean {
    return ['json', 'application/json'].includes(format.toLowerCase());
  }
}

// Реализация для CSV
class CsvFormatter implements DataFormatter<any[], string> {
  format(data: any[]): string {
    if (!data.length) return '';
    
    const headers = Object.keys(data[0]);
    const rows = data.map(item => 
      headers.map(header => `"${item[header] || ''}"`).join(',')
    );
    
    return [headers.join(','), ...rows].join('\n');
  }
  
  supports(format: string): boolean {
    return format.toLowerCase() === 'csv';
  }
}

Паттерн Strategy для переключения форматов

Использую паттерн Strategy для динамического выбора алгоритма форматирования:

class FormatContext {
  private formatters: Map<string, DataFormatter<any, any>> = new Map();
  private currentFormat: string = 'json';

  registerFormatter(name: string, formatter: DataFormatter<any, any>): void {
    this.formatters.set(name.toLowerCase(), formatter);
  }

  setFormat(format: string): void {
    if (this.formatters.has(format.toLowerCase())) {
      this.currentFormat = format.toLowerCase();
    }
  }

  formatData(data: any): string {
    const formatter = this.formatters.get(this.currentFormat);
    if (!formatter) {
      throw new Error(`Формат ${this.currentFormat} не поддерживается`);
    }
    return formatter.format(data);
  }

  getSupportedFormats(): string[] {
    return Array.from(this.formatters.keys());
  }
}

// Использование
const context = new FormatContext();
context.registerFormatter('json', new JsonFormatter());
context.registerFormatter('csv', new CsvFormatter());
context.setFormat('csv');
const result = context.formatData(users);

React-компонент для отображения с переключением форматов

Реализую динамический компонент, который позволяет пользователю выбирать формат:

import React, { useState, useMemo } from 'react';

interface DataViewerProps<T> {
  data: T;
  initialFormat?: string;
  formatters: Record<string, (data: T) => string>;
}

const DataViewer = <T,>({ 
  data, 
  initialFormat = 'json', 
  formatters 
}: DataViewerProps<T>) => {
  const [currentFormat, setCurrentFormat] = useState(initialFormat);
  const [isRaw, setIsRaw] = useState(false);

  const formattedContent = useMemo(() => {
    const formatter = formatters[currentFormat];
    return formatter ? formatter(data) : String(data);
  }, [data, currentFormat, formatters]);

  return (
    <div className="data-viewer">
      <div className="controls">
        <select 
          value={currentFormat} 
          onChange={(e) => setCurrentFormat(e.target.value)}
        >
          {Object.keys(formatters).map(format => (
            <option key={format} value={format}>
              {format.toUpperCase()}
            </option>
          ))}
        </select>
        
        <label>
          <input 
            type="checkbox" 
            checked={isRaw} 
            onChange={(e) => setIsRaw(e.target.checked)} 
          />
          Показать исходный код
        </label>
      </div>
      
      <div className="content">
        {isRaw ? (
          <pre>{formattedContent}</pre>
        ) : (
          <DataRenderer format={currentFormat} content={formattedContent} />
        )}
      </div>
    </div>
  );
};

// Специализированный компонент для рендеринга
const DataRenderer = ({ format, content }) => {
  switch (format) {
    case 'json':
      return <JsonHighlighter code={content} />;
    case 'csv':
      return <CsvTable content={content} />;
    case 'xml':
      return <XmlViewer content={content} />;
    default:
      return <pre>{content}</pre>;
  }
};

Поддержка различных форматов данных

На практике поддерживаю следующие форматы:

• JSON — для API и структурированных данных
• XML — для legacy-систем и специфических протоколов
• CSV/TSV — для табличных данных и экспорта
• YAML — для конфигураций и документации
• Plain Text — для логов и простого текста
• HTML — для форматированного контента
• Markdown — для документации

Кеширование и оптимизация производительности

Для улучшения производительности при частом переключении форматов:

class FormattingCache {
  private cache: Map<string, Map<string, string>> = new Map();

  get(data: any, format: string): string | null {
    const dataKey = this.generateKey(data);
    return this.cache.get(dataKey)?.get(format) || null;
  }

  set(data: any, format: string, result: string): void {
    const dataKey = this.generateKey(data);
    if (!this.cache.has(dataKey)) {
      this.cache.set(dataKey, new Map());
    }
    this.cache.get(dataKey).set(format, result);
  }

  private generateKey(data: any): string {
    // Используем хеширование для создания ключа
    return JSON.stringify(data);
  }
}

Интеграция с системой типов TypeScript

Создаю строгую типизацию для безопасности:

type SupportedFormats = 'json' | 'csv' | 'xml' | 'yaml' | 'text';

interface FormattingOptions {
  indent?: number;
  includeHeaders?: boolean;
  dateFormat?: string;
  numberFormat?: string;
}

interface FormatterConfig {
  format: SupportedFormats;
  options?: FormattingOptions;
  mimeType: string;
  fileExtension: string;
}

const FORMAT_CONFIGS: Record<SupportedFormats, FormatterConfig> = {
  json: { 
    format: 'json', 
    mimeType: 'application/json', 
    fileExtension: '.json' 
  },
  csv: { 
    format: 'csv', 
    mimeType: 'text/csv', 
    fileExtension: '.csv',
    options: { includeHeaders: true }
  },
  // ... другие форматы
};

Практические аспекты реализации

1. Декларативная конфигурация — позволяю настраивать форматы через конфигурационные файлы
2. Плагинная архитектура — даю возможность добавлять новые форматы без изменения кода
3. Ленивая загрузка — тяжелые форматеры загружаю только при необходимости
4. Интернационализация — учитываю локализацию (разделители десятичных дробей, форматы дат)
5. Доступность — обеспечиваю семантическую разметку для скринридеров
6. Экспорт файлов — добавляю возможность скачивания данных в выбранном формате

Заключение

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