如何让你的前端代码快速提升？这些高频工具函数或许能帮到你！

正则校验座机、手机号，400号

/** 
* 正则校验座机、手机号，400号 
* @param {*} rule  
* @param {*} value  
* @param {*} callback  
*/
export function validatePhone(rule, value, callback) {  
    const isRequired = rule.required;  
    if (isRequired && value === '') {    
        return callback(new Error('请输入电话号码'));  
    }  
    if (!isRequired && !value) {    
        return callback();  
    }  
    if (!/^((0\d{2,3}-\d{6,8})|(\d{6,8})|(400\d{7})|(1\d{10}))$/.test(value)) {    
        return callback('请输入正确格式的座机、手机号');  
    }  
    callback();
}

身份证号验证

/**
 * 身份证号验证
 * @param {*} rule 
 * @param {*} value 
 * @param {*} callback 
 */
export function validateIDCard(rule, value, callback) {
  const idVal = value.trim();
  if (idVal === '') {
    return callback(new Error('请输入身份证号'));
  }
  if (!/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/i.test(idVal)) {
    return callback(new Error('身份证格式不正确!'));
  }
  callback();
}

银行账号验证

/**
 * 银行账号验证
 * @param {*} rule 
 * @param {*} value 
 * @param {*} callback 
 * @returns 
 */
export function validateBankNo(rule, value, callback) {
  const reg = /^([0-9]{9,23})$/
  if (!value) {
    return callback(new Error("请输入银行卡号"));
  }
  if (!reg.test(value)) {
    return callback(new Error('账号格式不正确,请输入数字且长度为9-23位'));
  }
  callback();
}

格式化日期

/**
 * 格式化日期
 * @param {*} oldDate 类型可以是 Date，String，Number
 * @param {*} fmt fmt 是格式化的类型：yyyy-MM-dd hh:mm 
 */
export function formatDate(oldDate, fmt = 'yyyy-MM-dd hh:mm') {
    let date = new Date()
    if (typeof oldDate === 'string' || typeof oldDate === 'number') {
        date = new Date(+oldDate)
    } else {
        date = oldDate
    }
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    }
​
    function padLeftZero(str) {
        return ('00' + str).substr(str.length)
    }
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + ''
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
        }
    }
     return fmt
}

判断是否在微信浏览器中打开

/**
 * 判断是否在微信浏览器中打开
 * @returns 
 */
export function isWeixin() {
  const ua = window.navigator.userAgent.toLowerCase();
  if (typeof window.wx !== 'undefined' || /MicroMessenger/i.test(ua)) {
    return true;
  } else {
    return false;
  }
}

获取地址栏参数

/**
 * 获取地址栏参数
 * @param {*} name
 * @param {*} defaultValue
 * @returns 
 */
export function getQueryString(name, defaultValue = null) {
  const searchParams = new URLSearchParams(window.location.search);
  const value = searchParams.get(name);
  return value === null ? defaultValue : value;
}

JSON转树型结构

/**
 * JSON转树型结构
 * @param {*} data 
 * @param {*} key 
 * @returns 
 */
export function JsonToTree(data, key = 'pid') {
    function getJsonTree(data, parentId) {
        const itemArr = [];
        for (let i = 0; i < data.length; i++) {
            if (data[i][key] === parentId) {
                const newNode = { ...data[i], children: [] };
                itemArr.push(newNode);
                newNode.children = getJsonTree(data, newNode.id);
            }
        }
        return itemArr;
    }
    return getJsonTree(data, 0).reduce((acc, cur) => acc.concat(cur), []);
}

删除对象中无效的键

/**
 * 删除对象中无效的键
 * @param {*} obj 
 * @returns 
 */
export function deleteInvalidKeys(obj) {
    const newObj = {};
    const keys = Object.keys(obj);
    for (const key of keys) {
        const value = obj[key];
        if (value !== 0 && !value && typeof value !== 'boolean') {
            continue;
        }
        newObj[key] = value;
    }
    return newObj;
}

函数防抖

/**
 * 防抖函数
 * @param {*} func 函数
 * @param {*} delay 延迟时间
 * @returns 
 */
export function debounce(func, delay) {
    let timerId;
    return function (...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

函数节流

/**
 * 函数节流
 * @param {*} func 函数
 * @param {*} delay 延迟时间
 * @returns 
 */
export function throttle(func, delay) {
    let timer = null;
    return function() {
        const context = this;
        const args = arguments;
        if (!timer) {
        timer = setTimeout(() => {
            func.apply(context, args);
            timer = null;
        }, delay);
        }
    };
}

定时自动登出

// 定时自动登出功能, 启用后一段时间无用户操作, 则自动登出
import Vue from 'vue'
import store from '@/store'
const openAutoJumpOut=true
const stagnateTime=3 * 60 * 60 * 1000
const Plugin = {
  install(Vue) {
    Vue.prototype.$_auto_jump = () => {
      if (!openAutoJumpOut) {
        return
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        store.dispatch('loginOut')
      }, stagnateTime)
    }
  },
}
Vue.use(Plugin)
export default Plugin