Шаблон проектирования Builder в TypeScript

Что такое шаблон проектирования Builder, когда его следует использовать и как реализовать шаблон проектирования Builder в TypeScript?

Представьте себя в магазине сэндвичей, готовя сэндвич своей мечты. Вы выбираете тип хлеба, начинки, соус и начинки, один за другим. Вместо того, чтобы заказывать все сразу, слой за слоем, ингредиент за ингредиентом, вы создаете сэндвич своей мечты с точностью, гибкостью и полным контролем над конечным результатом.

Именно здесь Builder Design Pattern сияет в разработке программного обеспечения. Это позволяет нам создавать объект по частям, как идеальный бутерброд. Это гарантирует, что процесс будет гибким, четким и менее подверженным ошибкам. Вместо того, чтобы передавать многочисленные параметры в беспорядочном конструкторе, вы можете просто вызывать функции-строители, которые представляют каждый шаг создания объекта.

Настройка сцены для шаблона Builder

Шаблон Builder — это творческий шаблон проектирования, который позволяет создавать сложные объекты шаг за шагом. Шаблон позволяет создавать различные типы или представления объекта, избегая при этом «загрязнения конструктора»: ситуации, когда у вас слишком много параметров конструктора, что может привести к путанице.

Предположим, вы создаете персонажа для видеоигры. У этого персонажа есть несколько атрибутов, таких как имя, класс, броня, оружие и многое другое. Вместо создания сложных конструкторов с несколькими параметрами вы можете использовать шаблон Builder для пошаговой установки этих атрибутов.

Шаблон построителя: почему и когда?

Шаблон Builder служит нескольким целям:

  1. Гибкость. Он позволяет создавать сложные объекты поэтапно, что дает вам большой контроль над созданием объекта.
  2. Чистый и удобочитаемый код. Избегая перегрузки конструктора, ваш код становится более удобным в сопровождении и менее подверженным ошибкам.
  3. Разнообразие: позволяет создавать различные представления объекта из одного и того же кода построения.

Вы должны использовать шаблон Builder, когда:

  • Объект имеет сложное, многоступенчатое строительство.
  • Вы хотите избежать «загрязнения конструктора», когда конструктор имеет слишком много параметров.
  • Вам нужно создать разные представления объекта, что было бы непрактично с конструктором.

Создание с помощью шаблона Builder в TypeScript: пошаговое руководство

Давайте углубимся в то, как мы можем реализовать паттерн Builder в TypeScript, используя в качестве примера игрового персонажа:

Шаг 1: Создайте класс продукта

Во-первых, мы определяем наш «продукт», которым в данном случае является GameCharacter:

class GameCharacter {
  name?: string;
  class?: string;
  weapon?: string;
  armor?: string;
  // ... any other game character attributes

  describe() {
    console.log(`Character: ${this.name}, Class: ${this.class}, Weapon: ${this.weapon}, Armor: ${this.armor}`);
  }
}

Шаг 2: Создайте интерфейс и класс Builder

Далее мы создаем интерфейс CharacterBuilder и класс GameCharacterBuilder, реализующий этот интерфейс:

interface CharacterBuilder {
  setName(name: string): void;
  setClass(className: string): void;
  setWeapon(weapon: string): void;
  setArmor(armor: string): void;
  // ... other setter methods
  build(): GameCharacter;
}

class GameCharacterBuilder implements CharacterBuilder {
  private character: GameCharacter;

  constructor() {
    this.character = new GameCharacter();
  }

  setName(name: string): void {
    this.character.name = name;
  }

  setClass(className: string): void {
    this.character.class = className;
  }

  setWeapon(weapon: string): void {
    this.character.weapon = weapon;
  }

  setArmor(armor: string): void {
    this.character.armor = armor;
  }

  // ... other setter methods

  build(): GameCharacter {
    return this.character;
  }
}

💡 Сделайте GameCharacterBuilder универсальным, а затем с помощью такого инструмента, как Bit, вы сможете независимо тестировать, создавать версии, документировать и публиковать его на платформе хранения компонентов Bit. » откуда вы (или другие члены вашей команды) сможете импортировать в любой из ваших проектов.

Узнать больше:



Шаг 3: Используйте Конструктор

Наконец, мы можем использовать конструктор для создания нового игрового персонажа:

let characterBuilder = new GameCharacterBuilder();
characterBuilder.setName("Archer");
characterBuilder.setClass("Elf");
characterBuilder.setWeapon("Bow");
characterBuilder.setArmor("Leather armor");

let character = characterBuilder.build();
character.describe(); // Outputs: Character: Archer, Class: Elf, Weapon: Bow, Armor: Leather armor

Вот оно! Вы только что использовали шаблон проектирования Builder для создания игрового персонажа гибким и удобным в сопровождении способом. Полный код можно найти в этой сути:

Подведение итогов

Шаблон Builder предлагает надежный и гибкий способ создания объектов, особенно когда они имеют сложный процесс создания или множество потенциальных конфигураций. Это приводит к более ясному, удобному для сопровождения коду и отделяет логику построения от представления объекта.

Как и все шаблоны проектирования, шаблон Builder является инструментом, который вы можете использовать там, где это имеет смысл в вашем конкретном проекте. Это не серебряная пуля, но при разумном использовании она может значительно упростить ваш код и облегчить вашу жизнь как разработчика. Удачной сборки и удачного кодирования!

Создавайте составные приложения с повторно используемыми компонентами, как Lego.

Bit – это цепочка инструментов с открытым исходным кодом для разработки компонуемого программного обеспечения.

С помощью Bit вы можете разрабатывать любую часть программного обеспечения — современное веб-приложение, компонент пользовательского интерфейса, серверную службу или сценарий CLI — как независимую, повторно используемую и компонуемую единицу программного обеспечения. Совместно используйте любой компонент в своих приложениях, чтобы упростить совместную работу и ускорить сборку.

Присоединяйтесь к более чем 100 000 разработчиков, которые вместе создают компонуемое программное обеспечение.

Начните с этих руководств:

→ Микро-Фронтенды: Видео // Гид

→ Кодшеринг: Видео // Гид

→ Модернизация: Видео // Путеводитель

→ Монорепозиторий: Видео // Путеводитель

→ Микросервисы: Видео // Путеводитель

→ Дизайн-система: Видео // Путеводитель

Рекомендуемые статьи: