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

Начните здесь, если вы новичок в шаблонах проектирования в JavaScript

Начни Учить Full-Stack JavaScript СЕЙЧАС!

Примеры из реальной жизни

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

Базовый дом будет иметь дверь, ноль или более окон и крышу с окружающими стенами. Некоторые могут даже иметь гараж, а некоторые — бассейн. Мы хотели бы, чтобы процесс был более простым и гибким, чтобы можно было вносить изменения.

Пошаговая сборка деталей лего, имеющихся в вашем распоряжении, составляет суть паттерна Строитель.

Таким образом, объекты конструируются в соответствии с последовательностью шагов один за другим, а не достигаются сразу.

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

JavaScript предоставляет множество способов создания объектов.

Инициализатор объекта

Самый распространенный метод создания объекта в JavaScript - это нотация «объектный литерал».

const employee = {
  firstName: 'Sam',
  lastName: 'Greene',
  id: '12340987',
  phone: '07123456789'
};

где firstName, lastName, id и phone - это свойства объекта с именем employee.

Конструктор

В качестве альтернативы мы можем использовать конструктор для создания нескольких экземпляров похожих объектов с помощью ключевого слова new.

class Employee {
    constructor(fname, lname, id, ph) {
        this.firstName = fname;
        this.lastName = lname;
        this.id = id;
        this.ph;
    }
};

const employee1 = new Employee('Sam', 'Greene', 12340987, '07123456789');
const employee2 = new Employee('Nate', 'Tyson', 56478390, '07987654321');

Использование Object.create

Object.create() - это встроенная функция, которую вы можете использовать для создания нескольких экземпляров объекта. Это позволяет вам передать объект шаблона в качестве входных данных, таким образом, выбирая прототип для объектов по желанию, без конструктора.

const Employee = {
  isAdmin: false,
  getRole: function() {
	  return this.isAdmin ? 'Admin' : 'RegularEmp';
  };
};

const emp1 = Object.create(Employee);
emp1.getRole(); //'RegularEmp'

const emp2 = Object.create(Employee);
emp2.isAdmin = true;
emp2.getRole(); //'Admin'

В этом примере и emp1, и emp2 унаследовали метод getRole. Как только вы установите для параметра isAdmin значение true, роль emp2 изменится на Admin.

Эта проблема

Похоже, что уже существует несколько способов создания объектов в JavaScript. Зачем нам изобретать что-то другое?

Рассмотрим два важных вопроса:

  • Что делать, если вам нужно создать сложный объект, содержащий слишком много полей и свойств?
  • Что, если вам нужно создать несколько экземпляров почти одного и того же объекта?

Литерал объекта - не лучший выбор, поскольку он не помогает повторно использовать код. Каждый раз, когда вам нужен новый объект, вам придется снова и снова перечислять все его поля.

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

Паттерн Строитель

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

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

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

Шаблон Builder позволяет упростить создание сложного объекта, отделив его от его представления.

Этот шаблон упрощает создание объекта, выполняя процесс поэтапно, а также инкапсулируя (скрывая) детали реализации этих шагов.

Давайте посмотрим, как выглядит гибкий дизайн для простого конструктора OTG и как он развивается с помощью паттерна Builder.

Создание OTG с использованием шаблона проектирования Builder

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

Шаг 1. Класс OTG

Простой класс для OTG здесь имеет конструктор JS, который принимает четыре параметра. У каждого экземпляра OTG есть заголовок по умолчанию, переопределяемая температура и выбор времени, которые по умолчанию установлены на 150 и 30 соответственно.

class OTG {
	constructor(model, color, maxTemperature, maxTimeSelection) {
	  this.model = model;
	  this.title = 'OTG';
	  this.color = color;
	  this.maxTemperature = maxTemperature || 150;
	  this.maxTimeSelection = maxTimeSelection || 30;
	}
}

const redOTG = new OTG('LG', 'red');
const highTempOTG = new OTG('LG', 'black', 200);
const highendTimeOTG = new OTG('LG', 'red', '150', '60');

Приведенный выше код пока выглядит нормально. Но с этим есть проблема.

Представьте, что вам нужно создать несколько выборок экземпляров OTG. Будет сложно отслеживать параметры и их порядок в конструкторе. Кроме того, иногда нет необходимости отправлять определенные необязательные параметры.

Шаг 2. Создайте класс строителя

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

class OTGBuilder {
  constructor(model, color) {
    this.model = model;
    this.title = 'OTG';
    this.color = color;
  }
}

Здесь класс OTGBuilder отвечает за создание экземпляров класса OTG. Но пока этого не происходит. На данный момент он просто захватывает базовую модель и цвет полей.

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

Шаг 3. Добавьте необязательные параметры как отдельные функции

Вы, наверное, заметили, что поля maxTemperature и maxTimeSelection нельзя настроить с помощью конструктора.

Эти свойства необязательны, и мы создадим отдельные функции для их установки.

class OTGBuilder {
  constructor(model, color) {
	  this.model = model;
    this.title = 'OTG';
    this.color = color;
  }
  setMaxTemperature(temp) {
    this.maxTemperature = temp;
    return this;
  }

  setMaxTimeSelection(maxTime) {
    this.maxTimeSelection = maxTime;
    return this;
  }
}

Необходимо добавить return this;, чтобы убедиться, что мы можем использовать цепной вызов при работе с шаблоном проектирования Builder.

const otg = new OTGBuilder('MorphyRichards', 'Black')
.setMaxTemperature(250)
.setMaxTimeSelection(60);

Шаг 4. Сборка

Единственная оставшаяся проблема заключается в том, что объект otg еще не является подходящим OTG. Это экземпляр класса OTGBuilder. И вам нужно реализовать последний шаг процесса — метод build ().

class OTGBuilder {
  constructor(model, color) {
    this.model = model;
    this.title = 'OTG';
    this.color = color;
  }
  setMaxTemperature(temp) {
    this.maxTemperature = temp;
    return this;
  }

  setMaxTimeSelection(maxTime) {
    this.maxTimeSelection = maxTime;
    return this;
  }

  build() {
    return new OTG(this.model, this.color,
    this.maxTemperature, this.maxTimeSelection);
  }
}

Теперь вы можете вызвать метод build(), когда будете готовы создать свой OTG.

const basicOTG = new OTGBuilder('MorphyRichards', 'Black')
  .setMaxTemperature(250)
  .setMaxTimeSelection(60)
  .build();

При желании вы всегда можете пропустить шаги по установке дополнительных параметров.

const default = new OTGBuilder('Generic OTG', 'White')
  .build();

Для свойств maxTemperature и maxTimeSelection по умолчанию будут заданы значения 150 и 30, если вы не перезапишете их с помощью setMaxTemperature и setMaxTimeSelection.

Получите мою бесплатную электронную книгу , чтобы подготовиться к техническому собеседованию, или начните учить Full-Stack JavaScript