Правильное написание плагина на чистом JavaScript

#javascript

Возник вопрос о правильном подходе создания плагина на js.

Пример работы на Plunker, а так же код на github.

Суть работы плагина:


на странице есть изображения, при клике на которые открывается модальное окно;
в этом модальном окне есть Слайдер и Превьюшки с этими изображениями, которые мы
можем листать, переключить и т.д.;
в слайдер можем передать параметры отображение кол-ва превью и возможность их отключить;
на одной странице можем использовать плагин несколько раз.


Проблема: когда используется два и более раз, то плагин ломается и отображет только
последнюю галерею.

(function() {
  let gallery_1 = new SkySlider('.first-gallery');

  let gallery_2 = new SkySlider('#second-gallery', {
    showThumbnails: true,
    thumbnailsItemCount: 6,
  });
})();

    

Ответы

Ответ 1

Вместо хранения this в замыкании, как это сделано у вас

(function() {
    // for `this`
    let _;

    function SkySlider(selector = null, options = null) {
        _ = this;
    }

    // остальные функции использующие _ в качестве this
})()


Можно все вспомогательные функции поместить в прототип функции SkySlider

(function() {
    function SkySlider(selector = null, options = null) {}

    SkySlider.prototype.init = function () {}
    SkySlider.prototype.otherMethod = function () {}

    // либо по другому делаем функцию доступной из вне
    window.SkySlider = SkySlider
})()


В таких методах this будет ссылать на текущий экземпляр класса и не перезаписывать
какую-то глобальную переменную