当前位置: 首页 > Web前端 > HTML

JavaScript重构技巧-降低函数复杂度

时间:2023-04-02 22:13:01 HTML

JohnAu-Yeung,更多分类以往好评文章,也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。JavaScript是一种易于学习的编程语言,很容易编写可以运行并执行某些操作的程序。但是,很难写出一段干净的JavaScript代码。在本文中,我们将研究如何降低函数的复杂性。把重复的代码移到同一个位置我们应该把重复的代码提取出来,合并到同一个位置,这样当需要修改的时候,只需要改一个地方,同时降低错误率。假设我们可以编写以下代码:constbutton=document.querySelector('button');lettoggled=true;button.addEventListener('click',()=>{toggled=!toggled;if(toggled){document.querySelector("p").style.color='red';}else{document.querySelector("p").style.color='green';}})上面代码中有两个document.querySelector("p"),我们可以这样优化,将document.querySelector("p")保存到一个变量中,然后使用该变量,如下:constbutton=document.querySelector('button');constp=document.querySelector("p");lettoggled=true;button.addEventListener('click',()=>{toggled=!toggled;if(toggled){p.style.color='red';}else{p.style.color='green';}}这样我们就不用写很长的document.querySelector("p")了,写个变量p就可以了。代码示例中另一个常见的数字,我们很难知道看数字就知道数字的含义:letx=1;lety=1;letz=1;变量名表示如下:constnumPeople=1;让x=numPeople;让y=numPeople;让z=numPeople;这样我们就可以知道numPeople的值为1,代表人数。简化功能功能尽量简单,最好只做一件事,行数不要太多,不要超过30行。我们不应该按照我们应该的方式使用ES5类,也不应该将IIFEs用于模块或块。相反,我们应该使用类语法,其中可以在一个类中拥有该类的多个实例方法。这将大大减少函数的大小。此外,只要我们可以定义函数,函数就应该是纯函数,这意味着它们不应该有副作用。例如,最好的简单函数如下:constadd=(a,b)=>a+b;上面的函数没有任何副作用,因为它没有修改函数外的任何变量。另外,它也是一个纯函数,对于同样的输入,输出的结果也是一样的。使用guard语句代替嵌套语句guard语句的定义使用guard语句将一个复杂的条件表达式拆分成多个条件表达式,比如一个非常复杂的表达式嵌套了好几层if-then-else语句,转换成多个if语句来实现其逻辑。这些多个if语句是guard语句。有时条件表达式可能会嵌套n次才能真正执行。其他分支只是报告错误并返回。对于这种情况,应该单独检查报错返回的分支,当条件为真时会立即返回。这种单独的检查是保护条款。Guard子句可以将我们的注意力从异常处理中解放出来,集中精力在正常的处理代码中。例如,我们可以编写如下代码:constgreet=(firstName,lastName,greeting)=>{if(typeoffirstName==='string'){if(typeoflastName==='string'){if(typeofgreeting==='string'){return`${greeting},${firstName}${lastName}`;}}}}我们可以优化constgreet=(firstName,lastName,greeting)=>{if(typeoffirstName!=='string'){thrownewError('firstnameisrequired');}if(typeoflastName!=='string'){thrownewError('lastnameisrequired');}if(typeofgreeting!=='string'){thrownewError('greetingisrequired');}return`${greeting},${firstName}${lastName}`;}在第二个示例中,如果每个参数都不是字符串,则会抛出错误,从而消除嵌套的if语句。这在做同样的事情时将嵌套的if语句减少为没有嵌套的if语句。嵌套很难阅读和理解,我们应该到处摆脱它们。总结重复代码总是不好的。我们应该永远记住“不要重复自己(DRY)”的原则。另外,应该用一些新的方法来替代ES5时代。最后,嵌套的if语句应该替换为guard语句,因为它们执行与嵌套的if语句相同的检查,这样更容易阅读。代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文:https://levelup.gitconnected....每周更新交流文章。可以微信搜索“大千世界”阅读即时更新(比博文早一两篇)。githubhttps://github.com/qq449245884/xiaozhi已经收录了,整理了很多我的文档。欢迎加星和改进。可以参考考点面试。还有关注公众号,后台可以看到福利,你懂的。