浏览器对象 BOM

返回当前网页地址

function currentURL() {
  return window.location.href
}

获取滚动条位置

function getScrollPosition(el = window) {
  return {
    x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop
  }
}

获取url中的参数

/**
 * 将参数中的null undefined转化为空
 * @param {String} el 
 */
export function transferDefectParams(el) {
  return ['null', 'undefined'].includes(el) ? '' : el
}

/**
 * 正则表示法
 * 思路:通过正则表达式获取url上的参数 然后通过数组reduce追加到对象中
 * 
 * @param {string} url 需要获取的url地址默认为当前地址
 */
export function getUrlParameters(url = window.location.href) {
  /**
   * match返回字符串中匹配结果的数组,匹配不到返回null
   * [^?=&]+ 匹配除了?=&之外的字符 仅匹配一次
   * Array.reduce(callBack(prev,cur,index,array), initialValue)
   * Array.slice(start,[end]) 返回start-end的元素
   */
  const params = url.match(/([^?=&]+)=([^&]*)/g)
  if (params) {
    return params.reduce((a, v) => (a[v.slice(0, v.indexOf('='))] = transferDefectParams(v.slice(v.indexOf('=') + 1)), a), {})
  }
  return {}
}

/**
 * 字符串分割法
 * 思路: 使用split截取字符串为数字 然后调用reduce方法
 * @param {string} url url地址
 */
export function getUrlParameters(url = window.location.href) {
  const search = url.split('?')[1];// window.location.search
  if (search) {
    const params = search.split('&');
    if (params) {
      return params.reduce((a, v) => (a[v.slice(0, v.indexOf('='))] = transferDefectParams(v.slice(v.indexOf('=') + 1)), a), {})
    }
    return {}
  }
  return {}
}

页面跳转，是否记录在history中

function redirect(url, asLink = true) {
  asLink ? window.location.href = url : window.location.replace(url)
}

滚动条回到顶部动画

function scrollToTop() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  } else {
    window.cancelAnimationFrame(scrollToTop)
  }
}

复制文本

function copy(str) {
  const el = document.createElement('textarea')
  el.value = str
  el.setAttribute('readonly', '')
  el.style.position = 'absolute'
  el.style.left = '-9999px'
  el.style.top = '-9999px'
  document.body.appendChild(el)
  const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false
  el.select()
  document.execCommand('copy')
  document.body.removeChild(el)
  if (selected) {
    document.getSelection().removeAllRanges()
    document.getSelection().addRange(selected)
  }
}

检测设备类型

/**
 * 返回是移动设备还是桌面设备
 */
export function getDeviceType() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|winMobile|nokiaN|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'
}

/**
 * 返回具体的浏览器终端类型
 */
export function getOsType() {
  const u = navigator.userAgent;
  // 移动终端浏览器版本信息
  return {
    trident: u.indexOf('Trident') > -1, // IE内核
    presto: u.indexOf('Presto') > -1, // opera内核
    webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 || u.indexOf('UCBrowser') > -1, // android终端或者uc浏览器
    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, // 是否iPad
    webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
    weixin: u.indexOf('MicroMessenger') > -1, // 是否微信
    chrome: u.indexOf('Chrome') > -1,
    ali: u.indexOf('Alipay') > -1,
    qq: u.match(/\sQQ/i), // 是否QQ
    safari: u.indexOf('Safari') > -1
  }
}