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

325

28 июня 2017, 01:36

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

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

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

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

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

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

Answer 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 будет ссылать на текущий экземпляр класса и не перезаписывать какую-то глобальную переменную