当前位置: 首页 > Web前端 > CSS

前端实用小工具

时间:2023-03-31 11:24:23 CSS

1.类型判断判断Target的类型,单靠typeof是不能完全满足的。这实际上不是错误。本质原因还是JS的万物皆对象理论。因此,当我们想要完美判断时,需要区别对待:基本类型(null):使用String(null)基本类型(string/number/boolean/undefined)+function:直接使用typeof和其他引用类型(Array/Date/RegExpError):调用toString后,根据[objectXXX]判断非常稳定的判断封装:letclass2type={}'ArrayDateRegExpObjectError'.split('').forEach(e=>class2type['[object'+e+']']=e.toLowerCase())functiontype(obj){if(obj==null)returnString(obj)returntypeofobj==='object'?class2type[对象.原型.toString。调用(对象)]||'object':typeofobj}2.防抖和节流取自https://segmentfault.com/a/11...防抖(debounce):优化多个高频操作到只在执行上次,也是常用的场景是:用户输入,输入完成后只需要做一次输入验证。functiondebounce(fn,wait,immediate){lettimer=nullreturnfunction(){letargs=argumentsletcontext=thisif(immediate&&!timer){fn.apply(context,args)}if(timer)clearTimeout(timer)timer)timer=setTimeout(()=>{fn.apply(context,args)},wait)}}Throttle:一定时间后执行,也就是降低频率,优化高频运行到低频操作,通常使用场景:滚动条事件或resize事件,一般100~500ms执行一次。functionthrottle(fn,wait,immediate){lettimer=nullletcallNow=truereturnfunction(){letcontext=this,args=argumentsif(callNow){fn.apply(context,args)callNow=false}if(!timer){timer=setTimeout(()=>{fn.apply(context,args)timer=null},wait)}}}3.获取URL参数函数getUrlKey(name){returnencodeURIComponent((newRegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+g,'%20'))||null;}4.全局尺寸设置说明:常用的长度单位有px、em、rem。其中,px为物理像素,大小固定,无自适应特性;em是相对单位,以父元素的大小为基数放大,但累加容易出错;rem是相对单位,以根元素大小为基础放大倍数(document.documentElement.style.fontSize),不重叠,可以实现精准自适应。;(function(win,doc){functionsetRem(){//以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.深拷贝数据应用类型(数组、对象)是按引用使用的,不能拷贝,如果要拷贝(深拷贝),需要新建一个对象,并拷贝目标对象的属性一个一个。函数copyArr(arr){返回arr。map((e)=>{if(typeofe==='object'){returnObject.assign({},e)}else{returne}})}