前端實用小工具

meislzhua 發(fā)布于2019-08-02 14:15 / 544人閱讀

摘要：類型判斷判斷的類型，單單用并無法完全滿足，這其實并不是，本質(zhì)原因是的萬物皆對象的理論。獲取參數(shù)全局尺寸設(shè)置說明常用長度單位。

1、類型判斷

判斷 Target 的類型，單單用 typeof 并無法完全滿足，這其實并不是 bug，本質(zhì)原因是 JS 的萬物皆對象的理論。因此要真正完美判斷時，我們需要區(qū)分對待:

基本類型(null): 使用 String(null)

基本類型(string / number / boolean /undefined) + function: 直接使用 typeof即可

其余引用類型(Array / Date / RegExp Error): 調(diào)用toString后根據(jù)[object XXX]進行判斷

很穩(wěn)的判斷封裝:

let class2type = {}
"Array Date RegExp Object Error".split(" ").forEach(e => class2type[ "[object " + e + "]" ] = e.toLowerCase()) 

function type(obj) {
    if (obj == null) return String(obj)
    return typeof obj === "object" ? class2type[ Object.prototype.toString.call(obj) ] || "object" : typeof obj
}

2、防抖和節(jié)流
摘自https://segmentfault.com/a/11...

防抖 (debounce): 將多次高頻操作優(yōu)化為只在最后一次執(zhí)行，通常使用的場景是：用戶輸入，只需再輸入完成后做一次輸入校驗即可。

function debounce(fn, wait, immediate) {
    let timer = null

    return function() {
        let args = arguments
        let context = this

        if (immediate && !timer) {
            fn.apply(context, args)
        }

        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(context, args)
        }, wait)
    }
}

節(jié)流(throttle): 每隔一段時間后執(zhí)行一次，也就是降低頻率，將高頻操作優(yōu)化成低頻操作，通常使用場景: 滾動條事件或者 resize 事件，通常每隔 100~500 ms執(zhí)行一次即可。

function throttle(fn, wait, immediate) {
    let timer = null
    let callNow = true
    
    return function() {
        let context = this,
            args = arguments

        if (callNow) {
            fn.apply(context, args)
            callNow = false
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}

3、獲取URL參數(shù)

function getUrlKey(name){
    return encodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href)||[,""])[1].replace(/+g,"%20")) || null;
}

4、全局尺寸設(shè)置
說明：常用長度單位px、em、rem。其中px是物理像素，固定大小，無自適應(yīng)特點；em是相對單位，以父元素大小為基準倍率，但累計疊乘，容易出錯；rem相對單位，以根元素大小為基準倍率（document.documentElement.style.fontSize），不疊加，可實現(xiàn)準確自適應(yīng)。

;(function(win,doc){
    function setRem(){
        //以iphone6為標準，按屏幕大小實現(xiàn)屏幕基礎(chǔ)尺寸縮放，16px是文檔的默認尺寸（即1rem默認為16px），為方便計算可變更為50或者100（對應(yīng)1rem=50px或者100px）
        doc.documentElement.style.fontSize = 16 * doc.documentElement.clientWidth / 375 + "px";
    }
    setRem();
    //監(jiān)聽resize事件，屏幕大小發(fā)生變化時，隨時變換基礎(chǔ)尺寸
    win.addEventListener("resize",function(){
        setRem();
    },false);
})(window,document)

5、深拷貝數(shù)據(jù)
應(yīng)用類型（array、object）按引用使用，不能復(fù)制，想要復(fù)制（深拷貝）需要新建對象，把目標的對象的屬性逐個拷貝。

function copyArr (arr){
    return arr.map((e) => {
        if(typeof e ==="object"){
            return Object.assign({},e)
        }else {
            return e
        }
    })
}