概述
在这一章节,作者给出了一个戏剧演出团售票的示例:剧目有悲剧(tragedy)和喜剧(comedy);为了卖出更多的票,剧团则更具观众的数量来为下次演出打折扣(大致意思是这次的观众越多,下次的票价越低)
设计
采用JSON存储数据(因为代码是用Javascript写的),plays.json 存储剧目,invoices.json存储账单
plays.json
{"hamlet": {"name": "Hamlet", "type": "tragedy"},"as-like": {"name": "As You Like It", "type": "comedy"},"othello": {"name": "Othello", "type": "tragedy"}
}
invoices.json
[{"customer": "BigCo","performances": [{"playID": "hamlet","audience": 55 },{"playID": "as-like","audience": 35},{"playID": "othello","audience": 40}]
}]
下面这个函数用于打印账单详情
function statement(invoice, plays) {let totalAmount = 0;let volumeCredits = 0;let result = `Statement for ${invoice.customer}\n`;const format = new Intl.NumberFormat("en-US", {style: "currency",currency: "USD",minimumFractionDigits: 2}).format;for (let perf of invoice.performances) {const play = plays[perf.playID];let thisAmount = 0;switch (play.type) {case "tragedy":thisAmount = 40000;if (perf.audience > 30) {thisAmount += 1000 * (perf.audience - 30);}break;case "comedy":thisAmount = 30000;if (perf.audience > 20) {thisAmount += 10000 + 500 * (perf.audience - 20);}thisAmount += 300 * perf.audience;break;default:throw new Error(`unknown type: ${play.type}`);}// add volume creditsvolumeCredits += Math.max(perf.audience - 30, 0);// add extra credit for every ten comedy attendeesif ("comedy" === play.type) volumeCredits += Math.floor(perf.audience / 5);// print line for this orderresult += ` ${play.name}: ${format(thisAmount/100)} (${perf.audience} seats)\n`;totalAmount += thisAmount;}result += `Amount owed is ${format(totalAmount/100)}\n`;result += `You earned ${volumeCredits} credits\n`;return result;
}
函数statement实现的打印账单的功能,能正常工作;但是其结构“不甚清晰”。对于这个几十行的代码,我们要读懂、理解并不困难,如果业务比较复杂、函数很长(上百行)时(笔者在维护既有项目时见过2000多行的函数,阅读代码就像是在考古)再去阅读,或者让其他人阅读,要弄清逻辑确实需要花费一番功夫。
如果没有新的需求导入,statement保持现状也可忍受!
新的需求导入
- 要求输出部分以HTML的格式
- 扩充新的剧目类型(如:历史剧、田园剧等)
- ……
需求会源源不断的导入,如果每次导入一个的需求,都在statement函数中修改,随着时间的推移,statement函数将变得臃肿不堪、难以阅读和理解;这也是我们工作中经常做的(目的是懒省事儿,需求来了,在既有的函数中改改能实现功能就完事)。
分解函数statement
- 提取amountFor函数(for循环中的代码,注意提取参数啊Performance、play)
- 提取playFor函数(play参数不是for循环的变量,而是计算出来的)
- 修改amountFor函数,减去play参数
- volumeCredits累加变量提取volumeCreditsFor函数
- 提取format函数(格式化数据)
- ……
具体过程参考《重构改善既有代码设计第二版》第一章
function statement(invoice, plays) {let result = `Statement for ${invoice.customer}\n`;for (let perf of invoice.performances) {result += ` ${playFor(perf).name}: ${usd(amountFor(perf))} (${perf.audience} s
eats)\n`;}result += `Amount owed is ${usd(totalAmount())}\n`;result += `You earned ${totalVolumeCredits()} credits\n`;return result;function totalAmount() {let result = 0;for (let perf of invoice.performances) {result += amountFor(perf);}return result;}function totalVolumeCredits() {let result = 0;for (let perf of invoice.performances) {result += volumeCreditsFor(perf);}return result;}function usd(aNumber) {return new Intl.NumberFormat("en-US", {style: "currency",currency: "USD",minimumFractionDigits: 2}).format(aNumber / 100);}function volumeCreditsFor(aPerformance) {let result = 0;result += Math.max(aPerformance.audience - 30, 0);if ("comedy" === playFor(aPerformance).type) result += Math.floor(aPerformance.audience / 5);return result;}function playFor(aPerformance) {return plays[aPerformance.playID];}function amountFor(aPerformance) {let result = 0;switch (playFor(aPerformance).type) {case "tragedy":result = 40000;if (aPerformance.audience > 30) {result += 1000 * (aPerformance.audience - 30);}break;case "comedy":result = 30000;if (aPerformance.audience > 20) {result += 10000 + 500 * (aPerformance.audience - 20);}result += 300 * aPerformance.audience;break;default:throw new Error(`unknown type: ${playFor(aPerformance).type}`);}return result;}
}
- 拆分计算阶段与格式化阶段
- 分离到两个文件
- ……
总结
一般来说,重构早期的主要动力是尝试理解代码如何工作。通常我们需要先通读代码,找到一些感觉,然后再通过重构将这些感觉从脑海里搬回到代码中。清晰的代码更容易理解,使你能够发现更深层次的设计问题,从而形成积极正向的反馈环。
所谓重构(refactoring)是这样一个过程:在不改变代码外在行为的前提下,对代码做出修改,以改进程序的内部结构。重构是一种经千锤百炼形成的有条不紊的程序整理方法,可以最大限度地减小整理过程中引入错误的概率。本质上说,重构就是在代码写好之后改进它的设计。
有了重构以后,工作的平衡点开始发生变化。设计不是在一开始完成的,而是在整个开发过程中逐渐浮现出来。在系统构筑过程中,我们需要学会如何不断改进设计。这个“构筑-设计”的反复互动,可以让一个程序在开发过程中持续保有良好的设计。