前端开发日常小工具

节流工具函数

// 节流延时函数  如果一个函数被反复调用的话会截流，最终只会调用一次
export function debounce(func, delay = 500) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

深拷贝一

function _deepClone(source) {
  let target
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (let key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = _deepClone(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}
// lodash.cloneDeep()实现深拷贝
// JSON.stringify 和 JSON.parse （对象中包含 function 或 RegExp 这些就不能用这种方法了）
// Object.assign()拷贝
// 当对象中只有一级属性，没有二级属性的时候，此方法为深拷贝，
// 但是对象中有对象的时候，此方法，在二级属性以后就是浅拷贝。

深拷贝二

// 检查类型
let checkType = data => {
  return Object.prototype.toString.call(data).slice(8, -1)
}
let deepClone = target => {
  let targetType = checkType(target)
  let result
  if (targetType === 'Object') {
    result = {}
  } else if (targetType === 'Array') {
    result = []
  } else {
    return target
  }
  for (let i in target) {
    let value = target[i]
    let valueType = checkType(value)
    if (valueType === 'Object' || valueType === 'Array') {
      result[i] = deepClone(value) // 递归
    } else {
      result[i] = value
    }
  }
  return result
}

Vue 中监听数据新方法

// 监听 keyword 的改变
created () {  // 效果同watch(会有特殊用途)  节流函数 
    this.$watch('keyword', debounce((newQuery) => {
      console.log(newQuery)
    }, 1500))
},

生成随机数

// 生成随机数
export const getUUID = (len) => {
  len = len || 6
  len = parseInt(len, 10)
  len = isNaN(len) ? 6 : len
  const seed = '0123456789abcdefghijklmnopqrstubwxyzABCEDFGHIJKLMNOPQRSTUVWXYZ'
  const seedLen = seed.length - 1
  let uuid = ''
  while (len--) {
    uuid += seed[Math.round(Math.random() * seedLen)]
  }
  return uuid
}

生成唯一ID

项目： cloud-doc-client

// 先下载依赖
// npm install uuid --save-dev
import uuidv4 from 'uuid/v4'
const newID = uuidv4()

文件流File操作

项目： cloud-doc-client

const fs = window.require('fs').promises
const fileHelper = {
  readFile: (path) => {
    return fs.readFile(path, { encoding: 'utf8' })
  },
  writeFile: (path, content) => {
    return fs.writeFile(path, content, { encoding: 'utf8' })
  },
  renameFile: (path, newPath) => {
    return fs.rename(path, newPath)
  },
  deleteFile: (path) => {
    return fs.unlink(path)
  }
}
export default fileHelper

获取当前dom对象的父节点

项目： cloud-doc-client

// node -- 点击的节点  parentClassName -- 要向上冒泡得到的父节点的类名
export const getParentNode = (node, parentClassName) => {
  let current = node
  while (current !== null) {
    if (current.classList.contains(parentClassName)) {
      return current
    }
    current = current.parentNode
  }
  return false
}

时间戳转为本地时间

项目： cloud-doc-client

// 接受一个时间戳  返回格式： 2019/12/3 上午10:35:33
export const timestampToString = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

数组结构转为Flatten 结构 和还原

项目： cloud-doc-client 参考阅读： Normalizing State Shape

// 数组列表 按照 id 转为对象结构
export const flattenArr = (arr) => {
  return arr.reduce((map, item) => {
    map[item.id] = item
    return map
  }, {})
}
// 将上述结构的数据还原
export const objToArr = (obj) => {
  return Object.keys(obj).map(key => obj[key])
}

操作浏览器的 localStorage 和 sessionStorage

GitHub 仓库

// 下载依赖 
// npm install good-storage --save
import storage from 'good-storage'
// storage 本地数据
export const localStore = {
  set: (key, value) => {
    return storage.set(key, value)
  },
  get: (key) => {
    return storage.get(key, {})
  },
  remove: (key) => {
    return storage.remove(key)
  },
  has: (key) => {
    return storage.has(key)  // true or false
  },
  getAll: () => {
    return storage.getAll()
  },
  forEach: (callback) => {
    return storage.forEach(callback)
  }
}

深拷贝三

ts-axios-refactoring

// 深拷贝
export function deepMerge(...objs: any[]): any {
  const result = Object.create(null)
  objs.forEach(obj => {
    if (obj) {
      Object.keys(obj).forEach(key => {
        const val = obj[key]
        if (isPlainObject(val)) {
          if (isPlainObject(result[key])) {
            result[key] = deepMerge(result[key], val)
          } else {
            result[key] = deepMerge({}, val)
          }
        } else {
          result[key] = val
        }
      })
    }
  })
  return result
}

判断是否是绝对路径

// 判断是否是绝对路径
export function isAbsoluteURL(url: string): boolean {
  return /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url)
}

判断两个地址是不是同源

本地路径和要访问的路径url

// 同域名的判断主要利用了一个技巧，
// 创建一个 a 标签的 DOM，然后设置 href 属性为我们传入的 url，然后可以获取该 DOM 的 protocol、host。
// 当前页面的 url 和请求的 url 都通过这种方式获取，然后对比它们的 protocol 和 host 是否相同即可
export function isURLSameOrigin(requestURL: string): boolean {
  const parsedOrigin = resolveURL(requestURL)
  return (
    parsedOrigin.protocol === currentOrigin.protocol && parsedOrigin.host === currentOrigin.host
  )
}
const urlParsingNode = document.createElement('a')
const currentOrigin = resolveURL(window.location.href)
function resolveURL(url: string): URLOrigin {
  urlParsingNode.setAttribute('href', url)
  const { protocol, host } = urlParsingNode
  return {
    protocol,
    host
  }
}