前端實(shí)用小工具

elarity 發(fā)布于2019-08-30 15:55 / 3228人閱讀

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

1、類型判斷

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

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

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

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

很穩(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í)行，通常使用的場(chǎng)景是：用戶輸入，只需再輸入完成后做一次輸入校驗(yàn)即可。

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): 每隔一段時(shí)間后執(zhí)行一次，也就是降低頻率，將高頻操作優(yōu)化成低頻操作，通常使用場(chǎng)景: 滾動(dòng)條事件或者 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è)置
說明：常用長(zhǎng)度單位px、em、rem。其中px是物理像素，固定大小，無自適應(yīng)特點(diǎn)；em是相對(duì)單位，以父元素大小為基準(zhǔn)倍率，但累計(jì)疊乘，容易出錯(cuò)；rem相對(duì)單位，以根元素大小為基準(zhǔn)倍率（document.documentElement.style.fontSize），不疊加，可實(shí)現(xiàn)準(zhǔn)確自適應(yīng)。

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

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

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

云服務(wù)器 GPU云服務(wù)器 linux實(shí)用小工具實(shí)用小程序實(shí)用工具小程序的實(shí)用方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117369.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

elarity

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

iWebFusion：$99/月-Dual E5-2670,128G內(nèi)存,500G SSD硬盤,20

閱讀 610·2021-10-08 10:20
Capoae惡意軟件使用多個(gè)漏洞攻擊Linux系統(tǒng)和Web應(yīng)用程序

閱讀 1496·2021-09-23 11:22
前端實(shí)用小工具

閱讀 3229·2019-08-30 15:55
把鼠標(biāo)、觸摸屏、觸控筆統(tǒng)一起來，Pointer Events介紹

閱讀 1616·2019-08-28 18:25
CSS 模塊

閱讀 1872·2019-08-28 18:14
eval()不是魔鬼，只是被誤解了（翻譯）

閱讀 1245·2019-08-26 11:37
你可能不知道的前端小技巧

閱讀 2907·2019-08-26 10:18
js事件循環(huán)

閱讀 2433·2019-08-23 18:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

前端實(shí)用小工具

相關(guān)文章