老师,代码注释中有我的理解和疑惑,请问对吗

老师,代码注释中有我的理解和疑惑,请问对吗

代码是直接复制的源码

// 初始化一个弹出框
// 生成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>'


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2020-01-10 09:46:45

同学你好,在变量名或函数名前加下划线,一般表示“私有”,是约定俗成的开发规范,没有强制限制。加下划线,还能有效防止重名。

祝学习愉快!

  • 提问者 hyperse #1
    私有的意思是外部无法调用吗?
    2020-01-10 20:27:24
  • 好帮手慕星星 回复 提问者 hyperse #2
    你好,只是表示‘私有’,实质上是否是私有的还需要根据代码实际情况决定。
    2020-01-11 10:08:31
好帮手慕慕子 2020-01-09 10:41:21

同学你好,代码中注释的理解是对的。对于代码中的疑惑,解答如下:

  1. 这里的wrap是_createElement 方法内部创建的Dom元素,因为这里的this指向的是实例化之后的Msg对象,将wrap内容赋值给了this._el,也就是在对象上添加了_el属性,这样在其他方法内部可以是通过this._el获取到该属性。

  2. el前面添加下划线,只是老师的一种书写习惯而已

  3. 这里的定时器只是为了实现一个延迟操作。因为定时器即使不添加时间,也是异步执行的。也就是说会先执行正常书写顺序的代码,然后才执行定时器的内容。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 hyperse #1
    我记得 _ 下划线是什么内部方法的通用写法呀。。因为前面也有老师这样用过。。
    2020-01-09 21:07:06
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师