【读书活动感悟】—特精致—JavaScript设计模式与开发实践 第22章:代码重构_文章

【读书活动感悟】—特精致—JavaScript设计模式与开发实践 第22章:代码重构

王玉如
发表于 2025-11-14 09:24:47

      前端项目开发最主要和JavaScript打交道,这是一个动态类型语言,类型模糊的特性在实际开发时就比较灵活,同样的功能,不同的开发人员实现的方式都会不同,但最后的结果是一致的。所以这里讨论的并不是哪些是必须严格遵守的标准,针对具体的项目代码结构,具体是否需要重构,以及如何进行重构,需要根据实际情况,项目工期,人员配置等因素一起决定。但是在开发过程或重构过程中,总是有一些依据或好的建议指导我们开发出更优秀的代码。下面就总结一些开发或重构时比较实用的思路或方法。
1:提炼函数
     规范的函数定义能提升代码的可读性、可维护性和健壮性,如果一个函数过长,不得不加上若干注释才能让这个函数易读一些,那这些函数就有必要进行重构。这也是函数优化的一个方向,这样独立出来的函数有助于代码复用。
2:合并重复的代码片段
     重复的代码片段一般多出现在多个if。。。else中,项目开发中针对多种情况判断的不同分支时,经常复制一份,但是随着业务需求的迭代,相似的代码就会多次出现,此时就应该考虑把重复的代码片段进行合并,统一维护。
3:把条件分支语句提炼成函数
     开发设计中,复杂的条件分支语句往往会导致写的代码难以阅读和理解,加上对业务的不熟悉,这种情况看别人写的代码时,深有体会。其实可以把代码中的功能进行拆分,把一个个的功能性代码,提炼成一个独立的函数,既能更准确的表达代码的意思,函数本身又能起到注释的作用。
4:合理使用循环
     在函数体内,如果有些代码实际上负责的是一些重复性的工作,合理利用循环不仅可以实现同样的功能,还可以精简代码量。
比如:页面要控制部分组件的显示或隐藏。
修改前:
Widget.frmName.visible=false
Widget.frmSex.visible=false
Widget.frmAge.visible=false
Widget.frmTel.visible=false
Widget.frmHostingMode.visible=false
修改后:
let formList=[“frmName”,”frmSex”,”frmAge”,”frmTel”,”frmHostingMode”];
formList.forEach(item=>{Widget[item].visible=false})

5:传递对象参数代替过长的参数列表
     函数中的参数数量越多,函数就越难理解和使用,调用该函数的人首先要搞清楚全部参数的含义,在使用时还需要小心翼翼,以免少传了某个参数或者参数错位等,会直接导致函数调用后执行的方法体的逻辑执行错误。所以我们可以把参数放到一个对象中,然后把对象当参数传过去,这就不用关心参数的数量和顺序,而函数体中的业务逻辑也会直接获取参数对象里面的值进行判断和处理。
6:根据情况少用三元运算符
     针对简单的判断可以使用三元运算符。比如:let name=type==1?’小王’:’小张’
但如果条件逻辑非常复杂,则建议使用if...else等其他形式进行判断
复杂不易理解比如:
return name===’doc’?-1:age===10?1:name===’excel’?-1:0

7:合理使用链式调用
     使用链式调用的方式,可以让代码看起来更简洁易懂,但是链式调用带来的坏处就是在调试的时候非常不方便。如果链条很容易发生变化,导致调试和维护困难,则建议使用普通的调用的方式效果会更高。
new User().setID(“A”).setName(“B”)
$(“#ID”).css(“color”,”red”).css(“background”,”blue”)
8:用return退出多重循环
     多重循环中,根据条件判断需要退出外层循环的时候,大多数时候会声明一个标记变量,再外层判断标记变量时,如果符合条件则return。
var func=()=>{
let flag=false;
for(let i=0;i<100;i++){
for(let j=0;j<100;j++){
If(i*j > 100){
flag=true;
break;//退出当前循环
}
}
If(flag === true){
Break;//退出当前循环
}
}
}
代码看着写的非常复杂,这也是最容易想到的方法,但更简单的做法是在需要中止循环的时候直接退出整个方法:
var func=()=>{
for(let i=0;i<100;i++){
for(let j=0;j<100;j++){
If(i*j > 100){
return;//直接退出方法,所以后续的操作都不会再执行
return fun(1)//如果符合条件时,需要执行后续的操作,可以这样写,return 一个操作方法即可。
}
}
}
}

     以上就是总结的前端代码开发或重构时,时刻需要注意的一些方法,掌握好正确的方法和习惯,可以让代码更易维护,面对不同的需求时也更容易扩展和支持。

72 0

评论


意见反馈