常用的工具函数-工具函数

1.判断设备

/**
 * UA parser 设备解析器
 */

export const uaParser = () => {
  const { userAgent } = window.navigator
  const MobileReg = /(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i
  const isMobile = userAgent.toLowerCase().match(MobileReg) !== null
  const isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1 // g
  const isIOS = Boolean(userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) // ios终端
  const isWechat = userAgent.toLowerCase().indexOf('micromessenger') > -1

  return {
    isMobile,
    isAndroid,
    isIOS,
    isWechat,
  }
}

2.浏览器存储方式

/**
 * Storage方法
 * 策略是 cookie的方式，如果项目上禁用cookie，则这里可以修改为其他本地存储 Local
 */

/**
 * window.sessionStorage 浏览器临时缓存
 * @method set 设置临时缓存
 * @method get 获取临时缓存
 * @method remove 移除临时缓存
 * @method clear 移除全部临时缓存
 */
export const Storage = {
  set: (key: string, value: string, time?: number): void => {
    const cur = new Date()
    const day = time ? time : 24
    cur.setTime(cur.getTime() + day * 3600000)
    document.cookie = `${key}=${encodeURIComponent(value)};expires=${time ? cur.toUTCString() : ''}}`
  },
  get: (key: string): string => {
    const data = document.cookie
    let startIndex = data.indexOf(key + '=')
    if (startIndex > -1) {
      startIndex = startIndex + key.length + 1
      let endIndex = data.indexOf(';', startIndex)
      endIndex = endIndex < 0 ? data.length : endIndex
      return decodeURIComponent(data.substring(startIndex, endIndex))
    }
    return ''
  },
  remove: (key: string): void => {
    document.cookie = `${key}=${encodeURIComponent('')};expires=${-1}}`
  },
  clear: () => {
    document.cookie = ''
  },
}

/**
 * window.localStorage 浏览器永久缓存
 * @method set 设置永久缓存
 * @method get 获取永久缓存
 * @method remove 移除永久缓存
 * @method clear 移除全部永久缓存
 */
export const Local = {
  // 设置永久缓存
  set(key: string, val: any) {
    window.localStorage.setItem(key, JSON.stringify(val))
  },
  // 获取永久缓存
  get(key: string) {
    const json: any = window.localStorage.getItem(key)
    return JSON.parse(json)
  },
  // 移除永久缓存
  remove(key: string) {
    window.localStorage.removeItem(key)
  },
  // 移除全部永久缓存
  clear() {
    window.localStorage.clear()
  },
}

3.页面添加水印

const id = '1.23452384164.123412416'

// 页面添加水印效果
const setWatermark = (str: string) => {
  try {
    const wDom = document.getElementById(id)
    if (!str && wDom) {
      document.body.removeChild(<HTMLElement>document.getElementById(id))
      return
    }
    if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id))
    const can = document.createElement('canvas')
    can.width = 200
    can.height = 130
    const cans: any = can.getContext('2d')
    cans.rotate((-20 * Math.PI) / 180)
    cans.font = '16px Vedana'
    cans.fillStyle = 'rgba(200, 200, 200, 0.30)'
    cans.textBaseline = 'Middle'
    cans.fillText(str, can.width / 10, can.height / 2)
    const div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '15px'
    div.style.left = '0px'
    div.style.position = 'fixed'
    div.style.zIndex = '10000000'
    div.style.width = '100vw'
    div.style.height = '100vh'
    div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`
    document.body.appendChild(div)
    return id
  } catch (error) {
    console.warn('Watermark Setting Error：', error)
  }
}

/**
 * 页面添加水印效果
 * @method set 设置水印
 * @method del 删除水印
 */
const watermark = {
  // 设置水印
  set: (str: string) => {
    return setWatermark(str)
  },
  // 删除水印
  del: () => {
    if (document.getElementById(id) !== null) document.body.removeChild(<HTMLElement>document.getElementById(id))
  },
}

// 导出方法
export default watermark