Javascript常用代码优化重构方法Introduction主要介绍以下几点：精炼函数合并重复的条件片段将条件分支语句精炼成函数合理使用循环让函数提前退出替换嵌套条件分支传递对象参数替换过长的参数列表少用三元运算符合理使用链式调用分解大类利用位运算符纯函数抽取函数的好处：避免超大函数。独立的功能有利于代码重用。分离的功能更容易覆盖。如果独立函数有一个好名字，它本身就会作为注释。语义在不同的函数中实现多个独立的逻辑，可以让代码逻辑清晰，清楚地看到每一步在做什么。代码示例：实现数据的获取，然后操作dom显示数据，最后在refining之前添加事件函数``//逻辑写在一起，需要阅读所有逻辑才能知道这段代码做了什么，以及部分逻辑不能被重用map(text=>${text}).join('n');constlist=document.getElementsByClassName('li');for(leti=0;i{//做一些事情});});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('李');for(leti=0;i{//做一点事}）;}}//逻辑清晰，一眼就能明白每一步是干什么的，提取出来的一些函数也可以复用asyncfunctionmain(){constlist=awaitgetData();//获取数据showList(list);//显示页面addEvent();//添加事件}``合并重复的条件片段如果一个函数体中有一些条件分支语句，并且这些条件分支语句内部散落着一些重复的代码，那么需要进行合并去重工作`//合并函数main(currPage){if(currPage<=0){currPage=0;跳转（当前页面）；//跳转}elseif(currPage>=totalPage){currPage=totalPage;跳转（当前页面）；//跳转}else{跳转(currPage);//跳转}};//合并函数main(currPage){if(currPage<=0){0;Page=curr}elseif(currPage>=totalPage){currPage=totalPage;}跳转（currPage）;//分离跳转函数};`将条件分支语句提炼成复杂的条件分支语句，使程序难以阅读和理解的重要原因，往往导致功能庞大。有时可以将条件分支语句细化为语义函数，使代码更直观，逻辑更清晰。`//根据不同季节决定折扣functiongetPrice(price){vardate=newDate();if(date.getMonth()>=6&&date.getMonth()<=9){//夏季回归价格*0.8;}returnprice;};//是否是夏季functionisSummer(){vardate=newDate();returndate.getMonth()>=6&&date.getMonth()<=9;};//条件函数getPrice(price){if(isSummer()){returnprice*0.8;}退货价格;};`合理使用循环如果多段代码实际上负责一些重复的工作，那么可以使用循环来代替，使代码量更少。`//确定什么浏览器函数getBrowser(){conststr=navigator.userAgent;if(str.includes('QQBrowser')){返回'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{返回'其他';}};//循环判断，把对应关系抽象成配置，更清晰functiongetBrowser(){conststr=navigator.userAgent;constlist=[{key:'QQBrowser',浏览器:'qq'},{key:'Chrome',浏览器:'chrome'},{key:'Safari',浏览器:'safari'},{key:'Firefox',browser:'firefox'},{key:'Opera',browser:'opera'},{key:'msie',browser:'ie'},];for(leti=0;i
