前言
一般项目存在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 (
<div>
<div>{goodItem.title}</div>
<div>
<div>产品名称：{goodItem.name}</div>
<div>产品颜色：{goodItem.color}</div>
</div>
</div>
);
};
return (
<div>
{goodContent('hat')}
{goodContent('shoses')}
</div>
);
不同类型图片展示和编辑
/**
* 图片展示
* @param {Array} imgList 图片列表
* @return {void} 无
*/
const colImgContent = imgList => {
return (
<>
{imgList.length != 0 &&
imgList.map((img, index) => (
<Col span={4} key={index}>
<img className='img-block' src={img} />
</Col>
))}
</>
);
};
/**
* 图片展示
* @param {string} type 图片分类
*/
const imgContent = type => {
const imgObj = {
hat: {
title: '帽子产品展示',
imgList: [],
},
shoses: {
title: '鞋子产品展示',
imgList: [],
},
};
const item = imgObj[type];
return (
<div className='mb10'>
{item.title}：
<Button type='link' onClick={() => uploadImgs(item)}>
编辑
</Button>
<Row gutter={(12, 12)}>{colImgContent(item.imgList)}</Row>
</div>
);
};
return (
<div>
{goodContent('hat')}
{goodContent('shoses')}
</div>
);
老功能要不要测？
当然，测试是肯定要测的。不过提测的时间点可能会因情况而异。
我一般在需求设计阶段就会把需要额外测试的地方标注出来。但是有些需求任务量小不需要设计评审，这种情况下如果要增加额外的测试功能点，需要提前跟测试的同事沟通，一般不是翻天覆地的修改，测试的同事是很好沟通的。如果改动影响范围太大，测试的同事要做风险评估之后，才能确定是否可以进行代码改造。
注：可能每个公司的工作流程不一样，请大家参考公司的实际流程进行提测要求和提测操作。
精准定位
线上的紧急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;
小结
有些问题，在特殊场景才会出现，这个时候通过对比特殊场景和常规场景的异同，找到不同点，能够帮助快速解决问题。
业务变通
熟悉业务
与其担心不熟悉业务，不好改需求或者评估开发排期，不如抽时间熟悉业务。业务熟悉起来也可以间接的提升开发速度和开发质量。
业务线太多怎么办？
我个人是「好记性不如烂笔头」这一派的。我无法一次记住全部的业务功能，那就写写文档，将功能梳理出来。
如果业务线多，那就一条一条的捋。切记「贪多嚼不烂」，以及避免「迷路蜜蜂」的状态。
单个业务如何梳理？
不同的业务，梳理的侧重点也会有所不同。
- 流程较长的业务，需要捋顺整个流程。可以通过绘制流程图的方式，辅助理解和记忆。
- 交互复杂的业务，需要新定边框，再细化交互设计。交互是比较分散的，但是类型比较确定，弹层是弹层，下拉项是下拉项。整体的交互风格先定好，可以减少后期的修改。
- 内部逻辑复杂的业务，需要拆分层级。先拆成最小颗粒度，再做功能组合，有点像搭积木，先把形状分类好，再搭结构，最终完成「图纸」上的模样。
- 偏活动类的业务，梳理文档中，最好列出来活动入口、参与规则（可能会影响前端的功能）、参与记录的查看方式等。
已整理业务文档数量
| 类型 | 文档数量/个 |
|---|---|
| 产品线文档 | 12 |
| 理赔组业务文档 | 7 |
抽离业务组件
先绘制出全部业务模块，分门别类。然后横向对比业务功能，思索今后的发展，确定哪些功能是可以抽离业务组件的。
抽离的本意，一方面提升代码的复用率，不必重复开发；另一方面，可以将复杂功能拆解，便于后续的快速迭代。
抽离的好处，功能写的又快又好，一次开发，造福未来。
我之前写过一篇关于业务组件的思考，这里不展开说了，指路☞ 【工作小记】关于业务组件的思考 。
思维变通
设计文档
我的设计文档主要包括三部分内容，开发前准备、开发排期、需求拆分和重点功能设计。
开发前准备
准备的内容主要是功能开发之外的事情。
比如小程序开发是否需要新增业务域名，新增的项目是否需要运维的同事帮忙配置域名，公众号新增页面上线之后是否需要提供入口链接等。这些可以再设计文档中进行记录，避免遗忘。
开发排期
我的开发排期中包含每一项开发需要的具体时间，以页面为维度，以小时为最小的时间单位，然后汇总成天数。实际的开发周期和联调周期，还需要结合手上有没有其他并行的需求和后端同事的开发周期。
需求拆分和重点功能设计
我会把所有的需求罗列出来，避免漏掉哪个。但是功能设计一般只会做重点功能，或者一些组件封装的设计。
重点功能设计主要是处理方案和重点功能代码块，如果流程复杂的会附上流程图；如果状态值较多的项，附上枚举值对应表格。
抽丝剥茧
并不是所有的功能是复杂的，把功能抽离到最小功能，肯定有是简单的部分，而复杂的内容只占其中一角。
比如一个列表页，搜索项和列表展示比较简单，删除操作页很简单。但是新增的表单很复杂。
如果卡在复杂的功能处，不妨先完成简单的部分。如果经常卡在复杂的功能上，就要自我反思一下了，平时有没有做功能整理和技术提升，来帮助自己更好更快的开发复杂功能。
排期变通
正向排期总是失误，不妨试试反问式排期方法。
- 为什么只是在原来功能中加了一个小需求，但是写的排期却这么长？它难在兼容老功能还是新增的功能？
- 为什么修改的项这么多，但是写的排期时间却这么短？复杂程度是不是真的不高，不要被想当然坑了自己？
- 别的页面需要的时间都很短，为什么唯独这个页面需要这么长的时间？它的复杂点到底在哪？
- 为什么联调的时间反而比开发的时间长？是我联调时间写长了？还是开发时间写短了？还是联调接口太多，参数太复杂？
总结
对于老代码的改动，确实耗时又费心神。所以我有时候会在我的设计文档中，写一些鼓励自己的俏皮话。一定要好玩一点不要太中规中矩，才能逗笑自己的同时，激发干活的热情。
凡事留一线，代码好扩展。
功能设计好，bug见得少。
今天努力捋顺的需求，都是日后宝贵的财富。
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
