Приведи пример использования принципа open/closed

Question

Приведи пример использования принципа open/closed

Тип вопроса: Паттерны Вероятность: 10% Категория: Frontend Разработчик

Ответ

Принцип open/closed (открыто для расширения, закрыто для модификации) означает, что классы/компоненты должны быть расширяемы без изменения их исходного кода.

Пример с React-компонентом:

// Базовый компонент Button (закрыт для модификаций)
const Button = ({ onClick, children }) => (
  <button onClick={onClick} className="base-btn">
    {children}
  </button>
);

// Расширяем функциональность через композицию (открыт для расширений)
const IconButton = ({ icon, ...props }) => (
  <Button {...props}>
    <Icon name={icon} />
    {props.children}
  </Button>
);

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

Базовый Button не меняется при добавлении новых вариантов кнопок
Новая функциональность добавляется через создание новых компонентов (IconButton)
Можно добавлять любые варианты кнопок без риска сломать существующий код

Ответ 18+ 🔞

А, ну это же классика, блядь! Принцип открыт-закрыт, ёпта! Суть в том, что твой код должен быть как хороший шкаф — ты можешь навешивать на него новые полки и крючки, но сам каркас трогать не надо, а то развалится всё, пиздец.

Смотри, вот у тебя есть кнопка, простая, как три копейки.

// Базовый компонент Button (закрыт для модификаций)
const Button = ({ onClick, children }) => (
  <button onClick={onClick} className="base-btn">
    {children}
  </button>
);

И тут приходит заказчик и орёт: «Хочу кнопку с иконкой, блядь!». Мудак, понимаешь? Ну и что, будешь лезть в этот Button и пихать туда проверки if (icon) { ... }? Так дохуя и наработаешься, а потом она ещё и с тултипом понадобится, и с лоадером. Получится пиздопроебина на тысячу строк, в которой нихуя не разберёшься.

А по-умному — делаешь нового уёбка поверх старого, не трогая основу!

// Расширяем функциональность через композицию (открыт для расширений)
const IconButton = ({ icon, ...props }) => (
  <Button {...props}>
    <Icon name={icon} />
    {props.children}
  </Button>
);

Вот и вся магия, в рот меня чих-пых! Базовый Button стоит себе, как скала, нихуя не знает про иконки. А IconButton — это просто его обёртка, которая добавляет свою фичу. Захотел кнопку с анимацией — обернул в AnimatedButton. Захотел, чтобы она материлась при клике — ну, сделай CursingButton, блядь. И все они друг другу не мешают, потому что старый код не трогаешь, а новый пишешь рядом. Красота, ёперный театр!