老师,代码注释中有我的理解和疑惑,请问对吗
代码是直接复制的源码
// 初始化一个弹出框 // 生成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 星