Абстрактный шаблон проектирования — это шаблон творческого проектирования, который предоставляет интерфейс для создания семейств связанных или зависимых объектов без указания их конкретных классов. Этот шаблон способствует слабой связи между клиентским кодом и создаваемыми им объектами, что делает код более гибким и простым в обслуживании.
Давайте углубимся в практический пример реализации абстрактного шаблона проектирования в TypeScript. Предположим, мы создаем библиотеку пользовательского интерфейса, которая должна поддерживать несколько тем (например, светлую и темную тему). Каждая тема имеет свой набор компонентов пользовательского интерфейса, таких как кнопки и заголовки. Мы хотим создать эти компоненты пользовательского интерфейса таким образом, чтобы мы могли легко переключаться между темами.
Шаг 1. Определите абстрактные классы и методы:
Сначала мы определяем абстрактный класс UIComponent, который представляет общий компонент пользовательского интерфейса. Этот класс объявляет абстрактный метод render, который должны реализовать конкретные компоненты пользовательского интерфейса.
abstract class UIComponent {
abstract render(): void;
}
Шаг 2. Создайте конкретные классы:
Затем мы создаем конкретные классы компонентов пользовательского интерфейса для каждой темы, такие как LightButton, DarkButton, LightHeader и DarkHeader.
Эти классы наследуют абстрактный класс `UIComponent` и реализуют метод `render` в соответствии со своими темами.
class LightButton extends UIComponent {
render() {
// Render a button with light theme styles
}
}
class DarkButton extends UIComponent {
render(){
// Render a button with dark theme styles
}
}
class LightHeader extends UIComponent {
render() {
// Render a header with light theme styles
}
}
class DarkHeader extends UIComponent {
render(){
// Render a header with dark theme styles
}
}
Шаг 3. Реализация фабричного метода:
Чтобы динамически создавать компоненты пользовательского интерфейса на основе выбранной темы, мы реализуем фабричный метод. Этот метод принимает идентификатор темы в качестве входных данных и возвращает соответствующий экземпляр компонента пользовательского интерфейса.
function createUIComponent(theme: string): UIComponent {
switch (theme) {
case ‘light’:
return new LightButton();
case ‘dark’:
return new DarkButton();
// Handle other components and themes
}
}
Теперь вы можете использовать фабричный метод createUIComponent для создания компонентов пользовательского интерфейса, не зная их конкретных классов:
const button = createUIComponent(‘light’); button.render(); // Renders a button with light theme styles
Реализуя абстрактный шаблон проектирования, мы получили гибкое и расширяемое решение для создания компонентов пользовательского интерфейса, зависящих от темы. Этот шаблон позволяет нам легко добавлять новые темы и компоненты пользовательского интерфейса, а также отделяет клиентский код от особенностей каждого компонента.
