提升工作效率的js工具函数,持续更新~

页面垂直平滑滚动到指定滚动高度

/**
 * @param {object} ele 滚动区域的 dom 节点
 * @param {number} position 滚动到指定位置的滚动距离。
 * @description 页面垂直平滑滚动到指定滚动高度
 */
export const scrollSmoothTo = (ele , position) =>{
    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback,element) {
            return setTimeout(callback, 17);
        };
    }
    // 当前滚动高度
    let scrollTop = null;
    if(ele === window){
          scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    }else{
         scrollTop = ele.scrollTop;
    }
    // 滚动step方法
    var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 6;
        if (Math.abs(distance) < 1) {
            ele.scrollTo(0, position);
        } else {
            ele.scrollTo(0, scrollTop);
            requestAnimationFrame(step);
        }
    };
    step();
};

对象/数组的深拷贝

 /**
 * @param {Object} obj 需要拷贝的数据
 * @description 对象/数组的深拷贝
 */
export const deepClone = obj => {
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(let key in obj){
            if(obj.hasOwnProperty(key)){
                //判断obj子元素是否为对象,如果是,递归复制;否则,简单复制
                if(obj[key] && typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

格式化数字

/**
 @description 格式化数字
 @param {Number} num:需要格式化的数字
 */
export const prefixZero = num =>{
    return num >= 10 ? num : "0" + num;
}

倒计时时间格式化

/**
 @param {Number} timeStamp : 需要倒计时间的秒数;
 @description 倒计时时间格式化
 */
export const countDown = (timeStamp) =>{
    //格式化数字
    function prefixZero(num){
        return num >= 10 ? num : "0" + num;
    }
    let day=parseInt(timeStamp/3600/24);
    let hours=prefixZero(parseInt(timeStamp/3600%24));
    let minutes=prefixZero(parseInt(timeStamp/60%60));
    let seconds=prefixZero(parseInt(timeStamp%60));
    if(timeStamp >= 86400){
        return day + "天" + hours + "时" + minutes + "分"+ seconds + "秒";
    }
    if(timeStamp < 86400 && timeStamp >= 3600){
        return hours + ":" + minutes + ":" + seconds;
    }
    if(timeStamp < 3600 && timeStamp >= 0){
        return minutes + ":" + seconds;
    }
}

时间戳转日期格式

/**
 * @desc 时间戳转日期格式例如: 2020-03-03
 * @param {Number} timestamp 时间戳
 */
export const timestamp2Date = timestamp => {
  let date = new Date(timestamp * 1000)
  let Y = date.getFullYear() + '-'
  let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  return Y + M + D
}

对象数组按照某属性 升序排序

/**
 * @desc 对象数组按照某属性 升序排序函数
 * @param {String} prop 对象属性名
 */
export const ascCompare = (prop) => {
    return (obj1, obj2) => {
        let val1 = obj1[prop]
        let val2 = obj2[prop]
        if (val1 < val2) {
            return -1
        } else if (val1 > val2) {
            return 1
        } else {
            return 0
        }
    }

对象数组按照某属性 降序排序函数

/**
 * @desc 对象数组按照某属性 降序排序函数
 * @param {String} prop 对象属性名
 */
export const dscCompare = prop => {
    return (obj1, obj2) => {
        let val1 = obj1[prop]
        let val2 = obj2[prop]
        if (val1 < val2) {
            return 1
        } else if (val1 > val2) {
            return -1
        } else {
            return 0
        }
    }
}

判断是否是pc端

/**
 * @returns {Boolean} 判断是否是pc端
 */
export const IsPC = () =>{
    var userAgentInfo = navigator.userAgent;
    var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod")
    var flag = true
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false
            break
        }
    }
    return flag
}

获取当前浏览器名称

/**
 * @returns {String} 当前浏览器名称
 */
export const getExplorer = () => {
    const ua = window.navigator.userAgent
    const isExplorer = (exp) => {
        return ua.indexOf(exp) > -1
    }
    if (isExplorer('MSIE')) return 'IE'
    else if (isExplorer('Firefox')) return 'Firefox'
    else if (isExplorer('Chrome')) return 'Chrome'
    else if (isExplorer('Opera')) return 'Opera'
    else if (isExplorer('Safari')) return 'Safari'
}

判断设备类型:ios,android,wechat,qq

/**
 * @returns {Object} 判断设备类型:ios,android,wechat,qq
 */
export const phoneVersions = () => {
    var u = navigator.userAgent
    return {
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
        wechat: u.indexOf('MicroMessenger') > -1,
        qq: u.match(/\sQQ/i) == "qq"
    }
}

结束语

在工作中总结出来的,与更多的人交流分享,希望得到更优的代码。减少冗余代码,提高性能,让代码越来越漂亮、优雅、健壮。

你可能感兴趣的:(提升工作效率的js工具函数,持续更新~)