【前端】常用函数

1.日期时间格式化

export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null;
  }
  time = time.replace("T", " ");
  const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
  let date;
  if (typeof time === "object") {
    date = time;
  } else {
    if ((typeof time === "string") && (/^[0-9]+$/.test(time))) {
      time = parseInt(time);
    } else if (typeof time === "string") {
      time = time.replace(new RegExp(/-/gm), "/");
    }
    if ((typeof time === "number") && (time.toString().length === 10)) {
      time = time * 1000;
    }
    date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  };
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === "a") { return ["日", "一", "二", "三", "四", "五", "六"][value]; }
    if (result.length > 0 && value < 10) {
      value = "0" + value;
    }
    return value || 0;
  });
  return time_str;
}
export function formatDate(cellValue) {
  if (cellValue == null || cellValue == "") return "";
  var date = new Date(cellValue);
  var year = date.getFullYear();
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (("" + time).length === 10) {
    time = parseInt(time) * 1000;
  } else {
    time = +time;
  }
  const d = new Date(time);
  const now = Date.now();

  const diff = (now - d) / 1000;

  if (diff < 30) {
    return "刚刚";
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + "分钟前";
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + "小时前";
  } else if (diff < 3600 * 24 * 2) {
    return "1天前";
  }
  if (option) {
    return parseTime(time, option);
  } else {
    return (
      d.getMonth() +
      1 +
      "月" +
      d.getDate() +
      "日" +
      d.getHours() +
      "时" +
      d.getMinutes() +
      "分"
    );
  }
}
export function getTime(type) {
  if (type === "start") {
    return new Date().getTime() - 3600 * 1000 * 24 * 90;
  } else {
    return new Date(new Date().toDateString());
  }
}

export function getCurrentDate() {
  var date = new Date();
  return date.toLocaleDateString();
}

2.表单重置

export function resetForm(refName) {
  if (this.$refs[refName]) {
    this.$refs[refName].resetFields();
  }
}

3.添加日期范围

export function addDateRange(params, dateRange, propName) {
  const search = JSON.parse(JSON.stringify(params));
  if (dateRange != null && dateRange !== "" && dateRange.length !== 0) {
    search.as = JSON.stringify({ create_datetime__range: dateRange });
  }
  return search;
}

4.数据字典

// 回显数据字典
export function selectDictLabel(datas, value) {
  var actions = [];
  Object.keys(datas).some((key) => {
    if (String(datas[key].dictValue) === ("" + String(value))) {
      actions.push(datas[key].dictLabel);
      return true;
    }
  });
  return actions.join("");
}
// 获取字典默认值
export function selectDictDefault(datas) {
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].is_default === true) {
      actions.push(datas[key].dictValue);
      return true;
    }
  });
  if (!actions[0] && datas[0]) {
    actions.push(datas[0].dictValue);
  }
  return actions.join("");
}

// 回显数据字典（字符串数组）
export function selectDictLabels(datas, value, separator) {
  var actions = [];
  var currentSeparator = undefined === separator ? "," : separator;
  var temp = value.split(currentSeparator);
  Object.keys(value.split(currentSeparator)).some((val) => {
    Object.keys(datas).some((key) => {
      if (datas[key].dictValue == ("" + temp[val])) {
        actions.push(datas[key].dictLabel + currentSeparator);
      }
    });
  });
  return actions.join("").substring(0, actions.join("").length - 1);
}

5.文件保存 下载

/**
 * 保存
 * @param  {Blob} blob
 * @param  {String} filename 想要保存的文件名称
 */

function saveAs(blob, filename) {
  if (window.navigator.msSaveOrOpenBlob) {
    navigator.msSaveBlob(blob, filename);
  } else {
    var link = document.createElement("a");
    var body = document.querySelector("body");

    link.href = window.URL.createObjectURL(blob);
    link.download = filename;

    // fix Firefox
    link.style.display = "none";
    body.appendChild(link);

    link.click();
    body.removeChild(link);

    window.URL.revokeObjectURL(link.href);
  }
}

/**
 * 获取 blob
 * @param  {String} url 目标文件地址
 * @return {cb}
 */
function getBlob(url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.responseType = "blob";
  xhr.onload = function() {
    if (xhr.status === 200) {
      cb(xhr.response);
    }
  };
  xhr.send();
}
// 通用下载方法
export function download(file_url, fileName) {
  getBlob(process.env.VUE_APP_BASE_API + file_url, function(blob) {
    saveAs(blob, fileName);
  });
}

6.字符串格式化

export function sprintf(str) {
  var args = arguments; var flag = true; var i = 1;
  str = str.replace(/%s/g, function() {
    var arg = args[i++];
    if (typeof arg === "undefined") {
      flag = false;
      return "";
    }
    return arg;
  });
  return flag ? str : "";
}

