jquery 轮子

dialog

class Dialog {
  constructor(options) {
    this.options = options
    this.init()
  }
  get template() {
    let {title,content} = this.options
    let template = `
      <div class="xingkong_dialog">
        <div class="xingkong_dialog_wrapper">
        <header>${title}</header>
        <main>${content}</main>
        <footer></footer>
        </div>
      </div>
    `
    return template
  }
  generateButton(){
    let {title,content,buttons} = this.options
    let footer_buttons = buttons.map((buttonOption)=>{
      var $btn = $('<button></button>')
      $btn.text(buttonOption.text)
      $btn.on('click',buttonOption.action)
      return $btn
    })
    return footer_buttons
  }
  init(){ 
    let $dialog = $(this.template)
    $dialog.find("footer").append(this.generateButton())
    this.$dialog = $dialog
  }
  open(){
   $('body').find("x")
    this.$dialog.appendTo('body')
  }
  close(){
    this.$dialog.detach()
  }
}



/////////////////////// 用户调用

//html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button id="x">点击</button>
</body>
</html>

//js
x.onclick = function(){
  var dialog = new Dialog({
    title: '标题',
    content: '<b>欢迎</b>',
    className: 'userDialog',
    buttons: [{
      text: '确定',
      action: function() {
        setTimeout(() => {
          dialog.close()
        }, 3000)
      }
    }, {
      text: '取消',
      action: function() {
        dialog.close()
      }
    }, ]
  })
  dialog.open()
}

sticky

class Sticky {
  constructor(selector, n) {
    this.$el = $(selector)
    this.offsetY = n || 0
    this.addPlaceHolder()
    this.cacheOffset()
    this.listenScroll()
  }
  cacheOffset() {
    this.offsets = []
    this.$el.each((i, e) => {
      this.offsets[i] = $(e).offset()
    })
  }
  addPlaceHolder() {
    this.$el.each((i, e) => {
      $(e).wrap('<div class="sticky--wrapper"></div>')
      $(e).parent().height($(e).height())
    })
  }
  listenScroll() {
    $(window).on('scroll', (e) => {
      let scrollY = window.scrollY;
      this.$el.each((i, e) => {
       
        if (scrollY + this.offsetY > this.offsets[i].top) {
          $(e).addClass("sticky").css({top:this.offsetY})
        } else {
          this.$el.removeClass("sticky")
        }
      })

    })
  }
}

/////// 用户
//html

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="topbar">
    topbar
  </div>
  <main>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <p>段落6</p>
    <p>段落7</p>
    <p>段落15</p>
    <button>button</button>
    <p>sadsfasdf</p>
  </main>
</body>
</html>

//js
new Sticky("button",60)
new Sticky("#topbar")