「经验总结」高效开发，老代码可以这样动

前言

一般项目存在2年及以上，代码就会变得臃肿且不好维护。如果有人员变动，新成员加入，可能面临的第一个难题就是，如何在老代码中加新需求。

我之前刚入职，接手老项目，内心活动是这样的：

• 新功能的添加会不会影响老功能？
• 工期如此紧张，我还有时间做功能设计吗？要不直接上手码代码得了？
• 新增的功能跟已有的很相似，我是提公共还是在下面直接粘贴一份改改？如果提公共，原来的功能要不要测试一下？
• 紧急的线上的bug，但是代码第一次见，今天必须修复上线，时间太紧了怎么办？
• 业务逻辑太复杂，平时迭代频繁，我有时间捋代码吗？
• 老的功能不熟悉，新的需求要修改原来的逻辑，但是逻辑挺绕的，交互多，UI还不好实现，我应该怎么排期才合理？

虽然看上去像个戏精，但是句句都是真情实感。接手老项目遇到的这些疑问，不仅实际发生的频率较高，而且很大一部分会影响开发效率和质量。

虽然没有研究出什么武学奥秘「降龙十八掌」，但是我用毕生所学，总结了「老代码的神行百变」。

功能变通

老页面添加新功能，并不是所有时候都会影响原有的功能，所以开发之前做一下功能分类，会有「事半功倍」的效果。

功能隔离

有时候，需要添加的功能点，可能只是一个单选项或者下拉框，这个时候封装个组件也没什么必要。但是毕竟是在老的页面上添加，既要不影响现有功能，又要考虑之后做功能扩展。

我一般会做功能隔离。得益于JSX的灵活写法，封装代码段十分方便。相对独立的功能就不过多说了，这种情况下做功能隔离很简单。主要是有依赖关系的功能，如何做隔离？

其实功能隔离也有点解耦的思维在里面，虽然功能有依赖性，但是不一定要把代码写在一起。

比如产品订单，所有产品类型的订单都在订单管理中，A产品的产品经理说，A产品的订单撤单的时候要给二次确认提示，但是B产品没有这个要求。

我把是否进行二次确认弹窗的逻辑放在了弹窗外侧的列表操作上。撤单弹窗里面中直接对二次弹窗的处理。这样一来，撤单弹窗中的代码不用关心哪条业务线需要进行二次确认操作。外侧的撤单按钮不需要关心撤单弹窗里面是怎么操作的，只需要把控制二次确认弹窗的变量reconfirmFlag（是否二次确认布尔值）传入弹窗即可。

这样，未来如果再加其他的产品类型，只需求维护列表撤单操作代码里面的条件判断即可。

列表撤单操作

record.reconfirmFlag = false;
// =>true: 帽子产品需要二次确认弹窗
if (record.type === 'hat') {record.reconfirmFlag = true;
} 

撤单弹窗确定操作

/**
 * 提交操作
 * @param {Object} value 接口入参
 * @return {void} 无
 */
const handleSubmit = value => {let { data } = props;if (data.reconfirmFlag) {// 二次确认提示} else {// 提交操作}
}; 

相似功能的提炼

新增的功能和现有的功能非常相似，也是在开发中经常遇到的情况。可能习惯性的或者为了求稳直接把老代码复制一份，修改修改完事。

看似又快又稳的操作，会导致代码变得越来越冗余，老代码变得越来越难维护。

怎么提炼？

相似功能主要有两点，同和异。相同部分是需要提炼的内容。对于差异的部分，我之前习惯用条件判断，现在习惯用枚举的方式。

不同产品分类展示产品信息

/**
 * 产品介绍
 * @param {string} type 产品分类
 */
const goodContent = type => {const good = {hat: {title: '帽子',name: '帽子A',color: '黑色',},shoses: {title: '鞋子',name: '鞋子B',color: '白色',},};const goodItem = good[type];return (
{goodItem.title}
产品名称：{goodItem.name}
产品颜色：{goodItem.color}
);
};

return (
{goodContent('hat')}{goodContent('shoses')}
); 

不同类型图片展示和编辑

/**
 * 图片展示
 * @param {Array} imgList 图片列表
 * @return {void} 无
 */
const colImgContent = imgList => {return (<>{imgList.length != 0 &&imgList.map((img, index) => ())});
};

/**
 * 图片展示
 * @param {string} type 图片分类
 */
const imgContent = type => {const imgObj = {hat: {title: '帽子产品展示',imgList: [],},shoses: {title: '鞋子产品展示',imgList: [],},};const item = imgObj[type];return (
{item.title}： uploadImgs(item)}>编辑{colImgContent(item.imgList)}
);
};

