Страницы

Поиск по вопросам

вторник, 19 февраля 2019 г.

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

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

Комментариев нет:

Отправить комментарий