JS小技巧分享

96 阅读1分钟

一、 使用URLSearchParams获取URL的搜索参数

:这应该是一个非常常见的操作,之前经常会使用 正则 来完成,现在有了更简单的方式。

const getQueryParams = (name) => {
  const query = new URLSearchParams(location.search)
  return decodeURIComponent(query.get(name))
}

const url = 'https://aftercare.z2ehospital.com/#/missions/content?accountId=1&code=277477a42a7045299b995db723e735a8';

const name = getQueryParams('accountId') // 1
const age = getQueryParams('code') // 277477a42a7045299b995db723e735a8
const gender = getQueryParams('age') // null

二、平滑滚动至页面顶部

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

三、获取当前页面滚动距离

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

getScrollPosition() // { x: 0, y: 215 }

四、判断当前设备是Andoird还是iOS

function getOSType() {
  let u = navigator.userAgent,
    app = navigator.appVersion
  let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1
  let isIOS = !!u.match(/\(i[^]+( U)? CPU.+Mac OS X/)
  
  if (isIOS) {
    return 0
  } else if (isAndroid) {
    return 1
  } else {
    return 2
  }
}

getOSType() // 0