return (
{goodContent('hat')}{goodContent('shoses')}
); 

老功能要不要测？

当然，测试是肯定要测的。不过提测的时间点可能会因情况而异。

我一般在需求设计阶段就会把需要额外测试的地方标注出来。但是有些需求任务量小不需要设计评审，这种情况下如果要增加额外的测试功能点，需要提前跟测试的同事沟通，一般不是翻天覆地的修改，测试的同事是很好沟通的。如果改动影响范围太大，测试的同事要做风险评估之后，才能确定是否可以进行代码改造。

注：可能每个公司的工作流程不一样，请大家参考公司的实际流程进行提测要求和提测操作。

精准定位

线上的紧急bug、临时上线的紧急需求等，即考验开发者的抗压能力，又考验自身的技术能力。有些技术难题，确实需要过硬的技术功底。但是有些问题，找准问题的关键点，其实不难解决。

不是逗闷子，先来看几个例子。

无法唤起的收银台

前情提要

同事离职之后，叶一一暂时接手了同事负责的工作，还没有完全熟悉那部分业务。这天，叶一一拎着早餐来上班，产品经理过来说一个活动的收银台无法唤起了，让叶一一帮忙看一下。

第一次知道这个活动的叶一一是这样做的

虽然叶一一对这个活动非常陌生，好在所有的活动功能都在项目的activity目录下。找到对应的页面，叶一一没有急吼吼的去熟悉业务，她在做其他业务线购买流程时很清楚一点，进行提交操作之后才会唤起支付收银台，所以叶一一先找到提交按钮，然后再去找唤起收银台的代码，发现这个活动的收银台是跳转第三方的，而跳转第三方url中带有test字符的域名，叶一一就知晓了问题所在。

果然不出所料

叶一一问产品，跳转第三方收银台的链接，测试环境和正式环境的分别是什么。拿到链接之后，果然测试环境带"test"线上不带。叶一一加上环境判断区分不同环境的跳转链接，再上线之后，线上就能正常跳转收银台了。

后续

叶一一后来熟悉这个活动功能的时候发现，活动流程还挺长的，到达购买页面之前至少有5、6个步骤。所以，如果叶一一没有精准定位问题，到达购买页面还得费点功夫。

// 区分线上和测试环境的地址
let prodEnv = env === 'production'
let urlPrefix = prodEnv ? 'https://api' : 'https://testapi';
const url = `${urlPrefix}.com`; 

测试通过之后的线上报错

前情提要

叶一一刚接手了从别的组并过来的项目，还没来得及看代码，就来活了，有大概10个页面需要改动。叶一一看不是改文案就是在原来的基础上新增模块，就愉快的定好排期开始干活。

测试通过

很顺利的开发完功能，自测没有什么问题，叶一一就提测了。测试过程也很顺利，上线日，代码早就准备好，就等晚上上线了。

线上验收

线上验收时，测试的小伙伴发现有个接口报错了，后端的同事说这是一个老接口没有做过调整。叶一一找到出现问题的接口，发现是一个很简单的获取数据的接口，都不需要入参。怎么会有问题呢，测试环境明明没有问题。

「全组的等待」+「就差这一个问题就验收通过」的双重压力并没有让叶一一慌乱。叶一一遇到过多次玄妙问题，只要找准问题关键，不难解决。

正式环境和测试环境唯一的区别就是接口加密，会不会加密的接口需要什么特殊处理？叶一一本地运行加密命令，果然接口报错。叶一一又对比了其他接口，唯一区别就是这个接口没有入参。于是叶一一尝试在入参传了一个空对象，果然接口成功并返回数据。叶一一让后端帮忙看加密的逻辑，确实有特殊的逻辑处理。

