博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端实用小工具
阅读量:7123 次
发布时间:2019-06-28

本文共 1688 字,大约阅读时间需要 5 分钟。

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、防抖和节流

摘自

  • 防抖 (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;}

转载地址:http://ioael.baihongyu.com/

你可能感兴趣的文章
雪花算法 - snowflake
查看>>
检测到目标URL存在Http Host头攻击漏洞
查看>>
一眼看穿
查看>>
【mySQL】left join、right join和join的区别
查看>>
线上CPU100%?看看这篇是怎么排查的!
查看>>
自己开发的在线视频下载工具,基于Java多线程
查看>>
提高云服务器安全等级的七个措施
查看>>
使用JavaScript ES6的新特性计算Fibonacci(非波拉契数列)
查看>>
JS面向对象的程序设计之继承的实现 - 原型链的注意点
查看>>
JustDoIt:立刻开始你的编程之旅
查看>>
Shell 脚本编写
查看>>
纹理集打包和动画转换工具Texture Merge的使用教程
查看>>
【响应式布局】initial containing block、viewport以及相关尺寸
查看>>
ajax在同一页面中同控制器不同方法中调用数据并异步刷新的实例
查看>>
代码性能调优“三十六”策
查看>>
面向云数据库,超低延迟文件系统PolarFS诞生了
查看>>
systemverilog中Configuration的用法详解
查看>>
(...)这三个点在JavaScript中意味着什么?
查看>>
Android中的设计模式之策略模式
查看>>
深入解析丨母婴App如何迅速收割2W新用户?
查看>>