当前位置: 首页 > 科技观察

八个实用的NPM技术

时间:2023-03-13 18:33:39 科技观察

在这篇文章中,我将与大家分享8个NPM技术。我希望这些提示可以帮助你。让我们现在开始。1.复制内容到剪贴板几乎所有的网站都有,因为它可以让用户更方便地使用功能。但令人难以置信的是,只需要6行有效代码就可以做到这一点。constcopyToClipboard=(content)=>{consttextarea=document.createElement("textarea")textarea.value=contentdocument.body.appendChild(textarea)textarea.select()document.execCommand("复制")textarea.remove()}2.比较应用程序版本我经常遇到这个要求。如果APP的版本大于x.y.z,则执行A逻辑,否则执行B逻辑。其实就是比较app版本的问题。constcompareVersion=(version1,version2)=>{constarr1=version1.split(".")constarr2=version2.拆分(“。”)常量len1=arr1。长度常量len2=arr2。长度常量minLength=Math.min(len1,len2)for(leti=0;ilen2?1:0}constv1='2.0.1'constv2='2.1.0'constv3='2.1.0'console.log(compareVersion(v1,v2))//-1V1小于V2console.log(compareVersion(v2,v1))//1V2大于v1console.log(compareVersion(v2,v3))//0V2等于V33。使用URLSearchParams获取URL的搜索参数是前端开发人员经常做的事情,我们通常使用正则表达式来完成,但是现在我们有更简单的方法...constgetQueryByName=(name)=>{constquery=newURLSearchParams(location.search)returndecodeURIComponent(query.get(name))}//url:https://medium.com/?name=fatfish&age=100constname=getQueryByName('name')//fatfishconstage=getQueryByName('age')//100constgender=getQueryByName('gender')//null4.页面平滑滚动到顶部如何让页面平滑滚动到顶部?Codepen地址:https://codepen.io/qianlong/pen/NWYpqZqconstscrollToTop=()=>{constc=document.documentElement.scrollTop||document.body.scrollTopif(c>0){window.requestAnimationFrame(scrollToTop)window.scrollTo(0,c-c/8)}}5.获取当前页面的滚动距离有时候不需要滚动顺利到顶部,你只需要得到滚动条滚动多远constgetScrollPosition=(el=window)=>({x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,y:el.pageYOffset!==undefined?el.pageYOffset:el.scrollTop,})getScrollPosition()//{x:0,y:215}6.判断当前设备是Android还是iOSletisAndroid=u.indexOf("Android")>-1||u.indexOf("Linux")>-1让isIOS=!!u。match(/\(i[^]+(U)?CPU.+MacOSX/)if(isIOS){return0}elseif(isAndroid){return1}else{return2}}getOSType()//07.CurrencyFormatting格式化货币的方式有很多种,比如这两种方式。第一种方式:constformatMoney=(money)=>{returnmoney.replace(newRegExp(`(?!^)(?=(\\d{3})+${money.includes('.')?'\\.':'$'})`,'g'),',')}formatMoney('123456789')//'123,456,789'formatMoney('123456789.123')//'123,456,789.123'formatMoney('123')//'123'第二种方式:正则表达式让我们很头疼,不是吗?所以我们需要找到一种更简单的方法来格式化货币。constformatMoney=(money)=>{returnmoney.toLocaleString()}formatMoney(123456789)//'123,456,789'formatMoney(123456789.123)//'123,456,789.123'formatMoney(123)//'123'我喜欢这样,很简单了解。8.进入和退出全屏如何将网页设置为全屏模式?我在Codepen写了一个小例子,Codepen:https://codepen.io/qianlong/pen/wvmJdXb你可以试试。//进入全屏functionfullScreen(){letel=document.documentElementletrfs=el.requestFullScreen||el.webkitRequestFullScreen||el.mozRequestFullScreen||el.msRequestFullScreen//typeofrfs!="undefined"&&rfsif(rfs){rfs.call(el)}elseif(typeofwindow.ActiveXObject!=="undefined"){letwscript=newActiveXObject("WScript.Shell")if(wscript!=null){wscript.SendKeys("{F11}")}}}//退出全屏functionexitScreen(){letel=documentletcfs=el.cancelFullScreen||el.webkitCancelFullScreen||el.moz取消全屏||el.exitFullScreen//typeofcfs!="undefined"&&cfsif(cfs){cfs.call(el)}elseif(typeofwindow.ActiveXObject!=="undefined"){letwscript=newActiveXObject("WScript.Shell")if(wscript!=null){wscript.SendKeys("{F11}")}}}