preface

In the development process, we always encapsulate some common functions as our tools to simplify code or reuse code. For this purpose, I intend to sort out some encapsulated tool functions commonly used in my daily work. This article does not focus on a tool, but a series of small functions to split and encapsulate.

series

1. Deep and light copy of front-end toolkit

2. Date formatting of the front-end toolkit

3. Anti-shake function of front-end kit

4. Front-end kit widgets

5. Front-end toolkit log beautification

background

Often in development we will encounter a variety of gadgets like add remove events, add remove styles, get dom, etc., if every time we write code will not reflect the reuse of the code. To this end, specially organized a small tool set, specific analysis will not go to repeat, directly on the code, and in the annotation of the purpose, the basic look will know what is doing.

Tool encapsulation

/** util = {} /** * update window title * @param {String} title title */ utilfunction(title) {window.document.title = title} /** * Simulate a tag to open new address * @param {String} URL * @param {Boolean} target whether to open a new window */ util.open =function (url, target) {
  let a = document.createElement('a')
  a.setAttribute('href', url)
  if (target) {
    a.setAttribute('target'.'_blank')
  }
  a.setAttribute('id'.'b-link-temp')
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(document.getElementById('b-link-temp'} /** * random integer in some interval * @param min minimum * @param Max maximum * @return {number}
 */
util.getRandomInt = function (min, max) {
  returnMath.floor(math.random () * (max-min + 1) + min)} /** * shuffle function (used to shuffle arrays) * @param arr The array to shuffle */ util.shuffle =function (arr) {
  letNewArr = arr.slice()// Copy a new arrayfor (let i = 0; i < newArr.length; i++) {
    letJ = util.getrandomInt (0, I)// Swap a random position at the 0- current loop positionlet t = newArr[i]
    newArr[i] = newArr[j]
    newArr[j] = t
  }
  return*/ util. OneOf (value, validList) {return validList.indexOf(value) > -1
}

export/** * @param el The DOM element that needs to be scrolled by the scroll bar, which can be the window object * @param from the starting position of the scroll, Default 0 * @param to scroll target * @param duration scroll duration (default 500 ms) * @param endCallback scroll end trigger callback */export function scrollTop (el, from = 0, to, duration = 500, endCallback) {
  if(! window.requestAnimationFrame) { window.requestAnimationFrame = ( window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame ||function (callback) {
        return window.setTimeout(callback, 1000 / 60)
      }
    )
  }
  const difference = Math.abs(from - to)
  const step = Math.ceil(difference / duration * 50)

  function scroll (start, end, step) {
    if (start === end) {
      endCallback && endCallback()
      return
    }

    let d = (start + step > end) ? end : start + step
    if (start > end) {
      d = (start - step < end) ? end : start - step
    }

    if (el === window) {
      window.scrollTo(d, d)
    } else {
      el.scrollTop = d
    }
    window.requestAnimationFrame(() => scroll(d, end, step))
  }

  scroll(from, to, step)
}
Copy the code

The above small functions are the gadgets I am currently using and will be expanded in the future. I hope you like it, thank you.

Open source library

Personal home page | bin – UI | bin – admin