站点Read-city在文件Read-City-Online store of Books_Files\Popup.js.untitled
中使用函数function Popup(pop,name,html,handlers)
,该函数创建了一个登录/注册窗口(参见
null
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 && 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);
};
null
解释
pop
属性this.$pop=$(pop)
this.$pop.on('click','.popup__close,.js__popup__close',this.hide.bind(this));
的语法也不清楚。
1)pop属性的含义
它就是有人给财产起的任何名字。听起来像是弹出弹出的简称。但是变量名可以是任何。。。。
2)操作员的操作this.$pop=$(pop)
它接受jQuery对象返回并将其放入属性中。在变量名中使用$来表示它是一个jQuery对象而不是DOM引用并不少见。
3)并且this.$pop.on('click','.popup__close,.js__popup__close',this.hide.bind(this))的语法也不清楚。
这是jQuery用于附加事件侦听器的基本语法https://api.jQuery.com/on
很快,这里就是我对这个问题的看法,只是看看您提供的代码。
>
我认为pop
是html字符串选择器/html元素/jQuery元素。
该操作应该是创建jQuery元素的实例。这个元素将有助于与jQuery“框架”下的pop
HTML元素进行交互。快速jQuery教程:https://www.w3schools.com/jQuery/
它是jQuery框架的一部分。它使用on
方法绑定事件,而不是AddEventListener
。https://api.jquery.com/on/
查看其余代码,我非常确定它使用的是jQuery。