前端有用小工具

2024年5月18日 173次阅读 来源: Fardwn

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;
}

4、全局尺寸设置
申明：经常使用长度单元px、em、rem。个中px是物理像素，牢固大小，无自适应特性；em是相对单元，以父元素大小为基准倍率，但累计叠乘，轻易失足；rem相对单元，以根元素大小为基准倍率（document.documentElement.style.fontSize），不叠加，可完成正确自适应。

;(function(win,doc){
    function setRem(){
        //以iphone6为规范，按屏幕大小完成屏幕基本尺寸缩放，16px是文档的默许尺寸（即1rem默许为16px），为轻易盘算可变更加50或许100（对应1rem=50px或许100px）
        doc.documentElement.style.fontSize = 16 * doc.documentElement.clientWidth / 375 + 'px';
    }
    setRem();
    //监听resize事宜，屏幕大小发生变化时，随时变更基本尺寸
    win.addEventListener('resize',function(){
        setRem();
    },false);
})(window,document)

5、深拷贝数据
运用范例（array、object）按援用运用，不能复制，想要复制（深拷贝）须要新建对象，把目的的对象的属性逐一拷贝。

function copyArr (arr){
    return arr.map((e) => {
        if(typeof e ==='object'){
            return Object.assign({},e)
        }else {
            return e
        }
    })
}
    原文作者：Fardwn
    原文地址: https://segmentfault.com/a/1190000018170312
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