Семантика свойства this.$pop

Question

На сайте Читай-город используется функция function Popup (pop, name, html, handlers) в файле Читай-город - интернет-магазин книг_files\popup.js.Без названия, с помощью которой создается окно входа/регистрации (см. Объект (класс) Popup )

function Popup (pop, name, html, handlers) {
    if (html) {
        $(document.body).append(html);
    }
    handlers = handlers || {};
    this.$pop = $(pop);
    this.selector = pop;
    this.name = name;
    this.$pop_wrapper = this.$pop.parent('.js__popup_main_wrapper');
Popup.instances[this.name] = this;
this.$pop.on('click', '.popup__close, .js__popup__close', this.hide.bind(this));

//Закрытие попапа при клике на маску и при нажатии Esc
if (this.$pop_wrapper) {
    this.$pop_wrapper.on('click', function(event) {
        var mask_wrapper = event.target;
        if (mask_wrapper.classList.contains('js__popup_main_wrapper')) {
            Popup.hideAll();
        }
    });
}

$(document).keyup(function(event) {
    if (event.keyCode === 27) {
        Popup.hideAll();
    }
});

this.$body = this.$pop.find('.popup__body_text');

this.onshow = handlers.show || null;
this.onhide= handlers.hide || null;

this.events = {
    closePopup: 'closePopup',
    openPopup: 'openPopup'
}

}
Popup.instances = {};
Popup.getInstance = function(name, pop, html, handlers) {
    if(Popup.instances[name]){
        return Popup.instances[name];
    }
if (pop){
    return new Popup(pop, name, html, handlers);
}
return null;

};
Popup.hideAll = function() {
    for (var popupName in Popup.instances) {
        if(Popup.instances.hasOwnProperty(popupName)){
            Popup.instances[popupName].hide();
        }
    }
};
Popup.prototype.show = function() {
    Popup.hideAll();
//Скрываем скролл
$('body').css('overflow', 'hidden');
// временный костыль
// почему-то не всегда инициализируется dom-элемент попапа
if (!this.$pop.length) this.$pop = $(this.selector);
if (!this.$pop.length) return;

if (this.$pop_wrapper) {
    this.$pop_wrapper.css("display", "flex");
}

this.$pop
    .removeClass('hidden')
    .addClass('shown')
    .attr('data-opened', '');
this.onshow ? this.onshow() : null;

if (window.userCity &amp;&amp; window.userCity.hideBlock) { //если открыт попап города(актуально для мобильной версии)
    //то закрыть блок выбора города
    window.userCity.hideBlock();
}

//создадим событие открытия попапа
eventEmitter.dispatch(this.events.openPopup, {
    popupName: this.name,
    popup: this.$pop
});

};
Popup.prototype.hide = function() {
    this.$pop
        .removeClass('shown')
        .addClass('hidden')
        .removeAttr('data-opened');
    this.onhide ? this.onhide() : null;
if (this.$pop_wrapper) {
    this.$pop_wrapper.fadeOut(50);
}

var opened = $('[data-opened]').length;

if (opened === 0) {
    //Возвращаем скролл
    $('body').css('overflow', 'auto');
}

eventEmitter.dispatch(this.events.closePopup, {
    popupName: this.name,
    popup: this.$pop
});

};
Popup.prototype.setBodyText = function (text){
    if(!text){
        return;
    }
this.$body.html(text);

};

Поясните

значение свойства pop
значение оператора this.$pop=$(pop)
а также непонятен синтаксис this.$pop.on('click', '.popup__close, .js__popup__close', this.hide.bind(this));.

score 1 · Accepted Answer · 2020-10-23T15:44:17.067

Судя только по предоставленному коду:

pop - это аргумент jQuery, то есть элемент, селектор или html-строка с тегами, поскольку вкладывается далее в функцию $(). Но судя ниже по коду это селектор. Странно тогда что он так назван.
$pop - это стандартный способ указать, что в нём содержится объект jQuery - коллекция элементов или один элемент, "обёрнутые" в jQuery. Доллар тут просто для удобства понимания. this - экземпляр, который получится после запуска конструктора Popup с оператором new. this.$pop - свойство этого экземпляра.
Метод on может иметь разное количество аргументов. Если как у вас, то второй аргумент означает селектор дочерних элементов, на которых срабатывает событие, в отличие от обычного метода, когда событие срабатывает на элементе, для которого вызывается. Метод bind служит для привязки this внутри метода к экземпляру. Без него метод hide будет работать иначе - this внутри него будет изменчивым, в зависимости от того, как он вызывается. В данном конкретном случае он например может быть равен элементу с селектором .popup__close, согласно документации jQuery о делегированных обработчиках событий для метода on. А так this в нём будет всегда указывать на экземпляр попапа.

Семантика свойства this.$pop

1 Answers1

Linked