Как генерировать HTML при создании экземпляра класса?

Question

[mydarck]

Пытаюсь понять как устроена на примере библиотеки Fancybox понять и создать нечто своё. Уперся в динамическое создание DOM элементов при создании экземпляра класса. Вот самый простой пример использования данной библиотеки:

const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
  Dots: false,
});

Что тут происходит в общих чертах мне понятно. Запутался я с динамическим созданием DOM элементов. Правильно ли я понимаю, что синтаксическая конструкция new Carousel создает экземпляр класса? И если да, то как в дальнейшем внутри класса генерируется и возвращается готовый DOM?

Answer 1

[Сергей delphinpro]

Возвращается тут экземпляр класса Carousel, а не готовый DOM.
Разметка создается и инжектируется в страницу прямо внутри класса.
Как это делается, довольно подробно расписано здесь

Comments

[mydarck]

Я сейчас читаю документацию, но не нашел пока такой момент: обычно, в документации, делают экземпляр класса, у которого есть метод отвечающий за вставку. А тут сразу при создании экземпляра, внутри происходит вызов метода, если я правильно понимаю? Например мы передаем объект с полем Dots, после чего у нас в документе в нужном месте появляется отвечающий за это кусок кода. Упрощенно, внутри это так выглядит?

class Carousel {
constructor(selector, options) {
  this.$elem = document.querySelector(selector),
  this.dots = options.dot
}
if( this.dots ) {
  return ...
}
}

[mydarck]

if( this.dots ) {
generateHTML();
}

[Сергей delphinpro]

class Carousel {
  constructor(el, options) {
    this.el = el;
    this.options = options;
    
    this.makeCarousel();
  }
  makeCarousel(){
    if (this.options.dots) {
      this.makeDots();
    }
  }
  makeDots(){
    // Считаем слайды, определяем количество кнопок
    // генерим разметку, вставляем в нужное место в this.el
  }
}

[Сергей delphinpro]

mydarck, никаких возвратов конструкторе делать не нужно. Это бессмысленно, потому что конструкция new всё равно вернет экземпляр класса.