Часть 2: Понимание принципа открытия-закрытия (OCP)
Привет! Из предыдущей статьи мы уже знаем о SOLID и принципе единой ответственности (SRP), а сегодня поговорим о втором — принципе Open-Closed. Этот принцип — причудливое название простой идеи: когда вы добавляете в свой код новую функциональность, не изменяйте существующий код. Вместо этого создайте новый код, расширяющий существующий код.
Итак, как это применимо к Angular?
Давайте рассмотрим тот же пример приложения, которое отображает список продуктов.
Предположим, мы хотим добавить новую функцию, позволяющую пользователям сортировать товары по категориям.
💡 Совет для профессионалов: максимально эффективно используйте компоненты Angular с помощью таких инструментов, как Bit. С Bit вы можете собрать их из своей кодовой базы и поделиться ими в Bit Cloud. Затем вы можете повторно использовать эти компоненты во всех своих проектах.
Также читайте:
Сценарий 1: Неиспользование принципа Open-Closed
В этом сценарии мы можем изменить существующий ProductComponent, чтобы добавить функциональность сортировки. Это означает, что нам нужно будет изменить существующий код и добавить в компонент новые свойства и методы. Этот подход нарушает принцип Open-Closed, потому что мы меняем существующий код, а не расширяем его.
Вот как может выглядеть код:
В этом коде мы добавили два новых свойства (sortBy и sortAscending) и новый метод sortProducts() в файл ProductComponent.
У этого подхода есть несколько недостатков:
- У ProductComponent теперь слишком много обязанностей — отображение товаров и сортировка по категориям. Это нарушает принцип единственной ответственности.
- Если мы хотим добавить больше типов сортировки в будущем, нам придется продолжать модифицировать ProductComponent, что нарушает принцип Open-Closed.
- Если у нас есть другие компоненты, которые отображают продукты, нам также придется дублировать код сортировки в этих компонентах.
Сценарий 2: Использование принципа открытого-закрытого
В этом сценарии мы можем создать новый компонент с именем ProductSorterComponent, который будет обрабатывать функции сортировки. Этот компонент расширит поведение существующего ProductComponent, не изменяя его.
Вот как может выглядеть код:
В этом коде мы создали новый компонент с именем ProductSorterComponent, который обрабатывает функции сортировки. ProductComponent теперь отображает только продукты и не обрабатывает логику сортировки. Мы передали данные products, sortBy, sortAscending из ProductComponent в ProductSorterComponent с помощью декоратора @Input().
Этот подход имеет несколько преимуществ:
- Каждый компонент ProductComponent и ProductSorterComponent несет единую ответственность в соответствии с принципом единой ответственности. ProductComponent отображает продукты, а ProductSorterComponent сортирует продукты по параметру.
- Если мы хотим изменить параметр сортировки, мы можем передать его компонентам ProductSorterComponent, не изменяя ProductComponent. Это следует принципу открытого-закрытого.
- Мы можем повторно использовать ProductSorterComponent в других компонентах, которые отображают продукты. Это позволяет избежать дублирования кода сортировки в нескольких компонентах.
- ProductComponent и ProductSorterComponent можно разрабатывать и тестировать независимо друг от друга. Это улучшает ремонтопригодность кодовой базы.
Таким образом, принцип Open-Closed является важным принципом разработки программного обеспечения, который поощряет расширяемость кода и удобство сопровождения. В Angular мы можем применить этот принцип, создавая новые компоненты, которые расширяют поведение существующих компонентов, не изменяя их. Этот подход помогает нам писать более чистый, более модульный и повторно используемый код.
Спасибо за прочтение, если вам понравилась эта статья, вы можете 👏 или написать комментарий.
Смотрите также другие статьи о принципах дизайна:
Создавайте приложения Angular с повторно используемыми компонентами, как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
