10个 Javascript 小技巧帮你提升代码质量
关注公众号前端人，回复“加群” 添加无广告优质学习群 Javascript 常用代码优化和重构的方法 简介 主要介绍以下几点： 提炼函数 合并重复的条件片段 把条件分支语句提炼成函数 合理使用循环 提前让函数退出代替嵌套条件分支 传递对象参数代替过长的参数列表 少用三目运算符 合理使用链式调用 分解大型类 本文会不断更新，不足之处欢迎评论区补充。 提炼函数 好处： 避免出现超大函数。 独立出来的函数有助于代码复用。 独立出来的函数更容易被覆写。 独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。 语义化将多段分离的逻辑放在不同的函数中实现，可以使代码逻辑清晰，清楚的看到每一步在做什么。 代码举例： 实现获取数据，然后操作dom显示数据，最后添加事件 函数提炼前 // 逻辑都写在一起，需要将所有逻辑看完才知道这段代码是干嘛的，局部逻辑无法复用 functionmain(){$.ajax.get('/getData').then((res)=>{constul=document.getElementById('ul');ul.innerHTML=res.list.map(text=>`<liclass="li">${text}</li>`).join('\n');constlist=document.getElementsByClassName('li');for(leti=0;i<list.length;i++){list[i].addEventListener('focus',()=>{//dosomething});}});} 函数提炼后 functiongetData(){return$.ajax.get('/getData').then((res)=>res.data.list);}functionshowList(list){constul=document.getElementById('ul');ul.innerHTML=list.map(text=>`<liclass="li">${text}</li>`).join('\n');}functionaddEvent(){constlist=document.getElementsByClassName('li');for(leti=0;i<list.length;i++){list[i].addEventListener('focus',()=>{//dosomething});}} // 逻辑清晰，一眼读懂每一步在做什么，某些提炼出来的函数还可以被复用 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);//跳转}}; //合并后functionmain(currPage){if(currPage<=0){currPage=0;}elseif(currPage>=totalPage){currPage=totalPage;}jump(currPage);//把jump函数独立出来}; 3. 把条件分支语句提炼成函数 复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。有时可以将条件分支语句提炼成语义化的函数，使代码更加直观，逻辑清晰。 //根据不同季节决定打折力度functiongetPrice(price){vardate=newDate();//夏天if(date.getMonth()>=6&&date.getMonth()<=9){returnprice*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',browser:'safari'},{key:'Firefox',browser:'firefox'},{key:'Opera',browser:'opera'},{key:'msie',browser:'ie'},];for(leti=0;i<list.length;i++){constitem=list[i];if(str.includes(item.key)){returnitem.browser};}return'other';} 提前让函数退出代替嵌套条件分支 让函数变成多出口提前返回，替换嵌套条件分支。 functiondel(obj){varret;if(!obj.isReadOnly){//不为只读的才能被删除if(obj.isFolder){//如果是文件夹ret=deleteFolder(obj);}elseif(obj.isFile){//如果是文件ret=deleteFile(obj);}}returnret;};functiondel(obj){if(obj.isReadOnly){//反转if表达式return;}if(obj.isFolder){returndeleteFolder(obj);}if(obj.isFile){returndeleteFile(obj);}}; 6. 传递对象参数代替过长的参数列表 函数参数过长那么就增加出错的风险，想保证传递的顺序正确就是一件麻烦的事，代码可读性也会变差，尽量保证函数的参数不会太长。如果必须传递多个参数的话，建议使用对象代替。 一般来说，函数参数最好不要超过3个 functionsetUserInfo(id,name,address,sex,mobile,qq){console.log('id='+id);console.log('name='+name);console.log('address='+address);console.log('sex='+sex);console.log('mobile='+mobile);console.log('qq='+qq);};setUserInfo(1314,'sven','shenzhen','male','137********',377876679);functionsetUserInfo(obj){console.log('id='+obj.id);console.log('name='+obj.name);console.log('address='+obj.address);console.log('sex='+obj.sex);console.log('mobile='+obj.mobile);console.log('qq='+obj.qq);};setUserInfo({id:1314,name:'sven',address:'shenzhen',sex:'male',mobile:'137********',qq:377876679}); 7. 少用三目运算符 三目运算符性能高，代码量少。 但不应该滥用三目运算符，我们应该在简单逻辑分支使用，在复杂逻辑分支避免使用。 // 简单逻辑可以使用三目运算符 varglobal=typeofwindow!=="undefined"?window:this; // 复杂逻辑不适合使用 varok=isString?(isTooLang?2:(isTooShort?1:0)):-1; 8. 合理使用链式调用 优点： 链式调用使用简单，代码量少。 缺点： 链式调用带来的坏处就是在调试不方便，如果我们知道一条链中有错误出现，必须得先把这条链拆开才能加上一些调试 log 或者增加断点，这样才能定位错误出现的地方。 如果该链条的结构相对稳定，后期不易发生修改，可以使用链式。 varUser={id:null,name:null,setId:function(id){this.id=id;returnthis;},setName:function(name){this.name=name;returnthis;}};User.setId(1314).setName('sven');varuser=newUser();user.setId(1314);user.setName('sven'); 9. 分解大型类 大型类的分解和函数的提炼很像，类太大会出现逻辑不清晰，难以理解和维护的问题。 合理的大类分解可以使类的逻辑清晰，且子模块可以方便复用。 10. 活用位操作符 编程语言计算乘除的性能都不高，但是某些情况使用位操作符可以提升乘除等运算的性能。 //按位右移varn=parseInt(3/2);//原始varn=3>>1;//按位右移 原文地址:juejin.cn/post/6909638377247604750 1.如果看到这里，说明你喜欢这篇文章，请转发、点赞、在看 2.关注公众号前端人，回复资料包领取我整理的前端进阶资料包 3.回复加群，加入前端进阶群，和小伙伴一起学习讨论! 本文分享自微信公众号 - 前端人（FrontendPeople）。如有侵权，请联系 support@oschina.cn 删除。本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
