Javascript 常用代码优化和重构的方法
简介
主要介绍以下几点：
提炼函数
合并重复的条件片段
把条件分支语句提炼成函数
合理使用循环
提前让函数退出代替嵌套条件分支
传递对象参数代替过长的参数列表
少用三目运算符
合理使用链式调用
分解大型类
活用位操作符
纯函数
本文会不断更新，不足之处欢迎补充。
1. 提炼函数
好处：
避免出现超大函数。
独立出来的函数有助于代码复用。
独立出来的函数更容易被覆写。
独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。
语义化将多段分离的逻辑放在不同的函数中实现，可以使代码逻辑清晰，清楚的看到每一步在做什么。
代码举例：
实现获取数据，然后操作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';}
5. 提前让函数退出代替嵌套条件分支
让函数变成多出口提前返回，替换嵌套条件分支。
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. 活用位操作符
编程语言计算乘除的性能都不高，但是某些情况使用位操作符可以提升乘除等运算的性能。
11. 纯函数
纯函数是指不依赖于且不改变它作用域之外的变量状态的函数。
纯函数的返回值只由它调用时的参数决定，它的执行不依赖于系统的状态（执行上下文）。
相同的输入参数，一定会得到相同的输出，也就是内部不含有会影响输出的随机变量。
不属于纯函数的特点：
更改文件系统
往数据库插入记录
发送一个 http 请求
可变数据
打印/log
获取用户输入
DOM 查询
访问系统状态
纯函数的作用：
可靠性：函数返回永远和预期一致
可缓存性：因为只要输入一样输出一定一样，因此可将输入作为key，输出作为值，使用对象缓存已经计算的结果
可移植性：因为没有外部依赖，所以移植到任何环境都可正确运行
可测试性：方便针对函数做单元测试
可并行性：对一些复杂计算，可以并行计算（例如使用nodejs多个子进程同时并行计算多个任务，提高计算速度）
应用场景：
工具函数最好使用纯函数
多平台使用的代码（nodejs、浏览器、微信小程序、native客户端等）
相对独立的功能
vara=1;//非纯函数functionsum(b){returna+b;}//非纯函数functionsum(b){a=2;returnb;}//非纯函数functionsum(b){returnb+Math.random();}//纯函数functionsum(b,c){returnb+c;}
IT技术分享社区
个人博客网站：https://programmerblog.xyz
文章推荐程序员效率：画流程图常用的工具程序员效率：整理常用的在线笔记软件远程办公：常用的远程协助软件，你都知道吗？51单片机程序下载、ISP及串口基础知识硬件：断路器、接触器、继电器基础知识
