[工具（前端）] 方法对象工具函数

[工具（前端）] 方法对象处理函数

继续接上回。这次是一些方法对象相关处理，包括节流，防抖，深拷贝，浅拷贝等…

防抖函数 一定时间范围内函数只执行一次 在这个时间范围再触发一次 时间会重新计算

/**
 * 防抖函数 一定时间范围内函数只执行一次 在这个时间范围再触发一次 时间会重新计算
 * @param func 需要防抖的函数
 * @param delay 延迟执行时间
 * @param immediate 是否立即执行一次
 * @returns {(function(...[*]): void)|*}
 */
debounce:(func,delay,immediate=false)=>{
    let timer;
    return function (...args){
        if(immediate){
            func.apply(this,args)
            immediate=false;
            return;
        }
        clearTimeout(timer);
        timer = setTimeout(()=>{
            func.apply(this,args)
        },delay)
    }
},

使用

<div class="btn" @click="test">防抖</div>
//setup
const func1 = ()=>{
  console.log("防抖-----")
}
const debounceFunc = debounce(func1,2000); //将fun1注册为防抖函数
const test = ()=>{
  debounceFunc ();
}

节流函数 一定时间内只执行一次 无论中间触发多少次 到时间只会执行一次

/**
 * 节流函数 一定时间内只执行一次 无论中间触发多少次 到时间只会执行一次
 * @param func 节流函数
 * @param delay 延迟时间
 * @returns {(function(...[*]): void)|*}
 */
throttle:(func,delay)=>{
    let inThrottle;
    return function(...args){
        if(!inThrottle){
             inThrottle=true;
             setTimeout(()=>{
                 func.apply(this,args)
                 inThrottle=false;
            },delay)
        }
    }
},

使用

<div class="btn" @click="test">节流</div>
//setup
const func1 = ()=>{
  console.log("节流-----")
}
const throttleFunc = throttle(func1,2000); //将fun1注册为节流函数
const test = ()=>{
  throttleFunc ();
}

深拷贝 递归实现

/**
 * 深拷贝 递归实现
 * @param obj
 * @param hash
 * @returns {*}
 */
deepClone:(obj, hash = new WeakMap()) =>{
    if (obj === null || typeof obj !== 'object') return obj;
    if (hash.has(obj)) return hash.get(obj);
    let cloneObj = new obj.constructor();
    hash.set(obj, cloneObj);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = functionUtils.deepClone(obj[key], hash);
        }
    }
    return cloneObj;
},

深拷贝 lodash实现

import lodash from "lodash"
/**
 * 深拷贝 lodash实现
 * @param obj 需要进行拷贝的对象
 * @returns {unknown} 新的拷贝对象
 */
deepCloneLodash:(obj)=>{
    return lodash.cloneDeep(obj);
},

浅拷贝 只能拷贝对象的第一层

/**
 * 浅拷贝 只能拷贝对象的第一层
 * @param obj 需要进行拷贝的对象
 * @returns {*[]|*}
 */
lightClone:(obj)=>{
    return Array.isArray(obj) ? [...obj] : {...obj};
}

获取平台信息

/**
 * 获取平台信息
  * @returns {{platformBrowser: string, platformName: string}} platformBrowser 浏览器 platformName 平台名称
 */
platform:()=>{
    let result = {
        platformName:"",
        platformBrowser:"",
    }
    const userAgent = navigator.userAgent;
    console.log(userAgent)
    // 操作系统检测
    if (/Windows/.test(userAgent)) {
        result.platformName = 'Windows';
    } else if (/Mac OS X/.test(userAgent)) {
        result.platformName = 'macOS';
    } else if (/Linux/.test(userAgent)) {
        result.platformName = 'Linux';
    } else if (/Android/.test(userAgent)) {
        result.platformName = 'Android';
    } else if (/iPhone|iPad|iPod/.test(userAgent)) {
        result.platformName = 'iOS';
    }else if (/micromessenger/.test(userAgent.toLowerCase())) {
        result.platformName = 'weixin';
    } else {
        result.platformName = 'Unknown OS';
    }

    // 浏览器检测
    if (/Chrome/.test(userAgent)) {
        result.platformBrowser = 'Chrome';
    } else if (/Firefox/.test(userAgent)) {
        result.platformBrowser = 'Firefox';
    } else if (/Safari/.test(userAgent) && /Apple Computer/.test(userAgent)) {
        result.platformBrowser = 'Safari';
    } else if (/Edg/.test(userAgent)) { // Microsoft Edge (Chromium-based)
        result.platformBrowser = 'Edge';
    } else if (/MSIE|Trident/.test(userAgent)) { // Older versions of IE
        result.platformBrowser = 'Internet Explorer';
    } else {
        result.platformBrowser = 'Unknown Browser';
    }

    return result;
}