重构 改善既有代码的设计 第二版 读书笔记

最新推荐文章于 2024-07-25 23:49:35 发布
最新推荐文章于 2024-07-25 23:49:35 发布
阅读量1k 收藏 4
点赞数 3
分类专栏： 其他 文章标签： 代码规范
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40571533/article/details/106379316
版权

文章目录

前言

重构的定义：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构。
设计不是在一开始完成的，而是在整个开发过程中逐渐浮现出来。
需求的变化使得重构变得必要。

第一章 重构 第一个示例

背景

  • 商家：戏剧演出团
  • 戏剧种类：悲剧（tragedy）和喜剧（comedy）
  • 客户（customer）：指定几出剧目
  • 收费参考：观众（audience）人数、剧目类型
  • 优惠：根据到场观众的数量给出“观众量积分”（volume credit）优惠

剧目的数据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
			}
		]
	}
]

一个打印账单详情的功能（1.html）：

/**
* 打印账单详情
*
* @param invoice 账单
* @param plays 所有的剧目
*/
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}`);
        }
        
        // 计算积分
        volumeCredits += Math.max(perf.audience - 30, 0);
        if ("comedy" === play.type) {
            volumeCredits += Math.floor(perf.audience / 5);
        }
        
        // 添加待打印的字符串
        result += ` ${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;
}

运行结果：
在这里插入图片描述

当我亲手打完这个例子，惊！这不就是我写代码的方式嘛！！！
不管代码做的事情有多简单，别人看都需要花一点功夫才能看懂你在做什么。

好了，代码就是这样了，如果没什么其他需求，那这些代码就这么放着也行，然鹅没有什么意外的话，就要出意外了，万恶的需求发生了变化。。。

  1. 希望以HTML的格式输出账单
    我们需要修改每一个 result+=xxx ，如果写的代码时间一长，万一不小心就漏了哪里呢，汗（代码五分钟，bug两小时）。
  2. 演员通过不懈努力，学会了历史剧、田园剧等等等，剧目的种类增加
    我们需要添加switch的case，修改计费方式、积分计算方式。

重构例子

如果你要给程序添加一个特性，但发现代码因缺乏良好的结构而不易于进行更改，那就先重构那个程序，使其比较容易添加该特性，然后在添加该特性。

1、可靠的测试集

相信大家刚开始写代码的时候肯定是写几行就编译一下，看看编译器有没有error，不然等你写了几十行，然后几十个error、warning。。。
尽管有错误提示，新手可能根本看不出来对应的错误是怎么产生的，头疼。

现在我们已经不是新手了，已经是写了很多bug的程序员了。在重构代码的时候，你改了半天，然后run。。。惊！最后程序运行的结果不一样了，只能调试一下，或者无法调试，最后找了半天，只能git恢复以前的版本。（亲身体验）

根据以往的经验，我们需要一套运行时间短的测试集。当我们改了一部分我们就需要验证其正确性。
在这个例子中，测试要做的事情就是当我们输入参数不变的时候，打印出来的结果也不变，也就是做字符串比较的操作。（这边书中没提供，我也没写）

2、分解函数statement

在理解一段代码的时候，我总是先看一些变量和函数的命名，大概推测出要做什么，然后具体细节就要仔细看看代码逻辑。
而这一段代码显然全是代码逻辑细节，所以我们可以把这些细节抽取出一个个函数。

2.1

首先提取出中间的switch（2.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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 = amountFor(perf, play);		// 待支付的金额
        
		// 计算积分
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === play.type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		
		// 添加待打印的字符串
		result += `  ${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;

    /**
	 * 计算一场表演的金额
	 *
	 * @param perf 一场表演
	 * @param plays 所有的剧目
	 */
	function amountFor(perf, play) {
		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}`);
		}
		
		return thisAmount;
	}
}

做完修改立刻测试并且保存到本地的git。

2.2

函数提取出来后看看是不是要修改一下变量名。
作者的编程风格：永远将函数的返回值命名为"result"，这样一眼就能看出它的作用。（3.html）

/**
 * 计算一场表演的金额
 *
 * @param perf 一场表演
 * @param plays 所有的剧目
 */
function amountFor(perf, play) {
    let result = 0;				// 待支付的金额
        
    // 计算金额
    switch (play.type) {
        case "tragedy" :
            result = 40000;
            if (perf.audience > 30) {
                result += 1000 * (perf.audience - 30);
            }
            break;
        case "comedy" :
            result = 30000;
            if (perf.audience > 20) {
                result += 10000 + 500 * (perf.audience - 20);
            }
            result += 300 * perf.audience;
            break;
        default:
            throw new Error(`unknown type:${play.type}`);
    }
    
    return result;
}

做完修改立刻测试并且保存到本地的git。

2.3

修改函数的参数名。
作者的编程风格：使用一门动态类型语言，跟踪变量的类型，为参数取名时都默认带上其类型名。(4.html)

/**
 * 计算一场表演的金额
 *
 * @param aPerformance 一场表演
 * @param plays 所有的剧目
 */
