前端片--常见数据处理工具函数，日期函数，缓存设置，Vue指令

@前端工具函数篇（最近工作比较忙整理一下）

常用树形结构数据处理

export const NewTree = function (sourceData,id,pid) {
  // 转换成插件需要格式的树结构
  // const id = id
  // const pid = pid
  // 深拷贝
  const data = sourceData.map(item => {
    return Object.assign({}, item)
  })
  const res = []
  const temp = {}
  for (let i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i]
  }
  for (let k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]].children) {
        temp[data[k][pid]].children = []
      }
      if (!temp[data[k][pid]]._level) {
        temp[data[k][pid]]._level = 1
      }
      data[k]._level = temp[data[k][pid]]._level + 1
      temp[data[k][pid]].children.push(data[k])
    } else {
      res.push(data[k])
    }
  }
  return res
}

常用日期转换函数

/**
 * 昨天日期
 */
export const yesterdayDate = function () {
  const nowdate = new Date()
  const lastDate = nowdate.setDate(nowdate.getDate() - 1)
  const dateTime = new Date(lastDate)
  const y = dateTime.getFullYear()
  const m = dateTime.getMonth() + 1
  const d = dateTime.getDate()
  return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
}

/**
 * 今天日期
 */
export const todayDate = function () {
  const data = new Date()
  const y = data.getFullYear()
  const m = data.getMonth() + 1
  const d = data.getDate()
  return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
}

/**
 * 当前时分秒
 */
export const currentTime = function () {
  const data = new Date()
  const hh = data.getHours() // 时
  const mm = data.getMinutes() // 分
  // let ss = data.getSeconds() //秒
  return (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + '00'
}

/**
 * 上一个小时的时分秒
 */
export const lastTime = function () {
  const data = new Date()
  const hh = data.getHours() - 1 // 时
  const mm = data.getMinutes() // 分
  // let ss = data.getSeconds() //秒
  return (hh < 10 ? ('0' + hh) : hh) + ':' + (mm < 10 ? ('0' + mm) : mm) + ':' + '00'
}

/**
 * 当前日期的零点
 */
export const  zeroTime = function () {
    var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime());
    var startTime =(
        date1.getHours()<10?"0"+date1.getHours():date1.getHours()) + ":"
        + (date1.getMinutes()<10?"0"+date1.getMinutes():date1.getMinutes()) + ":"
        + (date1.getSeconds()<10?"0"+date1.getSeconds():date1.getSeconds())
    return startTime
}


/**
 * 根据传入的格式返回对应时间，fmt--时间格式，date需转换格式的时间数据
 */
export const dateFormat=function(fmt, date) {
  let ret;
  const opt = {
      "Y+": date.getFullYear().toString(),        // 年
      "m+": (date.getMonth() + 1).toString(),     // 月
      "d+": date.getDate().toString(),            // 日
      "H+": date.getHours().toString(),           // 时
      "M+": date.getMinutes().toString(),         // 分
      "S+": date.getSeconds().toString()          // 秒
      // 有其他格式化字符需求可以继续添加，必须转化成字符串
  };
  for (let k in opt) {
      ret = new RegExp("(" + k + ")").exec(fmt);
      if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
      };
  };
  return fmt;
};

缓存Storage设置

var Storage = {
  // ==================sessionStorage设置缓存================
  // 设置缓存
  sessionSet: function (name, data, expires) {
    sessionStorage.removeItem(name)
    sessionStorage.setItem(name, JSON.stringify(data))
    if (expires && expires instanceof Date) {
      sessionStorage.removeItem(`${name}__expires`)
      sessionStorage.setItem(`${name}__expires`, new Date(expires).getTime())
    }
  },
  // 获取缓存
  sessionGet: function (name) {
    if (sessionStorage.getItem(`${name}__expires`)) {
      const now = Date.now()
      const expires = sessionStorage.getItem(`${name}__expires`)
      if (now >= expires) {
        sessionStorage.removeItem(name)
        sessionStorage.removeItem(`${name}__expires`)
        return undefined
      } else {
        return JSON.parse(sessionStorage.getItem(name))
      }
    } else {
      return JSON.parse(sessionStorage.getItem(name))
    }
  },
  // 清除缓存
  sessionRemove: function (name) {
    sessionStorage.removeItem(name)
  },
  // ==================localStorage设置缓存==================
  // 设置缓存
  localSet: function (name, data, expires) {
    localStorage.removeItem(name)
    localStorage.setItem(name, JSON.stringify(data))
    if (expires && expires instanceof Date) {
      localStorage.removeItem(`${name}__expires`)
      localStorage.setItem(`${name}__expires`, new Date(expires).getTime())
    }
  },
  // 获取缓存
  localGet: function (name) {
    if (localStorage.getItem(`${name}__expires`)) {
      const now = Date.now()
      const expires = localStorage.getItem(`${name}__expires`)
      if (now >= expires) {
        localStorage.removeItem(name)
        localStorage.removeItem(`${name}__expires`)
        return undefined
      } else {
        return JSON.parse(localStorage.getItem(name))
      }
    } else {
      return JSON.parse(localStorage.getItem(name))
    }
  },
  // 清除缓存
  localRemove: function (name) {
    localStorage.removeItem(name)
  }

}

export default Storage

Vue绑定指令

export const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
};