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

Применение паттернов GoF в реальных проектах на Frontend

В моей практике как Frontend Developer с фокусом на React и Vue.js, классические паттерны из книги "Design Patterns: Elements of Reusable Object-Oriented Software" (GoF) применяются не всегда буквально, но их концепции глубоко влияют на архитектуру современных приложений. Часто они реализуются через механизмы самих фреймворков или адаптируются под специфику клиентской разработки.

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

Это один из наиболее фундаментальных и постоянно используемых паттернов в разработке UI. React и Vue построены вокруг идеи композиции компонентов.

// React: Дерево компонентов — классический Composite
const App = () => (
  <Layout>
    <Header>
      <Logo />
      <Navigation />
    </Header>
    <MainContent>
      <Article />
      <Sidebar />
    </MainContent>
    <Footer />
  </Layout>
);

// Каждый компонент (Layout, Header, etc.) может содержать другие компоненты или простые элементы.

Компоновщик позволяет строить сложные интерфейсы из простых, повторно используемых частей. Каждый компонент (контейнер или leaf-элемент) имеет единый интерфейс (в React — это props + children), что делает дерево компонентов гибким и легко изменяемым.

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

Прямая реализация через декораторы в JavaScript пока ограничена (stage 2 proposal), но концепция широко используется для расширения функциональности компонентов или функций без изменения их исходного кода.

// Пример концепции: HOC (Higher-Order Component) в React — аналог Decorator
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Компонент ${WrappedComponent.name} mounted`);
    }
    render() {
      // Возвращаем оригинальный компонент, "обогащённый" новым поведением
      return <WrappedComponent {...this.props} />;
    }
  };
}

// Использование
const EnhancedButton = withLogger(Button);

В современном React чаще используют Custom Hooks или Composition via props для аналогичных задач, но суть паттерна — добавление обязанностей динамически — сохраняется.

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

Паттерн лежит в основе практически всех систем реактивности и управления состоянием в frontend.

// Vue.js: Реактивная система — яркий пример Observer
const vm = new Vue({
  data: {
    message: 'Hello'
  }
});

// 'Наблюдатели' (Watchers) автоматически отслеживают изменения data
vm.$watch('message', (newVal, oldVal) => {
  console.log(`Message changed from ${oldVal} to ${newVal}`);
});

// Изменение данных вызывает уведомление всех зависимых компонентов (observers)
vm.message = 'World';

В React роль наблюдателя играет механизм перерисовки компонентов при изменении состояния (setState, контекст, Redux). В Redux/MobX сами библиотеки являются реализациями вариаций этого паттерна (например, Pub/Sub для диспетчеризации действий).

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

Часто применяется для реализации различных алгоритмов или поведений, которые можно выбирать во время выполнения. Например, валидация форм, стратегии сортировки или рендеринга.

// Пример: Стратегии валидации поля ввода
interface ValidationStrategy {
  validate(value: string): boolean;
}

class EmailValidation implements ValidationStrategy {
  validate(value: string) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
  }
}

class RequiredValidation implements ValidationStrategy {
  validate(value: string) {
    return value.trim().length > 0;
  }
}

// Использование
const validators: ValidationStrategy[] = [new RequiredValidation(), new EmailValidation()];
const isValid = validators.every(strategy => strategy.validate(userInput));

Это делает код валидации расширяемым и независимым от конкретных правил.

5. Фабричный метод (Factory Method) и Абстрактная фабрика (Abstract Factory)

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

// Пример: Фабрика для создания компонентов UI по типу
interface UIComponentFactory {
  createButton(): Button;
  createInput(): Input;
}

class MaterialUIFactory implements UIComponentFactory {
  createButton() { return new MaterialButton(); }
  createInput() { return new MaterialInput(); }
}

class BootstrapUIFactory implements UIComponentFactory {
  createButton() { return new BootstrapButton(); }
  createInput() { return new BootstrapInput(); }
}

// Приложение использует фабрику для создания согласованных компонентов
const factory = theme === 'material' ? new MaterialUIFactory() : new BootstrapUIFactory();
const button = factory.createButton();

На практике это может быть реализовано через Theme Providers или системы дизайна (например, в библиотеках компонентов).

6. Посредник (Mediator)

Ключевой паттерн для управления сложными взаимодействиями между множеством компонентов, особенно в избегании прямых связей (пропсы глубоко вниз, события вверх).

// Реализация через Context в React или Vuex в Vue
// Контекст (или store) выступает посредником между компонентами
const UserContext = React.createContext();

const App = () => {
  const [user, setUser] = useState(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      <ProfilePage /> {/* Не передаёт props напрямую до Header */}
      <Header />
    </UserContext.Provider>
  );
};

// Header и ProfilePage взаимодействуют через контекст (посредник)
const Header = () => {
  const { user } = useContext(UserContext);
  return <div>Welcome, {user?.name}</div>;
};

Это уменьшает зацепление и централизует управление состоянием взаимодействия.

Выводы и адаптация

Паттерны GoF в frontend часто интегрируются в архитектуру фреймворков или реализуются через их API. Современные подходы (как Composition over Inheritance в React) также берут идеи из этих паттернов. Их применение делает код:

• Более модульным и переиспользуемым (Composite, Decorator).
• Гибким к изменениям (Strategy, Factory).
• Управляемым и предсказуемым (Observer, Mediator).

Ключ — не в буквальном применении классических реализаций из Java/C++, а в понимании принципов и их адаптации под экосистему JavaScript и конкретный фреймворк. Это позволяет строить масштабируемые, поддерживаемые и тестируемые frontend-приложения.