后续

后来叶一一发现其他项目没有这个问题，是因为在axios封装时做了特殊处理，新接手的项目没有进行处理。

// 处理过
config.params = JSON.stringify(params);

// 未做处理
config.params = params; 

小结

有些问题，在特殊场景才会出现，这个时候通过对比特殊场景和常规场景的异同，找到不同点，能够帮助快速解决问题。

业务变通

熟悉业务

与其担心不熟悉业务，不好改需求或者评估开发排期，不如抽时间熟悉业务。业务熟悉起来也可以间接的提升开发速度和开发质量。

业务线太多怎么办？

我个人是「好记性不如烂笔头」这一派的。我无法一次记住全部的业务功能，那就写写文档，将功能梳理出来。

如果业务线多，那就一条一条的捋。切记「贪多嚼不烂」，以及避免「迷路蜜蜂」的状态。

单个业务如何梳理？

不同的业务，梳理的侧重点也会有所不同。

1.流程较长的业务，需要捋顺整个流程。可以通过绘制流程图的方式，辅助理解和记忆。
2.交互复杂的业务，需要新定边框，再细化交互设计。交互是比较分散的，但是类型比较确定，弹层是弹层，下拉项是下拉项。整体的交互风格先定好，可以减少后期的修改。
3.内部逻辑复杂的业务，需要拆分层级。先拆成最小颗粒度，再做功能组合，有点像搭积木，先把形状分类好，再搭结构，最终完成「图纸」上的模样。
4.偏活动类的业务，梳理文档中，最好列出来活动入口、参与规则（可能会影响前端的功能）、参与记录的查看方式等。

已整理业务文档数量

抽离业务组件

先绘制出全部业务模块，分门别类。然后横向对比业务功能，思索今后的发展，确定哪些功能是可以抽离业务组件的。

抽离的本意，一方面提升代码的复用率，不必重复开发；另一方面，可以将复杂功能拆解，便于后续的快速迭代。

抽离的好处，功能写的又快又好，一次开发，造福未来。

我之前写过一篇关于业务组件的思考，这里不展开说了，指路☞ 【工作小记】关于业务组件的思考 。

思维变通

设计文档

我的设计文档主要包括三部分内容，开发前准备、开发排期、需求拆分和重点功能设计。

开发前准备

准备的内容主要是功能开发之外的事情。

比如小程序开发是否需要新增业务域名，新增的项目是否需要运维的同事帮忙配置域名，公众号新增页面上线之后是否需要提供入口链接等。这些可以再设计文档中进行记录，避免遗忘。

开发排期

我的开发排期中包含每一项开发需要的具体时间，以页面为维度，以小时为最小的时间单位，然后汇总成天数。实际的开发周期和联调周期，还需要结合手上有没有其他并行的需求和后端同事的开发周期。

需求拆分和重点功能设计

我会把所有的需求罗列出来，避免漏掉哪个。但是功能设计一般只会做重点功能，或者一些组件封装的设计。

重点功能设计主要是处理方案和重点功能代码块，如果流程复杂的会附上流程图；如果状态值较多的项，附上枚举值对应表格。

抽丝剥茧

并不是所有的功能是复杂的，把功能抽离到最小功能，肯定有是简单的部分，而复杂的内容只占其中一角。

比如一个列表页，搜索项和列表展示比较简单，删除操作页很简单。但是新增的表单很复杂。

如果卡在复杂的功能处，不妨先完成简单的部分。如果经常卡在复杂的功能上，就要自我反思一下了，平时有没有做功能整理和技术提升，来帮助自己更好更快的开发复杂功能。

排期变通

正向排期总是失误，不妨试试反问式排期方法。

• 为什么只是在原来功能中加了一个小需求，但是写的排期却这么长？它难在兼容老功能还是新增的功能？
• 为什么修改的项这么多，但是写的排期时间却这么短？复杂程度是不是真的不高，不要被想当然坑了自己？
• 别的页面需要的时间都很短，为什么唯独这个页面需要这么长的时间？它的复杂点到底在哪？
• 为什么联调的时间反而比开发的时间长？是我联调时间写长了？还是开发时间写短了？还是联调接口太多，参数太复杂？

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享