Что такое паттерны проектирования и какие используются во Frontend?

# Паттерны проектирования во Frontend

Что такое паттерны проектирования?

Паттерны проектирования (Design Patterns) — это переиспользуемые решения типичных проблем в разработке программного обеспечения. Это не готовые библиотеки, а концептуальные подходы и шаблоны кода, которые помогают решать часто встречающиеся задачи и делают код более читаемым, поддерживаемым и масштабируемым.

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

Основные категории паттернов

1. Порождающие паттерны (Creational)

Эти паттерны отвечают за создание объектов.

Singleton

Обеспечивает единственный экземпляр класса с глобальной точкой доступа:

class Logger {
  static instance = null;
  
  static getInstance() {
    if (!this.instance) {
      this.instance = new Logger();
    }
    return this.instance;
  }
  
  log(message) {
    console.log(message);
  }
}

Factory

Создаёт объекты без указания их конкретных классов:

function createComponent(type) {
  switch(type) {
    case button:
      return <Button />;
    case input:
      return <Input />;
    default:
      return null;
  }
}

2. Структурные паттерны (Structural)

Отвечают за комбинирование объектов в более сложные структуры.

Adapter (Адаптер)

Преобразует интерфейс одного класса в интерфейс другого:

function adaptApiResponse(data) {
  return {
    id: data.user_id,
    name: data.full_name,
    email: data.email_address
  };
}

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

Добавляет новую функциональность к существующему объекту:

function withTheme(Component) {
  return (props) => (
    <ThemeProvider>
      <Component {...props} />
    </ThemeProvider>
  );
}

Proxy

Представляет заместителя для контроля доступа к объекту:

const cacheProxy = {
  cache: {},
  getValue(key) {
    if (!this.cache[key]) {
      this.cache[key] = expensiveOperation(key);
    }
    return this.cache[key];
  }
};

3. Поведенческие паттерны (Behavioral)

Определяют взаимодействие между объектами.

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

Определяет зависимость один-ко-многим между объектами. В React это EventEmitter:

class EventEmitter {
  constructor() {
    this.listeners = {};
  }
  
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }
  
  emit(event, data) {
    this.listeners[event]?.forEach(cb => cb(data));
  }
}

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

Определяет семейство алгоритмов, инкапсулирует каждый и делает их взаимозаменяемыми:

const sortStrategies = {
  ascending: (arr) => [...arr].sort((a, b) => a - b),
  descending: (arr) => [...arr].sort((a, b) => b - a),
};

function sort(arr, strategy) {
  return sortStrategies[strategy](arr);
}

Command

Инкапсулирует запрос как объект, позволяя параметризовать клиентов:

const commands = {
  undo: () => /* отменить действие */,
  redo: () => /* повторить действие */,
  save: () => /* сохранить */
};

Паттерны в React экосистеме

1. Component Composition

Вместо наследования используется композиция компонентов:

function Card({ header, content, footer }) {
  return (
    <div className="card">
      <Header>{header}</Header>
      <Content>{content}</Content>
      <Footer>{footer}</Footer>
    </div>
  );
}

2. Render Props

Передача функции как пропса для рендеринга:

function DataFetcher({ render }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(/api/data).then(setData);
  }, []);
  
  return render(data);
}

// Использование
<DataFetcher render={(data) => <div>{data}</div>} />

3. Custom Hooks

Переиспользуемая логика, состояние и эффекты:

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    checkAuth().then(setUser).finally(() => setLoading(false));
  }, []);
  
  return { user, loading };
}

4. Higher-Order Components (HOC)

Функция, которая принимает компонент и возвращает новый компонент:

function withLoadingIndicator(Component) {
  return function WithLoadingIndicator({ isLoading, ...props }) {
    return isLoading ? <Spinner /> : <Component {...props} />;
  };
}

Заключение

Паттерны проектирования — это не закон, а рекомендации. Главное правило: использовать их для улучшения кода, а не усложнения. Во Frontend разработке наиболее популярны паттерны композиции, пользовательские хуки и адаптеры для работы с API.