一些常用的 JavaScript 方法

axios 相关方法

POST 两种请求数据格式互转

type paramsJSON = { [key: string]: any }

/**
 * application/x-www-form-urlencoded 转为 application/json
 * @param {string} urlencoded 需要转换的 x-www-form-urlencoded 字符串
 */
function dataToJSON(urlencoded: string): paramsJSON {
  const temp_list: string[] = urlencoded.split('&')
  const temp_obj: paramsJSON = {}
  for (const item of temp_list) {
    const list: string[] = item.split('=')
    temp_obj[decodeURIComponent(list[0])] = decodeURIComponent(list[1])
  }
  return temp_obj
}

/**
 * application/json 转为 application/x-www-form-urlencoded 字符串
 * @param data 需要转换的 application/json 的请求数据对象
 */
function dataToURL(data: paramsJSON): string {
  let str: string = ``
  for (const key in data) {
    str += `${key}=${encodeURI(data[key])}&`
  }
  return str.substring(0, str.length - 1)
}

工具类函数

延时执行函数

/**
 * 延时执行函数
 * @param {number} delay 延迟的毫秒数（单位 ms）
 */
function sleep(delay: number): void {
  const end: number = Date.now() + delay
  while (Date.now() < end) {}
}

使指定元素可拖拽

被推拽元素，与其父元素，须保持子绝父相，或子绝父绝

/**
 * 使指定元素可拖拽
 * @param {HTMLElement} target_element 被拖拽的元素
 */
function dragElement(target_element: HTMLElement): void {
  target_element.onmousedown = (event: MouseEvent): void => {
    const parentEl: HTMLElement = target_element.parentElement
    // 防止选中拖拽导致触发浏览器的搜索事件
    event.preventDefault()
    // 获取鼠标与拖拽盒子的偏移量
    const boxX: number = event.clientX - target_element.offsetLeft
    const boxY: number = event.clientY - target_element.offsetTop
    // 计算极限偏移量
    const maxX: number = parentEl.offsetWidth - target_element.offsetWidth
    const maxY: number = parentEl.offsetHeight - target_element.offsetHeight
    // 获取拖拽元素的初始定位层级
    const target_element_style: CSSStyleDeclaration = window.getComputedStyle(target_element, null)
    const origin_zIndex: string = target_element_style.zIndex
    const origin_cursor = target_element_style.cursor
    target_element.style.zIndex = '9999'
    target_element.style.cursor = 'move'

    document.onmousemove = (event: MouseEvent): void => {
      // 获取鼠标当前的位置
      const mouseX: number = event.clientX
      const mouseY: number = event.clientY
      // 计算被拖拽盒子的偏移量
      let moveX: number = mouseX - boxX
      let moveY: number = mouseY - boxY
      // 限制盒子的推拽范围
      moveX < 0 && (moveX = 0)
      moveY < 0 && (moveY = 0)
      moveX > maxX && (moveX = maxX)
      moveY > maxY && (moveY = maxY)
      // 赋予待拖拽的盒子新位置
      target_element.style.left = moveX + 'px'
      target_element.style.top = moveY + 'px'
    }

    document.onmouseup = (): void => {
      target_element.style.zIndex = origin_zIndex
      target_element.style.cursor = origin_cursor
      document.onmousemove = null
      document.onmouseup = null
    }
  }
}

查看输入值的数据类型

/**
 * 查看输入值的数据类型
 * @param {unknown} variable 需要求类型的变量
 */
function getType(variable: unknown): string {
  return Object.prototype.toString.call(variable).split(' ')[1].replace(/\]/, '').toLowerCase()
}

生成指定区间的随机数

/**
 * 生成 [min, max] 之间的随机数，可指定小数位数
 * @param {number} min 起始数字
 * @param {number} max 结尾数字
 * @param {number} fixed 生成的随机数的小数位数，默认 0 位
 */
function getRandom(min: number, max: number, fixed: number = 0): number {
  return Number((Math.random() * (max - min) + min).toFixed(fixed))
}

实现 B/S 端对图片的下载

/**
 * 实现 B/S 端对图片的下载
 * @param {string} img_name 保存的图片的名字
 * @param {string} img_url 图片的路径
 * @param {string} type 图片的类型 png | jpeg | webp
 */
function downloadImage(img_name: string, img_url: string, type: string = `png`): void {
  const img: HTMLImageElement = new Image()
  // 解决图片跨域问题
  img.setAttribute('crossOrigin', 'anonymous')
  img.onload = () => {
    // 利用 canvas 将图片转为 base64
    const cvs: HTMLCanvasElement = document.createElement('canvas')
    const ctx: CanvasRenderingContext2D = cvs.getContext('2d')
    cvs.width = img.width
    cvs.height = img.height
    ctx.drawImage(img, 0, 0, img.width, img.height)
    const img_base64: string = cvs.toDataURL(`image/${type}`, 1)
    // 利用 a 标签下载图片
    const a: HTMLAnchorElement = document.createElement('a')
    a.download = img_name
    a.href = img_base64
    a.click()
  }
  img.src = img_url
}

未完待续。。。