企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
![](https://box.kancloud.cn/dce95f43c3c931bb089d4e43d577bbc9_249x295.jpeg) ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; if (aPlan.withinRange(low, high)) ``` ![](https://box.kancloud.cn/a3bed334e2e1f6d1a46c5039deb25af9_91x152.jpeg) `if (aPlan.withinRange(aRoom.daysTempRange))`### 动机 如果我看见代码从一个记录结构中导出几个值,然后又把这几个值一起传递给一个函数,我会更愿意把整个记录传给这个函数,在函数体内部导出所需的值。 “传递整个记录”的方式能更好地应对变化:如果将来被调的函数需要从记录中导出更多的数据,我就不用为此修改参数列表。并且传递整个记录也能缩短参数列表,让函数调用更容易看懂。如果有很多函数都在使用记录中的同一组数据,处理这部分数据的逻辑常会重复,此时可以把这些处理逻辑搬移到完整对象中去。 也有时我不想采用本重构手法,因为我不想让被调函数依赖完整对象,尤其是在两者不在同一个模块中的时候。 从一个对象中抽取出几个值,单独对这几个值做某些逻辑操作,这是一种代码坏味道(依恋情结),通常标志着这段逻辑应该被搬移到对象中。保持对象完整经常发生在引入参数对象(140)之后,我会搜寻使用原来的数据泥团的代码,代之以使用新的对象。 如果几处代码都在使用对象的一部分功能,可能意味着应该用提炼类(182)把这一部分功能单独提炼出来。 还有一种常被忽视的情况:调用者将自己的若干数据作为参数,传递给被调用函数。这种情况下,我可以将调用者的自我引用(在JavaScript中就是`this`)作为参数,直接传递给目标函数。 ### 做法 - 新建一个空函数,给它以期望中的参数列表(即传入完整对象作为参数)。 > 给这个函数起一个容易搜索的名字,这样到重构结束时方便替换。 - 在新函数体内调用旧函数,并把新的参数(即完整对象)映射到旧的参数列表(即来源于完整对象的各项数据)。 - 执行静态检查。 - 逐一修改旧函数的调用者,令其使用新函数,每次修改之后执行测试。 > 修改之后,调用处用于“从完整对象中导出参数值”的代码可能就没用了,可以用移除死代码(237)去掉。 - 所有调用处都修改过来之后,使用内联函数(115)把旧函数内联到新函数体内。 - 给新函数改名,从重构开始时的容易搜索的临时名字,改为使用旧函数的名字,同时修改所有调用处。 ### 范例 我们想象一个室温监控系统,它负责记录房间一天中的最高温度和最低温度,然后将实际的温度范围与预先规定的温度控制计划(heating plan)相比较,如果当天温度不符合计划要求,就发出警告。 ##### 调用方... ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; if (!aPlan.withinRange(low, high)) alerts.push("room temperature went outside range"); ``` ##### class HeatingPlan... ``` withinRange(bottom, top) {  return (bottom >= this._temperatureRange.low) && (top <= this._temperatureRange.high); } ``` 其实我不必将“温度范围”的信息拆开来单独传递,只需将整个范围对象传递给`withinRange`函数即可。 首先,我在`HeatingPlan`类中新添一个空函数,给它赋予我认为合理的参数列表。 ##### class HeatingPlan... ``` xxNEWwithinRange(aNumberRange) { } ``` 因为这个函数最终要取代现有的`withinRange`函数,所以它也用了同样的名字,再加上一个容易替换的前缀。 然后在新函数体内调用现有的`withinRange`函数。因此,新函数体就完成了从新参数列表到旧函数参数列表的映射。 ##### class HeatingPlan... ``` xxNEWwithinRange(aNumberRange) { return this.withinRange(aNumberRange.low, aNumberRange.high); } ``` 现在开始正式的替换工作了,我要找到调用现有函数的地方,将其改为调用新函数。 ##### 调用方... ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; if (!aPlan.xxNEWwithinRange(aRoom.daysTempRange)) alerts.push("room temperature went outside range"); ``` 在修改调用处时,我可能会发现一些代码在修改后已经不再需要,此时可以使用移除死代码(237)。 ##### 调用方... ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; if (!aPlan.xxNEWwithinRange(aRoom.daysTempRange)) alerts.push("room temperature went outside range"); ``` 每次替换一处调用代码,每次修改后都要测试。 调用处全部替换完成后,用内联函数(115)将旧函数内联到新函数体内。 ##### class HeatingPlan... ``` xxNEWwithinRange(aNumberRange) {  return (aNumberRange.low >= this._temperatureRange.low) &&   (aNumberRange.high <= this._temperatureRange.high); } ``` 终于可以去掉新函数那难看的前缀了,记得同时修改所有调用者。就算我所使用的开发环境不支持可靠的函数改名操作,有这个极具特色的前缀在,我也可以很方便地全局替换。 ##### class HeatingPlan... ``` withinRange(aNumberRange) {  return (aNumberRange.low >= this._temperatureRange.low) &&   (aNumberRange.high <= this._temperatureRange.high); } ``` ##### 调用方... ``` if (!aPlan.withinRange(aRoom.daysTempRange)) alerts.push("room temperature went outside range"); ``` ### 范例:换个方式创建新函数 在上面的示例中,我直接编写了新函数。大多数时候,这一步非常简单,也是创建新函数最容易的方式。不过有时还会用到另一种方式:可以完全通过重构手法的组合来得到新函数。 我从一处调用现有函数的代码开始。 ##### 调用方... ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; if (!aPlan.withinRange(low, high)) alerts.push("room temperature went outside range"); ``` 我要先对代码做一些整理,以便用提炼函数(106)来创建新函数。目前的调用者代码还不具备可提炼的函数雏形,不过我可以先做几次提炼变量(119),使其轮廓显现出来。首先,我要把对旧函数的调用从条件判断中解放出来。 ##### 调用方... ``` const low = aRoom.daysTempRange.low; const high = aRoom.daysTempRange.high; const isWithinRange = aPlan.withinRange(low, high); if (!isWithinRange) alerts.push("room temperature went outside range"); ``` 然后把输入参数也提炼出来。 ##### 调用方... ``` const tempRange = aRoom.daysTempRange; const low = tempRange.low; const high = tempRange.high; const isWithinRange = aPlan.withinRange(low, high); if (!isWithinRange) alerts.push("room temperature went outside range"); ``` 完成这一步之后,就可以用提炼函数(106)来创建新函数。 ##### 调用方... ``` const tempRange = aRoom.daysTempRange; const isWithinRange = xxNEWwithinRange(aPlan, tempRange); if (!isWithinRange) alerts.push("room temperature went outside range"); ``` ##### 顶层作用域... ``` function xxNEWwithinRange(aPlan, tempRange) { const low = tempRange.low; const high = tempRange.high; const isWithinRange = aPlan.withinRange(low, high); return isWithinRange; } ``` 由于旧函数属于另一个上下文(`HeatingPlan`类),我需要用搬移函数(198)把新函数也搬过去。 ##### 调用方... ``` const tempRange = aRoom.daysTempRange; const isWithinRange = aPlan.xxNEWwithinRange(tempRange); if (!isWithinRange) alerts.push("room temperature went outside range"); ``` ##### class HeatingPlan... ``` xxNEWwithinRange(tempRange) { const low = tempRange.low; const high = tempRange.high; const isWithinRange = this.withinRange(low, high); return isWithinRange; } ``` 剩下的过程就跟前面一样了:替换其他调用者,然后把旧函数内联到新函数中。重构刚开始的时候,为了清晰分离函数调用,以便提炼出新函数,我提炼了几个变量出来,现在可以把这些变量也内联回去。 这种方式的好处在于:它完全是由其他重构手法组合而成的。如果我使用的开发工具支持可靠的提炼和内联操作,用这种方式进行本重构会特别流畅。