function amountFor(aPerformance, play) {
    let result = 0;				// 待支付的金额
        
    // 计算金额
    switch (play.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:${play.type}`);
    }
    
    return result;
}

做完修改立刻测试并且保存到本地的git。

2.4

还是观察函数的参数，发现aPerformance是每个循环都会改变的，play可以根据aPerformance得到。
所以可以移除一个参数。这里使用以查询代替临时变量。（5.hmtl）

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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 = playFor(perf);	// 剧目
		let thisAmount = amountFor(perf, play);		// 待支付的金额
        
		// 计算积分
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === play.type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		
		// 添加待打印的字符串
		result += `  ${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;

    /**
	 * 得到一场表演的剧目
	 *
	 * @param aPerformance 一场表演
	 * @return 剧目
	 */
	function playFor(aPerformance) {
		return plays[aPerformance.playID];
	}
}

做完修改立刻测试并且保存到本地的git。

使用内联变量 去掉play（6.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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) {
		let thisAmount = amountFor(perf, playFor(perf));		// 待支付的金额
        
		// 计算积分
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === playFor(perf).type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).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;
}

做完修改立刻测试并且保存到本地的git。

下面就要移除play参数了，首先修改函数内部（7.html）：

/**
 * 计算一场表演的金额
 *
 * @param aPerformance 一场表演
 * @param plays 所有的剧目
 */
 function amountFor(aPerformance, play) {
    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;
}

做完修改立刻测试并且保存到本地的git。

修改函数参数和调用（8.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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) {
		let thisAmount = amountFor(perf);		// 待支付的金额
        
		// 计算积分
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === playFor(perf).type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).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;

    /**
     * 计算一场表演的金额
     *
     * @param aPerformance 一场表演
     */
     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;
    }
}

做完修改立刻测试并且保存到本地的git。

