简单造轮子代码

Tabs组件

// CSS部分
.tabs {}
.tabs>ol{
  list-style: none;
  padding: 0;
  margin: 0;
}
.tabs>ol.tabs-bar{
  border-bottom: 1px solid red;
  display: flex;
}
.tabs>ol.tabs-bar li{
  padding: 4px 8px;
  border: 1px solid transparent;
  border-bottom: none;
}
.tabs>ol.tabs-bar li:hover {
  border: 1px solid red;
}
.tabs>ol.tabs-bar li.active {
  border: 1px solid blue;
}
.tabs>ol.tabs-content li{
  display: none;
}
.tabs>ol.tabs-content li.active {
  display: block;
}

//JavaScript部分
class Tabs{
  constructor(selector){
    this.element = $(selector)
    this.init()
    this.bindEvents()
  }
  init(){
      this.element.each(function(i,e){
        $(e).children('.tabs-bar').children('li').eq(0).addClass('active')
        $(e).children('.tabs-content').children('li').eq(0).addClass('active')
      })
  }
  bindEvents(){
    this.element.on('click','.tabs-bar>li',function(e){  
      let $li = $(e.currentTarget)
      $li.addClass('active').siblings().removeClass('active')
      let $index = $li.index()
      let $content = $li.closest('.tabs').find('.tabs-content>li').eq($index)
      $content.addClass('active').siblings().removeClass('active')
    })
  }
}
var tab = new Tabs('.tabs')

// HTML部分
 <div class = "tabs">
    <ol class = "tabs-bar">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>

    <ol class = "tabs-content">
      <li>content1</li>
      <li>content2</li>
      <li>content3</li>
    </ol>
  </div>
  <div class = "tabs">
    <ol class = "tabs-bar">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>

    <ol class = "tabs-content">
      <li>content1</li>
      <li>content2</li>
      <li>content3</li>
    </ol>
  </div>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Sticky组件

//CSS部分

*{margin: 0; padding: 0}
#topbar{
  background: green;
  height: 60px;
  text-align: center;
  color: #fff;
}
.topbarPlaceholder{
  height: 60px;
}
#topbar.sticky{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.5;
}

main{
  height: 800px;
  background: #ddd;
}
button.sticky{
  position: fixed;
  top: 60px;
  left: 0;
}

//JavaScript部分

class Sticky{
  constructor(selector,n){
    this.elements = $(selector)
    this.offset = n || 0
    this.placeholder()
    this.cacheOffset()
    this.listenOffset()
  }
  placeholder(){
    this.elements.each((index,element) => {
      let $wrapper = $('<div class = "topbarPlaceholder"></div>')
      $(element).wrap($wrapper)
      $(element).parent().height($(element).outerHeight())
    })
  }
  cacheOffset(){
    this.offsets = []
    this.elements.each((index,element) => {  
      this.offsets[index] = $(element).offset()
    })
  }
  listenOffset(){
    $(window).on('scroll',() => {
      let scrollY = window.scrollY
      this.elements.each((index,element) => {
        if(scrollY + this.offset > this.offsets[index].top){
          $(element).addClass('sticky')
        }else {
          $(element).removeClass('sticky')
        }
      })
    })
  }
}

new Sticky('#topbar')
new Sticky('button',60)


//HTML部分

 <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>段落8</p>
    <P>段落9</p>
    <P>段落10</p>
    <button>黏住的按钮</button>
    <p>段落11</p>
  </main>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Dialog组件

//CSS部分
.frankDialog{
  background: rgba(0,0,0,0.5);
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.frankDialog-wrapper{
  background: #fff;
  padding: 20px;
  min-width: 200px;
}
.frankDialog-header {
  border-bottom: 1px solid red;
}
.frankDialog-main {
  padding-top: 10px;
  padding-bottom: 10px;
}
.frankDialog-footer {
  text-align: right;
}
.frankDialog-footer button {
  margin-left: 10px;
}

.frankDialog{
  z-index: 100
}

//JavaScript部分

class Dialog {
  constructor(options) {
    this.options = options
    this.init()
  }
  get template() {
    let {
      title, content
    } = this.options
    return `
      <div class="frankDialog">
        <div class="frankDialog-wrapper">
          <header class="frankDialog-header">${title}</header>
          <main class="frankDialog-main">${content}</main>
          <footer class="frankDialog-footer"></footer>
        </div>
      </div>
    `
  }
  generateButtons(){
    let { buttons } = this.options
    let $buttons = buttons.map((buttonOption) => {
      let $b = $('<button></button>')
      $b.text(buttonOption.text)
      $b.on('click', buttonOption.action)
      return $b
    })
    return $buttons
  }
  init() {
    var $dialog = $(this.template)
    $dialog.find('footer').append(this.generateButtons())
    $dialog.addClass(this.options.className)
    this.$dialog = $dialog
  }
  open() {
    this.$dialog.appendTo('body')
  }
  close() {
    this.$dialog.detach()
  }
}

////////////////////




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()
}

Suggestion组件

//CSS部分

.frankSuggestion{
  position: relative;
  border: 1px solid red;
  display: inline-block;
}
.frankSuggestion-loading{
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}
.frankSuggestion.loading .frankSuggestion-loading{
  display: block;
}

.frankSuggestion-list{
  position: absolute;
  border: 1px solid green;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.frankSuggestion.loading .frankSuggestion-list{
  display: none;
}
.frankSuggestion.empty  .frankSuggestion-empty{
  display: block;
}
.frankSuggestion-empty{
  display: none;
}



//JavaScript部分
class Suggestion {
  constructor(options) {
    this.options = options
    this.$input = $(options.input)
    this.$input.wrap('<div class="frankSuggestion"></div>')
    this.$wrapper = this.$input.parent()

    this.$ol = $('<ol class="frankSuggestion-list"></ol>')
    this.$input.after(this.$ol)
    this.$loading = $('<div class="frankSuggestion-loading"></div>')
    this.$loading.html(this.options.loadingTemplate)
    this.$empty = $('<div class="frankSuggestion-empty"></div>')
    this.$empty.html(this.options.emptyTemplate)

    this.$ol.after(this.$loading)
    this.$ol.after(this.$empty)
    this.bindEvents()
  }
  bindEvents() {
    //  let timerId
    let lazySearch = _.debounce(this.search.bind(this), 300);
    this.$input.on('input', (e) => {
      //      if (timerId) {
      //        window.clearTimeout(timerId)
      //      }
      //      timerId = setTimeout(() => {
      //         this.search(e.currentTarget.value)
      //         timerId = undefined
      //      }, 1000)
      lazySearch(e.currentTarget.value)
    })
    
    this.$ol.on('click', 'li', (e)=>{
      this.$input.val($(e.currentTarget).text())
    })
  }
  search(keyword) {
    this.$wrapper.addClass('loading')
    this.$wrapper.removeClass('empty')
    this.options.search(keyword, (array) => {
      this.$ol.empty()
      this.$wrapper.removeClass('loading')
      
      if (!array || array.length === 0) {
        this.$wrapper.addClass('empty')
        return
      }
      
      
      array.forEach((text) => {
        this.$ol.append($('<li></li>').text(text))
      })
    })
  }

}

////////////////

var s = new Suggestion({
  input: 'input',
  search: function(text, callback) {
    if (text === '0') {
      return setTimeout(()=>callback([]), 500)
    }
    let array = []
    for (let i = 0; i < 5; i++) {
      var n = parseInt(Math.random() * 100, 10)
      array.push(text + n)
    }
    setTimeout(() => callback(array), 500)

  },
  loadingTemplate: '加载中',
  emptyTemplate: '找不到啊找不到'
})