Javascript常见的代码优化和重构方法有很多，这里主要介绍以下11个Javascript小技巧，助你提升代码质量。1、抽取函数的好处：避免超大函数。独立的功能有利于代码重用。分离的功能更容易覆盖。如果独立函数有一个好名字，它本身就会作为注释。语义在不同的函数中实现多个独立的逻辑，可以让代码逻辑清晰，清楚地看到每一步在做什么。代码示例：实现数据获取，然后操作dom显示数据，最后在refining之前添加事件函数//逻辑是写在一起的，需要把所有的逻辑都看一遍才能知道这段代码是干什么的，局部逻辑不能复用functionmain(){$.ajax.get('/getData').then((res)=>{constul=document.getElementById('ul');ul.innerHTML=res.list.map(text=>`${text}`).join('\n');constlist=document.getElementsByClassName('li');for(leti=0;i{//dosomething});}});}函数getData(){return$.ajax.get('/getData').then((res)=>res.data.list);}functionshowList(list){constul=document.getElementById('ul');ul.innerHTML=list.map(text=>`${text}`).join('\n');}functionaddEvent(){constlist=document.getElementsByClassName('li');for(leti=0;i{//dosomething});}}//逻辑清晰，一眼就能明白每一步是干什么的，还有一些extracted函数也可以复用asyncfunctionmain(){constlist=awaitgetData();//获取数据showList(list);//显示页面addEvent();//添加事件}2.合并重复的条件片段如果一个一个函数体中有一些条件分支语句，这些条件分支语句内部散布着一些重复的代码，所以在合并之前需要进行合并去重工作//functionmain(currPage){if(currPage<=0){currPage=0;jump(currPage);//跳转}elseif(currPage>=totalPage){currPage=totalPage;jump(currPage);//跳转}else{jump(currPage);//跳转}};//之后mergingfunctionmain(currPage){if(currPage<=0){currPage=0;}elseif(currPage>=totalPage){currPage=totalPage;}jump(currPage);//分离跳转函数};3.将Distill条件分支语句放入函数中复杂的条件分支语句是程序难以阅读和理解的重要原因，很容易导致函数庞大。有时可以将条件分支语句细化为语义函数，使代码更直观，逻辑更清晰。//根据不同季节确定折扣functiongetPrice(price){vardate=newDate();if(date.getMonth()>=6&&date.getMonth()<=9){//summerreturnprice*0.8;}returnprice;};//是否是夏季functionisSummer(){vardate=newDate();returndate.getMonth()>=6&&date.getMonth()<=9;};//条件提炼后functiongetPrice(price){if(isSummer()){returnprice*0.8;}returnprice;};4.合理使用循环如果实际上是多段代码负责一些重复的工作，那么可以使用循环来代替，以减少代码量。//判断是什么浏览器functiongetBrowser(){conststr=navigator.userAgent;if(str.includes('QQBrowser')){return'qq';}elseif(str.includes('Chrome')){return'chrome';}elseif(str.includes('Safari')){return'safri';}elseif(str.includes('Firefox')){return'firefox';}elseif(explorer.indexOf('Opera')>=0){return'opera';}elseif(str.includes('msie')){return'ie';}else{return'other';}};//循环判断，把对应关系抽象成配置，更清晰functiongetBrowser(){conststr=navigator.userAgent;constlist=[{key:'QQBrowser',browser:'qq'},{key:'Chrome',browser:'chrome'},{key:'Safari',浏览器:'safari'},{key:'Firefox',browser:'firefox'},{key:'Opera',browser:'opera'},{key:'msie',browser:'ie'},];for(leti=0;i
