前端實用小工具

Fardwn發表於2019-02-17
前端

1、型別判斷

判斷 Target 的型別，單單用 typeof 並無法完全滿足，這其實並不是 bug，本質原因是 JS 的萬物皆物件的理論。因此要真正完美判斷時，我們需要區分對待:

  • 基本型別(null): 使用 String(null)
  • 基本型別(string / number / boolean /undefined) + function: 直接使用 typeof即可
  • 其餘引用型別(Array / Date / RegExp Error): 呼叫toString後根據[object XXX]進行判斷

很穩的判斷封裝:

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、防抖和節流
摘自https://segmentfault.com/a/11…

  • 防抖 (debounce): 將多次高頻操作優化為只在最後一次執行，通常使用的場景是：使用者輸入，只需再輸入完成後做一次輸入校驗即可。
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)
    }
}
  • 節流(throttle): 每隔一段時間後執行一次，也就是降低頻率，將高頻操作優化成低頻操作，通常使用場景: 滾動條事件 或者 resize 事件，通常每隔 100~500 ms執行一次即可。
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引數

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

相關文章