wcui/src/utils.js

/**
 * 公共方法库
 * @author yutent<yutent.io@gmail.com>
 * @date 2019/08/08 10:47:55
 */

function noop() {}

export default function $(selector, container) {
  if (container) {
    return container.querySelector(selector)
  }
  return document.body.querySelector(selector)
}

Object.assign($, {
  /**
   * 异步回调
   */
  nextTick: (function () {
    let queue = []
    let node = document.createTextNode('<!-- -->')
    let bool = false

    function callback() {
      let n = queue.length
      for (let i = 0; i < n; i++) {
        queue[i]()
      }
      queue = queue.slice(n)
    }

    new MutationObserver(callback).observe(node, { characterData: true })

    return function (fn) {
      queue.push(fn)
      bool = !bool
      node.data = bool
    }
  })(),

  //取得距离页面左上角的坐标
  offset(node) {
    try {
      let rect = node.getBoundingClientRect()

      if (rect.width || rect.height || node.getClientRects().length) {
        let doc = node.ownerDocument
        let root = doc.documentElement
        let win = doc.defaultView
        return {
          top: rect.top + win.pageYOffset - root.clientTop,
          left: rect.left + win.pageXOffset - root.clientLeft
        }
      }
    } catch (e) {
      return {
        left: 0,
        top: 0
      }
    }
  },

  /**
   * 对象/数组遍历
   * 支持跳出
   */
  each(obj, fn) {
    if (obj) {
      if (Array.isArray(obj)) {
        for (let i = 0, it; (it = obj[i++]); ) {
          if (fn(it, i - 1) === false) {
            break
          }
        }
      } else {
        for (let i in obj) {
          if (obj.hasOwnProperty(i) && fn(obj[i], i) === false) {
            break
          }
        }
      }
    }
  },

  /**
   * 事件绑定
   */
  bind(dom, type, selector, fn, phase = true) {
    let events = type.split(',')
    let callback

    if (typeof selector === 'function') {
      phase = fn
      fn = selector
      selector = null
    } else {
      if (typeof selector !== 'string') {
        selector = null
      }
      fn = fn || noop
    }

    if (selector) {
      callback = function (ev) {
        let agents = $(ev.currentTarget).find(selector)
        let elem = ev.target
        if (agents) {
          while (true) {
            if (elem === ev.currentTarget) {
              break
            }
            if (agents.has(elem)) {
              fn(ev)
              break
            } else {
              elem = elem.parentNode
            }
          }
        }
      }
    } else {
      callback = fn
    }

    $.each(events, function (t) {
      dom.addEventListener(t.trim(), callback, phase)
    })
    return callback
  },

  /**
   * 事件绑定(默认不冒泡)
   */
  catch(dom, type, fn, phase) {
    function fn2(ev) {
      ev.stopPropagation()
      fn && fn(ev)
    }
    return $.bind(dom, type, fn2, phase)
  },

  /**
   * 解除事件绑定
   */
  unbind(dom, type, fn = noop, phase = false) {
    let events = type.split(',')
    $.each(events, function (t) {
      dom.removeEventListener(t.trim(), fn, phase)
    })
  },

  // 指定节点外点击(最高不能超过body层)
  outside(dom, fn = noop) {
    return $.bind(document, 'mousedown', ev => {
      let path = ev.composedPath ? ev.composedPath() : ev.path
      if (path) {
        while (path.length > 3) {
          if (path.shift() === dom) {
            return
          }
        }
      } else {
        let target = ev.explicitOriginalTarget || ev.target
        if (
          dom === target ||
          dom.contains(target) ||
          (dom.root && dom.root.contains(target))
        ) {
          return
        }
      }

      fn(ev)
    })
  },

  clearOutside(fn = noop) {
    $.unbind(document, 'mousedown', fn)
  },

  fire(el, name = 'click', data = {}) {
    let ev = document.createEvent('Events')
    ev.initEvent(name, true, true)
    Object.assign(ev, data)
    el.dispatchEvent(ev)
  }
})