// 转换字符串，undefined,null等转化为""
export function praseStrEmpty(str) {
  if (!str || str == "undefined" || str == "null") {
    return "";
  }
  return str;
}

7.构造树型结构数据

//将树形结构数据转换为平铺数据
export function treeToArr (arr) {
  let result = []
  let node = []
   node = node.concat(arr)
  while (node.length) {
   let first = node.shift()
    if (first.children) {
      node = node.concat(first.children)
     delete first.children
    }
    result.push(first)
      }
  return result
  }

/**
 * 
 * @param {*} data 数据源
 * @param {*} id id字段 默认 'id'
 * @param {*} parentId 父节点字段 默认 'parentId'
 * @param {*} children 孩子节点字段 默认 'children'
 * @param {*} rootId 根Id 默认 0
 */
export function handleTree(data, id, parentId, children, rootId) {
  id = id || "id";
  parentId = parentId || "parentId";
  children = children || "children";
  // 排序
  function NumCompare(a, b) {
    // 数字比较函数
    return a.orderNum - b.orderNum;
  }
  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId]; })) || 0;
  // 对源数据深度克隆
  const cloneData = JSON.parse(JSON.stringify(data));
  // 循环所有项
  const treeData = cloneData.filter(father => {
    const branchArr = cloneData.filter(child => {
      // 返回每一项的子级数组
      return father[id] === child[parentId];
    });
    branchArr.sort(NumCompare);
    branchArr.length > 0 ? father.children = branchArr : "";
    // 返回第一层
    return father[parentId] === rootId || !father[parentId];
  });
  treeData.sort(NumCompare);
  return treeData !== "" ? treeData : data;
}

8.防抖

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function(...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

9.深拷贝

export function deepClone(source) {
  if (!source && typeof source !== "object") {
    throw new Error("error arguments", "deepClone");
  }
  const targetObj = source.constructor === Array ? [] : {};
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === "object") {
      targetObj[keys] = deepClone(source[keys]);
    } else {
      targetObj[keys] = source[keys];
    }
  });
  return targetObj;
}

10.动态增加class

export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}

/**
 * Add class to element
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += " " + cls;
}

/**
 * Remove class from element
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
    ele.className = ele.className.replace(reg, " ");
  }
}

11.函数

/ 首字母大小
export function titleCase(str) {
  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase());
}

// 下划转驼峰
export function camelCase(str) {
  return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase());
}

export function isNumberStr(str) {
  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
}

// 是否函数
export const isFunction = (o) => {
  return Object.prototype.toString.call(o).slice(8, -1) === "Function";
};

// 是否数组
export const isArray = (o) => {
  return Object.prototype.toString.call(o).slice(8, -1) === "Array";
};

// 是否对象
export const isObj = (o) => {
  return Object.prototype.toString.call(o).slice(8, -1) === "Object";
};

12.比对两个对象中的不同项并返回

         /**
         * @description: 比对两个对象中的不同项
         * @author: wxy
         * @param {*} obj1
         * @param {*} obj2
         * @return {*}
         */
        diffObject(obj1, obj2) {
          if (!obj1 || this.isEmptyObject(obj1) || !obj2 || this.isEmptyObject(obj2)) {
            return null;
          }
          const diffRes = {
            old_val: {},
            new_val: {}
          };
          for (const k in obj2) {
            // 判断数据类型是否一致
            if (this.getTypeByObj(obj2[k]) === this.getTypeByObj(obj1[k])) {
              // 比较 “Array”和“Object”类型
              if (this.getTypeByObj(obj2[k]) === "Array" || this.getTypeByObj(obj2[k]) === "Object") {
                const diffData = this.diffObject(obj1[k], obj2[k]);
                if (!this.isEmptyObject(diffData)) {
                  diffRes.old_val[k] = diffData.old_val;
                  diffRes.new_val[k] = diffData.new_val;
                }
              } else if (obj1[k] !== obj2[k]) { // 比较其他类型数据
                diffRes.old_val[k] = obj1[k];
                diffRes.new_val[k] = obj2[k];
              }
            } else {
              diffRes.old_val[k] = obj1[k];
              diffRes.new_val[k] = obj2[k];
            }
          }
          // 若没有变化，返回null
          if (this.isEmptyObject(diffRes.old_val) || this.isEmptyObject(diffRes.new_val)) {
            return null;
          }
          return diffRes;
        },
        /**
         * @description: 获取数据类型
         * @author: wxy
         * @param {*} obj
         * @return {*}
         */
        getTypeByObj(obj) {
          return Object.prototype.toString.call(obj).match(/^\[object ([a-zA-Z]*)\]$/)[1];
        },
        /**
         * @description: 判断是否是空对象
         * @author: wxy
         * @param {*} obj
         * @return {*}
         */
        isEmptyObject(obj) {
          for (var key in obj) {
            return false;
          }
          return true;
        }