前端实用小工具

andot 发布于2019-08-23 15:14 / 1295人阅读

摘要：类型判断判断的类型，单单用并无法完全满足，这其实并不是，本质原因是的万物皆对象的理论。获取参数全局尺寸设置说明常用长度单位。

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

云服务器 GPU云服务器 linux实用小工具实用小程序实用工具小程序的实用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101735.html

前端实用小工具

摘要：类型判断判断的类型，单单用并无法完全满足，这其实并不是，本质原因是的万物皆对象的理论。获取参数全局尺寸设置说明常用长度单位。 1、类型判断判断 Target 的类型，单单用 typeof 并无法完全满足，这其实并不是 bug，本质原因是 JS 的万物皆对象的理论。因此要真正完美判断时，我们需要区分对待: 基本类型(null): 使用 String(null) 基本类型(string...

elarity 2019-08-30 15:55 评论0 收藏0
前端实用小工具

摘要：类型判断判断的类型，单单用并无法完全满足，这其实并不是，本质原因是的万物皆对象的理论。获取参数全局尺寸设置说明常用长度单位。 1、类型判断判断 Target 的类型，单单用 typeof 并无法完全满足，这其实并不是 bug，本质原因是 JS 的万物皆对象的理论。因此要真正完美判断时，我们需要区分对待: 基本类型(null): 使用 String(null) 基本类型(string...

meislzhua 2019-08-02 14:15 评论0 收藏0
前端最实用书签(持续更新)

摘要：前言一直混迹社区突然发现自己收藏了不少好文但是管理起来有点混乱所以将前端主流技术做了一个书签整理不求最多最全但求最实用。前言一直混迹社区,突然发现自己收藏了不少好文但是管理起来有点混乱; 所以将前端主流技术做了一个书签整理,不求最多最全,但求最实用。书签源码书签导入浏览器效果截图showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 评论0 收藏0
前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

MobService 2019-08-02 16:05 评论0 收藏0
前端工具【3】—— 图片处理

摘要：切图主要是用的工具就是等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。是打开文件捕捉活动窗口捕获窗口捕获矩形区域，可自行截图。新版的比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。切图主要是用的工具...

Rango 2019-08-29 16:42 评论0 收藏0