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

Question

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

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

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

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

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

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

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

потому что надо разобраться как работает this, а не пытаться костылить с одной локальной переменной на все экземпляры — Grundy, Jun 26 '17 at 07:57
У вас _ "глобальна" для всех слайдеров, поэтому при создании нового слайдера, у всех старых ссылка в _ меняется на this нового слайдера (все из-за замыкания) — ThisMan, Jun 26 '17 at 08:23
Почему бы не сделать остальные функции методами SkySlider? — ThisMan, Jun 26 '17 at 08:25
Подробнее о потере и сохранении контекста — Grundy, Jun 26 '17 at 12:22

ThisMan · Accepted Answer · 2017-06-26T12:26:50.163

4

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

edited Jun 26 '17 at 12:26

answered Jun 26 '17 at 12:10

ThisMan

12,261

плохой пример с прототипами :-) SkySlider будет виден только внутри этой IIFE – Grundy Jun 26 '17 at 12:24
@Grundy, у него же ниже в коде есть строка window.SkySlider = SkySlider – ThisMan Jun 26 '17 at 12:25
Ага, а у тебя не было :) – Grundy Jun 26 '17 at 12:28
@Grundy, просто это не совсем относится к вопросу, я и подумал, что вставлять остальной код не обязательно) – ThisMan Jun 26 '17 at 12:28

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

1 Answers1