老师,代码注释中有我的理解和疑惑,请问对吗
代码是直接复制的源码
// 初始化一个弹出框
// 生成dom元素
// 插到页面中
// 显示
(function(window, document) {
let Msg = function(options) {
//初始化弹框的方法,options是一个对象,它是一个配置信息
this._init(options);
}
Msg.prototype._init = function({ content = '', cancel = null, confirm = null, useHTML = false, contentStyle = {}, contentFontSize = '1.5em' }) {
this.content = content;
this.cancel = cancel;
this.confirm = confirm;
this.useHTML = useHTML;
this.contentStyle = contentStyle;
this.contentFontSize = contentFontSize;
//调用生成dom元素的方法
this._createElement();
this._bind([this._el, this._overlay]);
//显示dom元素
this._show([this._el, this._overlay]);
}
//生成dom元素的方法
Msg.prototype._createElement = function() {
let wrap = document.createElement('div');
wrap.className = 'msg__wrap';
wrap.innerHTML = '\
<div class="msg-header">\
<span>确认删除</span>\
<span class="msg-header-close-button">×</span>\
</div>\
<div class="msg-body">\
<div class="msg-body-icon">\
<div class="msg-body-icon-info"></div>\
</div>\
<div class="msg-body-content"></div>\
</div>\
<div class="msg-footer">\
<button class="msg-footer-btn msg-footer-cancel-button">算了吧</button>\
<button class="msg-footer-btn msg-footer-confirm-button">好的</button>\
</div>';
let contentDOM = wrap.querySelector('.msg-body .msg-body-content');
const contentStyle = {
fontSize: this.contentFontSize,
...this.contentStyle
}
for (let i in contentStyle) {
if (contentStyle.hasOwnProperty(i)) {
contentDOM.style[i] = contentStyle[i];
}
}
if (this.useHTML) {
contentDOM.innerHTML = this.content;
} else {
contentDOM.innerText = this.content;
}
let overlay = document.createElement('div');
overlay.className = 'msg__overlay';
//这里是把wrap做了什么操作?el前面的下划线是什么约定俗称的写法吗?
this._el = wrap;
this._overlay = overlay;
}
Msg.prototype._bind = function([el, overlay]) {
const _this = this;
const hideMsg = function() {
el.style.transform = 'translate(-50%, -50%) scale(0, 0)';
overlay.style.opacity = '0';
setTimeout(function() {
document.body.removeChild(el);
document.body.removeChild(overlay);
}, 300);
}
const cancel = function(e) {
_this.cancel && _this.cancel.call(_this, e);
hideMsg();
}
const confirm = function(e) {
_this.confirm && _this.confirm.call(_this, e);
hideMsg();
}
overlay.addEventListener('click', cancel);
el.querySelector('.msg-header .msg-header-close-button').addEventListener('click', cancel);
el.querySelector('.msg-footer .msg-footer-cancel-button').addEventListener('click', cancel);
el.querySelector('.msg-footer .msg-footer-confirm-button').addEventListener('click', confirm);
}
//显示方法
Msg.prototype._show = function([el, overlay]) {
//把el插入页面当中
document.body.appendChild(el);
document.body.appendChild(overlay);
//这个定时器也没有设置时间呀?
setTimeout(function() {
//将弹框的scale设置为(1,1)
el.style.transform = 'translate(-50%, -50%) scale(1, 1)';
overlay.style.opacity = '1';
});
}
//把Msg函数挂到window上,这样就可以全局访问到了
window.$Msg = Msg;
})(window, document);
// '<div class="msg__wrap">\
// <div class="msg-header">\
// <span>确认删除</span>\
// <span class="msg-header-close-button">×</span>\
// </div>\
// <div class="msg-body">\
// <div class="msg-body-icon">\
// <div class="msg-body-icon-wrong"></div>\
// </div>\
// <div class="msg-body-content">是否删除</div>\
// </div>\
// <div class="msg-footer">\
// <button class="msg-footer-btn msg-footer-cancel-button">算了吧</button>\
// <button class="msg-footer-btn msg-footer-confirm-button">好的</button>\
// </div>\
// </div>'29
收起
正在回答 回答被采纳积分+1
2回答
好帮手慕慕子
2020-01-09 10:41:21
同学你好,代码中注释的理解是对的。对于代码中的疑惑,解答如下:
这里的wrap是_createElement 方法内部创建的Dom元素,因为这里的this指向的是实例化之后的Msg对象,将wrap内容赋值给了this._el,也就是在对象上添加了_el属性,这样在其他方法内部可以是通过this._el获取到该属性。
el前面添加下划线,只是老师的一种书写习惯而已
这里的定时器只是为了实现一个延迟操作。因为定时器即使不添加时间,也是异步执行的。也就是说会先执行正常书写顺序的代码,然后才执行定时器的内容。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题
登录后可查看更多问答,登录/注册
4.Vue与React高级框架开发
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星