JS常用功能汇总，瞬间提升你的工作效率

前言本文总结了项目开发过程中常用的js功能和规律，旨在提高你平时的开发效率。检测方法常用日期时间函数跨端事件处理js移动端适配方案xss预防方法常用js算法（防抖、拦截、去重、排序、模板渲染、观察者...）代码1.正则//匹配邮箱letreg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$//（新）匹配电话号码letreg=/^1[0-9]{10}$/;//（旧）匹配电话号码letreg=/^1(3|4|5|7|8)[0-9]{9}$/;//匹配8-16位数字和字母密码的正则表达式letreg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;//匹配国内电话号码0510-4305211letreg=/\d{3}-\d{8}|\d{4}-\d{7}/;//匹配ID号letreg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;//匹配腾讯QQ号letreg=/[1-9][0-9]{4,}/;//匹配ip地址letreg=/\d+\.\d+\.\d+\.\d+/;//匹配中文letreg=/^[\u4e00-\u9fa5]*$/;2.检测平台（设备）类型letisWechat=/micromessenger/i.test(navigator.userAgent),isWeibo=/weibo/i.test(navigator.userAgent),isQQ=/qq\//i.test(navigator.userAgent),isIOS=/(iphone|ipod|ipad|ios)/i.test(navigator.userAgent),isAndroid=/android/i.test(navigator.userAgent);3.常用日期时间函数//时间格式化函数format_date(timeStamp){letdate=newDate(timeStamp);returndate.getFullYear()+"year"+prefix_zero(date.getMonth()+1)+"month"+prefix_zero(date.getDate())+"day"+prefix_zero(date.getHours())+":"+prefix_zero(date.getMinutes());}//数字格式化函数prefix_zero(num){returnnum>=10?num:"0"+num;}//倒计时时间格式化函数format_time(timeStamp){letday=Math.floor(timeStamp/(24*3600*1000));letleave1=timeStamp%(24*3600*1000);lethours=Math.floor(leave1/(3600*1000));letleave2=leave1%(3600*1000);letminutes=Math.floor(leave2/(60*1000));letleave3=leave2%(60*1000);letseconds=Math.floor(leave3/1000);if(day)returnday+"day"+hours+"hour"+minutes+"minute";if(hours)returnhours+"hour"+minutes+"minute"+seconds+"second";if(minutes)returnminutes+"minute"+seconds+"second";if(seconds)returnseconds+"seconds";return"Timeisup!";}5.跨端事件处理(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',重新计算=function(){varclientWidth=docEl.clientWidth;varfontSize=20;docEl.style.fontSize=fontSize+'px';vardocStyles=getComputedStyle(docEl);varrealFontSize=parseFloat(docStyles.fontSize);varscale=realFontSize/fontSize;控制台。log("realFontSize:"+realFontSize+",scale:"+scale);fontSize=clientWidth/667*20;if(isIphoneX())fontSize=19;fontSize=fontSize/scale;docEl.style.fontSize=fontSize+'px';};//Abortifbrowser不支持addEventListenerif(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);//iphoneX判断函数isIphoneX(){return/iphone/gi.test(navigator.userAgent)&&(screen.height==812&&screen.width==375)}})(文档,窗口);6.xss预防方法//敏感符号转义函数{lete={'"':'"','&':'&','<':'<','>':'>'}returns.replace(/["<>&]/g,m=>{returne[m]})}7.常用js算法/***节流功能--规定该功能只能触发一次单位时间内如果该功能在单位时间内被触发多次，则只会触发一次。*/functionthrottle(fun,delay){letlast,deferTimerreturnfunction(args){letthat=thislet_args=argumentsletnow=+newDate()if(last&&now=0;i--){__messages[type][i]===fn&&__messages[type].splice(i,1)}}}}})();//模板渲染方法functionformatString(str,data){returnstr.replace(/\{\{(\w+)\}\}/g,function(match,key){returntypeofdata[key]===undefined?'':data[key]})}//冒泡排序函数bubbleSort(arr){for(leti=arr.length-1;i>0;i--){for(letj=0;jarr[j+1]){swap(arr,j,j+1);}}}returnarr;}//替换函数functionsswap(arr,indexA,indexB){[arr[indexA],arr[indexB]]=[arr[indexB],arr[indexA]];}//数组去重函数distinct(arr=testArr){returnarr.filter((v,i,array)=>array.indexOf(v)===i)}后期会继续总结工作中遇到的更多经典函数，也作为总结我的工作当然，我们也可以直接使用lodash或ramda等流行的功能工具库，这里仅供学习参考。本文转载自微信公众号“趣话前端”，可通过以下二维码关注。转载本文请联系前端公众号。