面向对象 封装组件优化

代码
主要是JS
CSS中有个技巧，灰色的背景用box-shadow

//页面居中
position:fixed;
top:50%;
left:50%
transform:translate(-50%,-50%)

function Dialog(options) {         // 这是一个构造函数
  
  this.options = options
  this._prepareHtml()         //加下划线的是不想给使用者用的方法
  this._bindEvents()
  this._mount()
  
}

Dialog.prototype._bindEvents = function() {
  var div = this.div
  var buttonCallbacks = this.options.buttonCallbacks
  
  var dialog = this
  div.addEventListener('click', function xxx(e) {
    if (e.target.tagName === 'BUTTON') {
      var index = parseInt(e.target.getAttribute('data-index'), 10)
      if (buttonCallbacks[index].call() !== false) {
        dialog.close(div)
      }
    }
  })
  
}


Dialog.prototype._prepareHtml = function() {
  var {title,content,buttons} = this.options
  var div = this.div = document.createElement('div')
  div.className = 'dialog'
  var buttonString = buttons.map(function(text, index) {
    return `<button data-index="${index}">${text}</button>`
  }).join('\n')
               
  var html = `                 //ES6  模板字符串（可以加空格）
      <header>
        ${title}               //${    
      </header>
      <main>
        ${content}
      </main>
      <footer>
        ${buttonString}
      </footer>
`
  div.innerHTML = html
  
}

Dialog.prototype.close = function () {
  this.div.parentNode.removeChild(this.div)
}

Dialog.prototype._mount = function(){
  document.body.appendChild(this.div)
}


/*使用者*/
/*1面向对象方案*/

// API
// close - 调用 close 可以关闭 dialog

xxx.onclick = function() {
  var dialog = new Dialog({                                         //这里是构造函数的典型用法，使用new操作符来创建新对象。
    title: '标题',
    content: '你确定要删除吗？',
    buttons: ['确定', '取消'],
    buttonCallbacks: [function() {
      console.log('他确定一定以及肯定')
      return false
    }, function() {
      console.log('他反悔了')
    }]
  })
  console.log(dialog)
  
  setTimeout(function(){
    dialog.close()
  },3000)
}

http://js.jirengu.com/cosi/1/edit?html,css,js,output