Возник вопрос о правильном подходе создания плагина на js.
Пример работы на Plunker, а так же код на github
Суть работы плагина:
на странице есть изображения, при клике на которые открывается модальное окно;
в этом модальном окне есть Слайдер и Превьюшки с этими изображениями, которые мы можем листать, переключить и т.д.;
в слайдер можем передать параметры отображение кол-ва превью и возможность их отключить;
на одной странице можем использовать плагин несколько раз.
Проблема: когда используется два и более раз, то плагин ломается и отображет только последнюю галерею.
(function() {
let gallery_1 = new SkySlider('.first-gallery');
let gallery_2 = new SkySlider('#second-gallery', {
showThumbnails: true,
thumbnailsItemCount: 6,
});
})();
Ответ
Вместо хранения 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 будет ссылать на текущий экземпляр класса и не перезаписывать какую-то глобальную переменную
Комментариев нет:
Отправить комментарий