提升工作效率的js工具函數(shù),持續(xù)更新~

頁面垂直平滑滾動到指定滾動高度

/**
 * @param {object} ele 滾動區(qū)域的 dom 節(jié)點
 * @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();
};

對象/數(shù)組的深拷貝

 /**
 * @param {Object} obj 需要拷貝的數(shù)據(jù)
 * @description 對象/數(shù)組的深拷貝
 */
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;
}

格式化數(shù)字

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

倒計時時間格式化

/**
 @param {Number} timeStamp : 需要倒計時間的秒數(shù);
 @description 倒計時時間格式化
 */
export const countDown = (timeStamp) =>{
    //格式化數(shù)字
    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;
    }
}

時間戳轉(zhuǎn)日期格式

/**
 * @desc 時間戳轉(zhuǎn)日期格式例如: 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
}

對象數(shù)組按照某屬性 升序排序

/**
 * @desc 對象數(shù)組按照某屬性 升序排序函數(shù)
 * @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
        }
    }

對象數(shù)組按照某屬性 降序排序函數(shù)

/**
 * @desc 對象數(shù)組按照某屬性 降序排序函數(shù)
 * @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'
}

判斷設(shè)備類型:ios,android,wechat,qq

/**
 * @returns {Object} 判斷設(shè)備類型: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"
    }
}

結(jié)束語

在工作中總結(jié)出來的,與更多的人交流分享,希望得到更優(yōu)的代碼。減少冗余代碼,提高性能,讓代碼越來越漂亮、優(yōu)雅、健壯。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁) 本章內(nèi)容 使用對象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,682評論 0 4
  • 1.import static是Java 5增加的功能,就是將Import類中的靜態(tài)方法,可以作為本類的靜態(tài)方法來...
    XLsn0w閱讀 1,428評論 0 2
  • 【般若智慧】 1、處事須精明,待人要糊涂; 2、有福而不驕,則無禍;有禍而不懼,自是福; 3、大事看擔當,逆境看襟...
    九點的太陽閱讀 448評論 0 3
  • 一個習慣的養(yǎng)成最難的是堅持。我的日行萬步已經(jīng)堅持五天了。雖然是五天,但已經(jīng)遇到不少困難,差點堅持不下去。 ...
    伊人瀟瀟閱讀 190評論 0 1

友情鏈接更多精彩內(nèi)容