Builder в JS

Builder (cтроитель) - порождающий шаблон программирования. Применяется для создания сложных объектов при помощи цепочки методов someBuilder->setValueA(1)->setValueB(2)->build()

Пример использования builder'a из документации NestJS OpenAPI . Source code

  const options = new DocumentBuilder()
    .setTitle('Cats example')
    .setDescription('The cats API description')
    .setVersion('1.0')
    .addTag('cats')
    .addBearerAuth()
    .build();

На примере создания пиццы:

class Pizza {
  constructor(builder) {
    this.size = builder.size;
    this.cheeze = builder.cheeze || false;
    this.pepperoni = builder.pepperoni;
    this.tomato = builder.tomato || false;
    if (builder.date) {
      this.date = builder.date || new Date();
    }
    this.address = builder.address;
  }
}

class PizzaBuilder {
  pepperoni = false;

  constructor(size) {
    this.size = size;
  }

  addPepperoni() {
    this.pepperoni = true;
    return this;
  }

  addCheeze() {
    this.cheeze = true;
    return this;
  }

  addTomato(count) {
    this.tomato = count;
    return this;
  }

  setDate(date) {
    this.date = date;
    return this;
  }

  setAddress(address) {
    this.address = address;
    return this;
  }

  build() {
    return new Pizza(this);
  }
}

Класс Pizza необязателен, может просто возвращаться объект вида { ... this }.

Использование:

const pizza = new PizzaBuilder(31)
  .addTomato(3)
  .setAddress('Ленина 18')
  .setDate(new Date(2020, 1, 24))
  .build();

Похожие записи

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Добавить css link и js script динамически

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...

Не ставить фокус по клику

Проблема заключалась в следующем: когда имеется интерактивный элемент с :focus стилем и вы щелкаете по этому элементу, на нём остаётся focus стиль (outline обводка). У нативной кнопки всё работает as expected, но стоит её добавить любой стиль и, как побочный эффект, меняется её поведение.