再看函数调用处，发现赋值给thisAmount后就不再改变，继续使用内联变量（9.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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) {
        
		// 计算积分
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === playFor(perf).type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${format(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${format(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

2.5

再看看statement函数里面还有一段观众量积分的计算逻辑，提取出来（10.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
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) {
		volumeCredits += volumeCreditsFor(perf);
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${format(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${format(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;

    /**
	 * 计算观众量积分
	 *
	 * @param aPerformance 一场表演
	 */
	function volumeCreditsFor(perf) {
		let volumeCredits = 0;
		volumeCredits += Math.max(perf.audience - 30, 0);
		if ("comedy" === playFor(perf).type) {
			volumeCredits += Math.floor(perf.audience / 5);
		}
		return volumeCredits;
	}
}

做完修改立刻测试并且保存到本地的git。

修改函数变量名（参数名、返回值名）（11.html）：

/**
 * 计算观众量积分
 *
 * @param aPerformance 一场表演
 */
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;
}

做完修改立刻测试并且保存到本地的git。

2.6

看看现在的statement，还是要移除临时变量，发现format没有变化过，换成函数（12.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
function statement(invoice, plays) {
	let totalAmount = 0;	// 待支付的总金额
	let volumeCredits = 0;	// 观众量积分
	let result = `Statement for ${invoice.customer}\n`;	// 生成的待打印的字符串

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		volumeCredits += volumeCreditsFor(perf);
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${format(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${format(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;

    /**
	 * 格式化货币数字
	 *
	 * @param aNumber 货币数字
	 * @return 格式化后的货币数字
	 */
	function format(aNumber) {
		return new Intl.NumberFormat("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2}).format(aNumber);
	}
}

做完修改立刻测试并且保存到本地的git。

感觉format这名字虽然在特定情况下清楚是干什么的，但是表意还不是特别明确，就修改函数声明（有了好的函数声明，就不必阅读代码体理解其行为了，这里是就用货币的类型USD）（13.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
function statement(invoice, plays) {
	let totalAmount = 0;	// 待支付的总金额
	let volumeCredits = 0;	// 观众量积分
	let result = `Statement for ${invoice.customer}\n`;	// 生成的待打印的字符串

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		volumeCredits += volumeCreditsFor(perf);
		
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${usd(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;

    /**
	 * 格式化货币数字
	 *
	 * @param aNumber 货币数字
	 * @return 格式化后的货币数字
	 */
	function usd(aNumber) {
		return new Intl.NumberFormat("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2}).format(aNumber);
	}
}

做完修改立刻测试并且保存到本地的git。

2.7

再来看看还有哪些临时变量，volumeCredits和totalAmount都是通过循环修改的，所以我们发现一个循环其实干了多件事情，使用拆分循环（14.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
function statement(invoice, plays) {
	let totalAmount = 0;	// 待支付的总金额
	let result = `Statement for ${invoice.customer}\n`;	// 生成的待打印的字符串

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}

    let volumeCredits = 0;	// 观众量积分
	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		volumeCredits += volumeCreditsFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${usd(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

提炼函数（15.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
function statement(invoice, plays) {
	let totalAmount = 0;	// 待支付的总金额
	let result = `Statement for ${invoice.customer}\n`;	// 生成的待打印的字符串

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}

    let volumeCredits = totalVolumeCredits();
	
	// 添加待打印的字符串
	result += `Amount owed is ${usd(totalAmount/100)}\n`;
	result += `You earned ${volumeCredits} credits\n`;
	return result;

    /**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits() {
		let result = 0;
		for (let perf of invoice.performances) {
			result += volumeCreditsFor(perf);
		}
		return result;
	}
}

做完修改立刻测试并且保存到本地的git。

内联变量（16.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 */
function statement(invoice, plays) {
	let totalAmount = 0;	// 待支付的总金额
	let result = `Statement for ${invoice.customer}\n`;	// 生成的待打印的字符串

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		// 添加待打印的字符串
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
		
		// 更新总金额
		totalAmount += amountFor(perf);
	}
	
	// 添加待打印的字符串
	result += `Amount owed is ${usd(totalAmount/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

2.8

用同样的步骤移除totalAmount（17.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
function statement(invoice, plays) {
	let result = `Statement for ${invoice.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;

    /**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount() {
		let result = 0;
		for (let perf of invoice.performances) {
			result += amountFor(perf);
		}
		return result;
	}
}

做完修改立刻测试并且保存到本地的git。

我们到现在为止已经把计算相关的逻辑从主函数中移除，变成了一组函数，就理解上来说函数已经到了一目了然的程度，阔怕。

3、拆分计算阶段与格式化阶段

目前我们已经可以看清楚代码的结构了，现在可以思考一下关于html格式输出的功能了，貌似只要修改一下statement里面的几个文本就行了，呵呵，CV开始了。
作为一个想提高代码复用的程序员，我还是希望不把一个函数的代码全部复制粘贴到另一个函数的。
所以我们需要拆分阶段（第一阶段：计算数据 第二阶段：渲染文本），第一个阶段会创建一个中转数据结构给第二阶段，提炼第二阶段函数（18.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	return renderPlainTest(invoice, plays);
}

/**
 * 渲染打印的账单
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(invoice, plays) {
	let result = `Statement for ${invoice.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

添加中转数据结构（19.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement (invoice, plays) {
	const statementData = {};
	return renderPlainTest(statementData, invoice, plays);
}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(data, invoice, plays) {
	let result = `Statement for ${invoice.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of invoice.performances) {
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

检测一下renderPlainTest用到的其他参数，可以放到data里面，先移动customer和performances（20.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	const statementData = {};
	statementData.customer = invoice.customer;
	statementData.performances = invoice.performances;
	return renderPlainTest(statementData, invoice, plays);
}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(data, invoice, plays) {
	let result = `Statement for ${data.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of data.performances) {
		result += `  ${playFor(perf).name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;

    /**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount() {
		let result = 0;
		for (let perf of data.performances) {
			result += amountFor(perf);
		}
		return result;
	}

    /**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits() {
		let result = 0;
		for (let perf of data.performances) {
			result += volumeCreditsFor(perf);
		}
		return result;
	}
}

做完修改立刻测试并且保存到本地的git。

接下里我们希望剧目信息也从data中获取（21.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	const statementData = {};
	statementData.customer = invoice.customer;
	statementData.performances = invoice.performances.map(enrichPerformance);
	return renderPlainTest(statementData, invoice, plays);

    /**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = playFor(result);
		return result;
		
		/**
		 * 得到一场表演的剧目
		 *
		 * @param aPerformance 一场表演
		 * @return 剧目
		 */
		function playFor(aPerformance) {
			return plays[aPerformance.playID];
		}
	}
}

做完修改立刻测试并且保存到本地的git。

替换renderPlainTest中的playFor引用（22.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	const statementData = {};
	statementData.customer = invoice.customer;
	statementData.performances = invoice.performances.map(enrichPerformance);
	return renderPlainTest(statementData, plays);
}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(data, plays) {
	let result = `Statement for ${data.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of data.performances) {
		result += `  ${perf.play.name}: ${usd(amountFor(perf)/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;
	
    /**
	 * 计算观众量积分
	 *
	 * @param aPerformance 一场表演
	 */
	function volumeCreditsFor(aPerformance) {
		let result = 0;
		result += Math.max(aPerformance.audience - 30, 0);
		if ("comedy" === aPerformance.play.type) {
			result += Math.floor(aPerformance.audience / 5);
		}
		return result;
	}

    /**
     * 计算一场表演的金额
     *
     * @param aPerformance 一场表演
     */
     function amountFor(aPerformance) {
        let result = 0;				// 待支付的金额
            
        // 计算金额
        switch (aPerformance.play.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:${aPerformance.play.type}`);
        }
        
        return result;
    }
}

做完修改立刻测试并且保存到本地的git。

替换renderPlainTest中的amountFor引用（23.html）：

    /**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = playFor(result);
        result.amount = amountFor(result);
		return result;
		
        /**
         * 计算一场表演的金额
         *
         * @param aPerformance 一场表演
         */
        function amountFor(aPerformance) {
            let result = 0;				// 待支付的金额
                
            // 计算金额
            switch (aPerformance.play.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:${aPerformance.play.type}`);
            }
            
            return result;
        }
	}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(data, plays) {
	let result = `Statement for ${data.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of data.performances) {
		result += `  ${perf.play.name}: ${usd(perf.amount/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(totalAmount()/100)}\n`;
	result += `You earned ${totalVolumeCredits()} credits\n`;
	return result;

    /**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount() {
		let result = 0;
		for (let perf of data.performances) {
			result += perf.amount;
		}
		return result;
	}
}

做完修改立刻测试并且保存到本地的git。

搬移renderPlainTest中的观众量积分（24.html）：

    /**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits() {
		let result = 0;
		for (let perf of data.performances) {
			result += perf.volumeCredits;
		}
		return result;
	}

    /**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = playFor(result);
        result.amount = amountFor(result);
        result.volumeCredits = volumeCreditsFor(result);
		return result;
		
        /**
         * 计算观众量积分
         *
         * @param aPerformance 一场表演
         */
        function volumeCreditsFor(aPerformance) {
            let result = 0;
            result += Math.max(aPerformance.audience - 30, 0);
            if ("comedy" === aPerformance.play.type) {
                result += Math.floor(aPerformance.audience / 5);
            }
            return result;
        }
	}

做完修改立刻测试并且保存到本地的git。

将两个计算总数的函数搬到statement函数中（25.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	const statementData = {};
	statementData.customer = invoice.customer;
	statementData.performances = invoice.performances.map(enrichPerformance);
    statementData.totalAmount = totalAmount(statementData);
	statementData.totalVolumeCredits = totalVolumeCredits(statementData);
	return renderPlainTest(statementData, plays);

    /**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount() {
		let result = 0;
		for (let perf of statementData.performances) {
			result += perf.amount;
		}
		return result;
	}

    /**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits() {
		let result = 0;
		for (let perf of statementData.performances) {
			result += perf.volumeCredits;
		}
		return result;
	}
}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function renderPlainTest(data, plays) {
	let result = `Statement for ${data.customer}\n`;

	// 遍历账单所有的剧目
	for (let perf of data.performances) {
		result += `  ${perf.play.name}: ${usd(perf.amount/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(data.totalAmount/100)}\n`;
	result += `You earned ${data.totalVolumeCredits} credits\n`;
	return result;
}

做完修改立刻测试并且保存到本地的git。

以管道代替循环（26.html）：

    /**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount() {
		return statementData.performances.reduce((total, p) => total + p.amount, 0);
	}

    /**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits() {
		return statementData.performances.reduce((total, p) => total + p.volumeCredits, 0);
	}

做完修改立刻测试并且保存到本地的git。

提炼第一阶段的代码（27.html）：

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function statement(invoice, plays) {
	return renderPlainTest(createStatementData(invoice, plays));
}

/**
 * 计算账单数据
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
 function createStatementData(invoice, plays) {
	const statementData = {};
	statementData.customer = invoice.customer;
	statementData.performances = invoice.performances.map(enrichPerformance);
    statementData.totalAmount = totalAmount(statementData);
	statementData.totalVolumeCredits = totalVolumeCredits(statementData);
	return statementData;
}

做完修改立刻测试并且保存到本地的git。

两个阶段分离到两个文件 并且添加html的功能（28）：
28.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试</title>
	</head>
	<body>
<script type="module" src="./statement.js"></script>
<script type="module">
import htmlStatement from './statement.js';

let invoice = [
	{
		"customer": "BigCo",
		"performances": [
			{
				"playID": "hamlet",
				"audience": 55
			},
			{
				"playID": "as-like",
				"audience": 35
			},
			{
				"playID": "othello",
				"audience": 40
			}
		]
	}
];

let plays = {
	"hamlet": {"name": "Hamlet", "type": "tragedy"},
	"as-like": {"name": "As You Like It", "type": "comedy"},
	"othello": {"name": "Othello", "type": "tragedy"}
};

let body = document.getElementsByTagName("body")[0];
body.innerHTML = htmlStatement(invoice[0], plays);
</script>
	</body>
</html>

statement.js：

import createStatementData from './createStatementData.js';

/**
 * 打印账单详情
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
function statement(invoice, plays) {
	return renderPlainTest(createStatementData(invoice, plays));
}

/**
 * 渲染打印的账单
 *
 * @param data 中转数据结构
 * @return 待打印的字符串
 */
function renderPlainTest(data) {
	let result = `Statement for ${data.customer}\n`;

	for (let perf of data.performances) {
		result += `  ${perf.play.name}: ${usd(perf.amount/100)} (${perf.audience} seats)\n`;
	}
	
	result += `Amount owed is ${usd(data.totalAmount/100)}\n`;
	result += `You earned ${data.totalVolumeCredits} credits\n`;
	return result;
}

/**
 * 打印账单详情（HTML版）
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的HTML
 */
export default function htmlStatement(invoice, plays) {
	return renderHtml(createStatementData(invoice, plays));
}

/**
 * 渲染打印的账单（HTML版）
 *
 * @param data 中转数据结构
 * @return 待打印的HTML
 */
function renderHtml(data) {
	let result = `<h1>Statement for ${data.customer}</h1>\n`;
	result += "<table>\n";
	result += "<tr><th>play</th><th>seats</th><th>cost</th></tr>";
	
	for (let perf of data.performances) {
		result += `  <tr><td>${perf.play.name}</td><td>${perf.audience}</td>\n`;
		result += `<td>${usd(perf.amount/100)}</td><tr>\n`;
	}
	
	result += "</table>\n";
	result += `<p>Amount owed is <em>${usd(data.totalAmount/100)}</em></p>\n`;
	result += `<p>You earned <em>${data.totalVolumeCredits}</em> credits</p>\n`;
	return result;
}

/**
 * 格式化货币数字
 *
 * @param aNumber 货币数字
 * @return 格式化后的货币数字
 */
function usd(aNumber) {
	return new Intl.NumberFormat("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2}).format(aNumber);
}

createStatementData.js：

/**
 * 计算账单数据
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
export default function createStatementData(invoice, plays) {
	const result = {};
	result.customer = invoice.customer;
	result.performances = invoice.performances.map(enrichPerformance);
	result.totalAmount = totalAmount(result);
	result.totalVolumeCredits = totalVolumeCredits(result);
	return result;
	
	/**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = playFor(result);
		result.amount = amountFor(result);
		result.volumeCredits = volumeCreditsFor(result);
		return result;
		
		/**
		 * 得到一场表演的剧目
		 *
		 * @param aPerformance 一场表演
		 * @return 剧目
		 */
		function playFor(aPerformance) {
			return plays[aPerformance.playID];
		}
		
		/**
		 * 计算一场表演的金额
		 *
		 * @param aPerformance 一场表演
		 */
		function amountFor(aPerformance) {
			let result = 0;				// 待支付的金额
				
			// 计算金额
			switch (aPerformance.play.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:${aPerformance.play.type}');
			}
			
			return result;
		}
		
		/**
		 * 计算观众量积分
		 *
		 * @param aPerformance 一场表演
		 */
		function volumeCreditsFor(aPerformance) {
			let result = 0;
			result += Math.max(aPerformance.audience - 30, 0);
			if ("comedy" === aPerformance.play.type) {
				result += Math.floor(aPerformance.audience / 5);
			}
			return result;
		}
	}
	
	/**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits(data) {
		return result.performances.reduce((total, p) => total + p.volumeCredits, 0);
	}

	/**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount(data) {
		return result.performances.reduce((total, p) => total + p.amount, 0);
	}
}

运行结果：
在这里插入图片描述
做完修改立刻测试并且保存到本地的git。
我们添加html版本的功能已经很容易了，无需重复计算部分的逻辑。

4、按类型重组计算过程

我们终于完成了第一个需求，下面要解决演员的努力问题了。。。
支持更多类型的戏剧，我们需要amountFor添加switch的分支，这种分支很容易随着代码堆积而腐坏。
解决方法有许多，这里我们使用类型多态来解决这个问题（毕竟这个早就接触过了）。
我们需要建立一个继承体系，目前有两个子类：喜剧和悲剧，子类包含各自的计算逻辑，使用以多态取代条件表达式。
再看我们现在的代码，我们可以直接忽略关于格式化的代码，只要不改变中转的数据结构就行了。

我们给新的类们起个名字叫计数器。（29）
createStatementData.js：

/**
 * 计算器基类
 */
class PerformanceCalculator {
	constructor(aPerformance, aPlay) {
		this.performance = aPerformance;
		this.play = aPlay;
	}
}

	/**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const calculator = new PerformanceCalculator(aPerformance, playFor(aPerformance));
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = calculator.play;
		result.amount = amountFor(result);
		result.volumeCredits = volumeCreditsFor(result);
		return result;
	}

做完修改立刻测试并且保存到本地的git。

将函数搬移进计数器（30）：
createStatementData.js：

/**
 * 计算器基类
 */
class PerformanceCalculator {
	constructor(aPerformance, aPlay) {
		this.performance = aPerformance;
		this.play = aPlay;
	}

	get amount() {
		let result = 0;				// 待支付的金额
				
		// 计算金额
		switch (this.play.type) {
			case "tragedy" :
				result = 40000;
				if (this.performance.audience > 30) {
					result += 1000 * (this.performance.audience - 30);
				}
				break;
			case "comedy" :
				result = 30000;
				if (this.performance.audience > 20) {
					result += 10000 + 500 * (this.performance.audience - 20);
				}
				result += 300 * this.performance.audience;
				break;
			default:
				throw new Error('unknown type:${this.play.type}');
		}
		
		return result;
	}

	get volumeCredits() {
		let result = 0;
		result += Math.max(this.performance.audience - 30, 0);
		if ("comedy" === this.play.type) {
			result += Math.floor(this.performance.audience / 5);
		}
		return result;
	}
}

	/**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const calculator = new PerformanceCalculator(aPerformance, playFor(aPerformance));
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = calculator.play;
		result.amount = calculator.amount;
		result.volumeCredits = calculator.volumeCredits;
		return result;
	}

做完修改立刻测试并且保存到本地的git。

让计算器表现出多态性，以子类取代类型码（31）：
createStatementData.js：

/**
 * 计算器基类
 */
class PerformanceCalculator {
	constructor(aPerformance, aPlay) {
		this.performance = aPerformance;
		this.play = aPlay;
	}

	get volumeCredits() {
		return Math.max(this.performance.audience - 30, 0);
	}
}

/**
 * 悲剧 计算器子类
 */
class TragedyCalculator extends PerformanceCalculator {
	get amount() {
		let result = 40000;
		if (this.performance.audience > 30) {
			result += 1000 * (this.performance.audience - 30);
		}
		return result;
	}
}

/**
 * 喜剧 计算器子类
 */
class ComedyCalculator extends PerformanceCalculator {
	get amount() {
		let result = 30000;
		if (this.performance.audience > 20) {
			result += 10000 + 500 * (this.performance.audience - 20);
		}
		result += 300 * this.performance.audience;
		return result;
	}

	get volumeCredits() {
		return super.volumeCredits + Math.floor(this.performance.audience / 5);
	}
}

/**
 * 计算器工厂
 */
function createPerformanceCalculator(aPerformance, aPlay) {
	switch (aPlay.type) {
		case "tragedy" : return new TragedyCalculator(aPerformance, aPlay);
		case "comedy" : return new ComedyCalculator(aPerformance, aPlay);
		default: throw new Error('unknown type:${aPlay.type}');
	}
}

/**
 * 计算账单数据
 *
 * @param invoice 账单
 * @param plays 所有的剧目
 * @return 待打印的字符串
 */
export default function createStatementData(invoice, plays) {
	const result = {};
	result.customer = invoice.customer;
	result.performances = invoice.performances.map(enrichPerformance);
	result.totalAmount = totalAmount(result);
	result.totalVolumeCredits = totalVolumeCredits(result);
	return result;
	
	/**
	 * map映射函数
	 */
	function enrichPerformance(aPerformance) {
		const calculator = createPerformanceCalculator(aPerformance, playFor(aPerformance));
		const result = Object.assign({}, aPerformance);	// 浅拷贝
		result.play = calculator.play;
		result.amount = calculator.amount;
		result.volumeCredits = calculator.volumeCredits;
		return result;
		
		/**
		 * 得到一场表演的剧目
		 *
		 * @param aPerformance 一场表演
		 * @return 剧目
		 */
		function playFor(aPerformance) {
			return plays[aPerformance.playID];
		}
	}
	
	/**
	 * 计算观众量积分
	 *
	 * @return 观众量积分
	 */
	function totalVolumeCredits(data) {
		return result.performances.reduce((total, p) => total + p.volumeCredits, 0);
	}

	/**
	 * 计算金额
	 *
	 * @return 金额
	 */
	function totalAmount(data) {
		return result.performances.reduce((total, p) => total + p.amount, 0);
	}
}

做完修改立刻测试并且保存到本地的git。

我们终于把代码改成适于添加新剧种的结构，不同剧种的运算逻辑全都集中到了一处。添加一个新剧种就只要添加一个新的子类，并且在工厂中返回它。

什么算好的代码，作者提倡的标准就是人们是否能轻而易举地修改它。

第二章 重构的原则

  1. 重构的定义
    • （名词形式）对软件内部结构的一种调整，目的是在不改变软件可察行为的前提下，提高可理解性，降低修改成本。
    • （动词形式）使用一些列重构手法，在不改变软件可观察行为的前提下，调整其结构。
  2. 软件开发的两顶帽子
    • 添加新功能时，不应该修改既有代码，只管添加新功能并通过测试。（做到这个太难了）
    • 重构时不再添加新功能，只管改进程序结构，并通过已有测试。
  3. 为何重构
    • 重构改进软件设计（Design）消除重复代码，我就可以确定所有事物和行为在代码中只表述一次。
    • 重构使软件更容易理解（Maintain）好让以后接手的人看得懂
    • 重构帮助找到BUG（Debug）顺着计算机的稍微走一遍，大部分bug就能解决
    • 重构提高编程速度（Efficiency）添加新的功能时候顾虑少一点，思路清晰
  4. 何时重构
    • 事不过三，三则重构
    • 预备性重构：添加新的功能时更加容易，让修改多处的代码变成修改一处
    • 帮助理解的重构：使代码更容易懂，让代码做到一目了然
    • 捡垃圾式重构：复审代码时感觉不好 如果有时间就改了
    • 有计划的重构：一般都是有了重大问题
    • 长期重构：先把要重构的地方放着，如果有人遇到要重构的地方就改，因为小修改后系统功能不变
  5. 何时不该重构
    • 既有代码太混乱，且不能正常工作，需要重写而不是重构。
    • 如果不需要修改那些代码就不要重构。
    • 项目接近最后期限时，应该避免重构。
  6. 重构的目标
为什么程序如此难以相与？设计与重构的目标
难以阅读的程序，难以修改容易阅读
逻辑重复的程序，难以修改所有逻辑都只在唯一地点指定
添加新行为时需要修改已有代码的程序，难以修改新的改动不会危及现有行为
带复杂条件逻辑的程序，难以修改尽可能简单表达条件逻辑
  1. 代码应该有一套完整的测试套件，并且运行速度要快。
  2. 先写出可调优的软件，然后调优它以求得足够的速度。

第三章 代码的坏味道

我觉得这一章的内容非常重要，识别出代码的坏味道，是开始正确重构的前提。

  1. 神秘命名
    命名这东西刚开始学编程的时候就很是个问题，abcd，xxx1234，拼音缩写等等，什么妖魔鬼怪都有，看别人的代码看到这些东西真的会头大。我自己一开始也用a1、a2什么的，过了几天就不知道我在写什么了。一个好名字能清晰表明自己的功能和用法。
    如果你想不出什么好名字，有可能背后还隐藏着更深的设计问题。

  2. 重复代码
    如果要修改重复代码，必须找出所有相关的副本来修改，想想就很累，还很容易出错，需设法提炼成函数。

  3. 过长函数
    函数越长，越难理解。给小函数良好的命名，阅读代码的人就可以通过名字了解函数的作用，根本不必去看其中写了什么。妙啊！
    每当感觉方法的某个地方需要注释来加以说明，可以把这部分代码放入一个独立的方法中，并以用途（而不是实现手法）来命名方法。
    条件表达式和循环常常也是提炼的信号。

  4. 过长参数列表
    不用参数就只能选择全局数据，这肯定是不可取的。
    改善的几点方法：

    • 如果可以向某个参数发起查询获得另一个参数的值，就用以查询取代参数。
    • 如果正在从现有的数据结构中抽取很多数据项，就保持对象完整。
    • 如果几个参数总是同时出现，就用引入参数对象。
    • 如果某个参数被用作区分函数行为的标记，可以使用移除标记参数。

  5. 全局数据
    全局数据的问题在于：从代码库任何一个角落都可以修改它。
    把全局数量用一个函数包装起来，并控制对其的访问，最好搬移到一个类或者模块中，控制其作用域。

  6. 可变数据
    在一处更新数据，却没有意识到软件中另一处期望着完全不同的数据，于是一个功能失效了。
    函数式编程–建立在“数据永不改变”的概念基础上：如果要更改一个数据结构，就返回一份新的数据副本，旧的数据仍保持不变。

  7. 发散式变化
    因为不同的原因，在不同的方向上，修改同一个模块。
    最近有点体会，多层结构系统，往往容易把全部逻辑都放在Service层，导致Service类非常庞大且不断被修改。

  8. 霰弹式修改
    每遇到某种变化，需要在多个类内做出许多小修改，容易遗漏。应该把需要修改的部分放到一处。

  9. 依恋情结
    函数和另一个模块中的函数或者数据交流频繁，远多于自己所处模块内部交流。最好将此函数移动到那个模块中。

  10. 数据泥团
    在很多地方看到相同的三四项数据，如果删掉其中一项，其他数据也没有意义，那就应该为它们产生一个新的对象。

  11. 基本类型偏执
    创建和自己的问题域有用的基本类型，不要简单用字符串等替代。

  12. 重复switch
    每当想要增加一个选择分支，必须找到所有的switch，并逐一更新。可以使用多态来解决。

  13. 循环语句
    用管道代替循环可以帮助我们更快看清被处理的元素以及处理它们的动作。

  14. 冗赘的元素
    如果一个类不值得存在，那么它就应该消失。

  15. 夸夸其谈通用性
    如果函数和类的唯一用户是测试案例，那就先删掉测试，然后移除死代码。

  16. 临时字段
    类中某个字段只为某些特殊情况而设置。

  17. 过长的消息链
    一个对象请求另一个对象，然后再请求另一个对象。。。代码与查找过程中的导航结构紧密耦合，一旦对象之间的关系发生任何变化，代码就不得不发生改变。

  18. 中间人
    某个类的接口有一半的函数都委托给其他类，就应该移除这个中间人。

  19. 内幕交易
    模块之间的数据交换很难完全避免，应该都放到明面上来。

  20. 过大的类
    类的设计应当遵循单一职责原则。

  21. 异曲同工的类
    类的替换要保持接口一致。

  22. 纯数据类
    把数据处理搬移到纯数据类中，除非被用作const返回值。

  23. 被拒绝的遗赠
    子类继承父类的所有函数和数据，子类只挑选几样来使用。为子类新建一个兄弟类，再运用下移方法和下移字段把用不到的函数下推个兄弟类。
    子类只复用了父类的行为，却不想支持父类的接口。运用委托替代继承来达到目的。

  24. 注释
    注释不是用来补救劣质代码的，事实上如果我们去除了代码中的所有坏味道，当劣质代码都被移除的时候，注释已经变得多余，因为代码已经讲清楚了一切。

第四章 构筑测试体系

  • 要正确地进行重构，前提是有一套稳固的测试集合，以帮助我发现难以避免的疏漏。
  • 编写优良的测试程序，可以极大提高编程速度。
  • 我们一开始写一些代码喜欢把结果输出到屏幕上 然后逐一检测，这些完全可以让计算机来做，我们要做的就是把期望的输出放到测试代码中，然后做一个对比就行了。
  • 编写测试代码其实就是在自己：为了添加功能我需要实现些什么？还能帮我把注意力剧种到接口而非实现。
  • 测试驱动开发----先编写一个失败的测试，编写代码使测试通过，然后进行重构以保证代码整洁。

其他章节建议看书，我感觉书上内容已经不太能够压缩了，等我以后有更多的感悟再来记录。

百度云链接

完整代码：https://pan.baidu.com/s/11AVSyjZcCgwby8BTxM_4uw
提取码：0nil

xiaoxiao涛
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
重构：改善既有代码的设计（第二版）笔记总结
小菜的博客
05-03 605
重构，第一个示例 为何，以及如何提炼一个函数 如何处理过长的函数 A First Set of Refactorings Split Phase Encapsulate Variable let defaultOwner = { firstName: "Martin", lastName: "Fowler" }; // after encapsulate variable let defaultOwnerData = { firstName: "Martin", lastName: "Fowler"
推荐开源项目：《重构 改善既有代码的设计第二版》中文版 - book-refactoring2
gitblog_00068的博客
06-01 339
推荐开源项目：《重构 改善既有代码的设计第二版》中文版 - book-refactoring2 项目地址:https://gitcode.com/MwumLi/book-refactoring2 项目介绍 在编程世界中，高质量的代码设计是关键。《重构 改善既有代码的设计第二版》是一本经典的技术著作，由 Martin Fowler 编著，旨在帮助开发者提升代码质量和可维护性。此项目提供了这本书的中文...
[读书笔记] 重构 - 改善既有代码的设计第二版
Young's Blog
12-02 686
refactoring-cheat-sheet 《重构 改善既有代码的设计第二版》中文版 注意：《重构》书籍中的代码示范，有些展示的不合理，没有与文字解释同步好 第 1 章 重构，第一个示例 将业务流转逻辑与计算逻辑拆分，简单点说，流转逻辑中使用的计算参数使用计算函数进行拆分出来，消除局部变量。 在重构和添加新特性之间寻找平衡。 重复的代码片段需要进行提取，抽象成公共的函数，便于维护。 代码复审有助于在开发团队中传播知识，也有助于让较有经验的开发者把知识传递给比较欠缺经验的人，并帮助更多人理解大型软件系.
《重构：改善既有代码设计》读书笔记
someby的博客
12-31 499
目录 第一章 重构，第一个案例 第二章 重构原则 第三章 代码中的坏味道 第四章 构筑测试体系 第五章 重构列表 第六章 重新组织函数 6.1 Extract Method（提炼函数） 6.2 Inline Method（内联函数） 6.3 Inline Temp (内联临时变量) 6.4 Replace Temp with Query (以查询取代临时变量) 6.5 Int...
【读书笔记】重构 改善既有代码的设计
lbh_paopao的博客
05-31 491
重构（refactoring）是这样一个过程：在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构
重构，改善既有代码的设计（第2版）读书笔记
妙法化城
03-08 590
背景 如同改代码、阅读代码，我们需要明确自己所工作的GIT仓库对应的分支一样，我们也记录下所阅读的书籍信息。 书名：《重构，改善既有代码的设计（第2版）》 作者：【美】马丁•福勒（Marthin Fowler）著 译者：熊节 林从羽 译 出版社：中国工信出版集团 人民邮电出版社 印刷版次：2019年5月第1版 说明 在阅读本笔记时如果发现有任何不合适的地方欢迎评论，因为每个人对同一...
《重构：改善既有代码的设计》读书笔记(上)
行走
07-02 1105
重构：改善既有代码的设计
《重构-改善既有代码的设计》读书笔记
在路上
04-12 1331
重构,第一个案例 1.1 起点 如果发现现有的代码结构使你无法很方便地添加新特性,那就先重构,使特性的添加比较容易进行后,再添加特性; 1.2 重构的第一步 为即将修改的代码建立可靠的测试环境 – 是人就会犯错,所以需要可靠的测试; 测试结果能够自我检验 – 成功”OK”,失败列出失败清单并打印行号 (自动化对比测试结果是提高效率的前提); 1.3 分解并重组”巨型
重构：改善既有代码的设计 阅读笔记
Coding for freedom
08-30 654
程序有两面价值：“今天可以为你做什么”和“明天可以为你做什么”。大多数时候，我们只关注自己今天想要程序做什么。不论是修复错误或是添加特性，我们都是为了让程序能力更强，让它在今天更有价值。但是系统当下的行为，只是整个故事的一部分，如果没有认清这一点，你无法长期从事编程工作。如果你为求完成今天的任务而不择手段，导致不可能在明天完成明天的任务，那么最终还是会失败。但是，你知道自己今天需要什么，却不一定知道自己明天需要什么。也许你可以猜到明天的需求，也许吧，但肯定还是有些事情出乎你的意料。.........
[读书笔记] 重构改善既有代码的设计（2）
beyongwang的博客
02-26 539
整理第三章的内容，关于代码的坏味道，这些往往也是可以进行重构的信号。 1. 重复代码。这个是非常常见的代码结构问题，这样的代码问题也很明显：难以维护，重复代码意味着当一份代码改动时，另一份也必须做出相应的改动，否则就会出现不一致的问题。这种情况应该提取共同代码。 2. 过长函数。函数过长意味着函数很复杂，处理了好多内容，违背单一职责，同时，程序愈长愈时难以理解，也很难为其起一个合适的可以表其意的
重构改善既有代码的设计第2版.pdf
10-27
重构改善既有代码的设计第2版.pdf 本书主要讨论了如何通过重构来改善既有代码的设计，提高代码的可维护性、可读性和可扩展性。下面是对书中重要的知识点的总结： 1. 重构的定义和重要性：重构是指对既有代码的修改...
重构改善既有代码的设计PPT课件
03-28
重构是软件开发过程中的一个重要环节，它关注于改善已有代码的设计，以提高代码的可读性和维护性，同时保持原有功能不变。通过重构，程序员能够更有效地管理代码，提升开发效率，减少错误，并促进团队成员之间的沟通...
重构_重构_改善既有代码_
10-03
《重构：改善既有代码设计》是一本由Martin Fowler所著的经典IT著作，它详细阐述了在软件开发过程中如何通过重构来提升代码质量、可读性和维护性。重构是一种系统性的方法，旨在不改变软件外在行为的前提下，改进其...
重构 改善既有代码的设计 中文高清完整版pdf
01-29
《重构 改善既有代码的设计》清晰揭示了重构的过程，解释了重构的原理和实践方式，并给出了何时以及何地应该开始挖掘代码以求改善。书中给出了70 多个可行的重构，每个重构都介绍了一种经过验证的代码变换手法的动机...
重构-改善既有代码的设计-课件.ppt
04-16
重构是对软件内部结构的一种调整，目的是在不改变外部行为的前提下，提高可理解性,降低修改成本。 重构是严谨、有序地对完成的代码进行整理从而减少出错的一种方法。
vscode的插件使用
热门推荐
c++小白的博客
06-13 1万+
安装插件更改插件安装位置同步配置让文件类型一目了然管理项目格式化代码一键搭建各类语言的学习测试环境 更改插件安装位置 因为默认安装在C:\Users\用户名.vscode\extensions，占c盘目录，所以就找个d盘目录存放插件。 先新建一个快捷键 打开快捷键的属性 在打开时指定插件目录 --extensions-dir 路径 之后下载的插件就在设置的目录下面了 同步配置 使用Gi...
Java 代码规范if嵌套
m0_72958694的博客
07-25 358
在Java编程中，过度的if嵌套会使代码难以阅读和维护。为了遵循良好的代码规范，我们应尽量减少嵌套的深度。这通常可以通过重新组织代码或使用其他结构（如switch语句，或者将逻辑封装到单独的方法中）来实现。本文详细介绍了减少if嵌套的示例。
mpu6050陀螺仪使用方法开发教程文档.docx
最新发布
07-30
mpu6050陀螺仪使用方法
马丁·福勒重构PDF：改善既有代码设计中文版
"重构 改善既有代码的设计 中文高清晰版 PDF" 本书《重构：改善既有代码的设计》是由美国著名软件开发专家Martin Fowler所著，由侯捷和熊节翻译成中文。这本书是软件开发领域的一部经典之作，主要探讨了如何通过一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值