let plays = {
"hamlet": {"name": "Hamlet", "type": "tragedy"},
"as-like": {"name": "As You Like It", "type": "comedy"},
"othello": {"name": "Othello", "type": "tragedy"}
};
let invoice = {
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 credits
volumeCredits += Math.max(perf.audience - 30, 0);
// add extra credit for every ten comedy attendees
if ("comedy" === play.type) volumeCredits += Math.floor(perf.audience / 5);
// print line for this order
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`;
console.log(result)
return result;
}
statement(invoice, plays)
提炼函数,删除play变量 play–>function playFor(aPerformance)
移除volumeCredits变量
4. 拆分循环
5. 移动语句
6. 提炼函数
7. 移除内联变量
添加一个数据结构 statementData,将customer,performances添加到此数据结构中。这样可以移除renderPlainText函数的invoice变量。
剧目名称也存在statementData数据对象中。
替换renderPlainText中所有playFor的引用
同样的方法,将amount,volumeCredits提取出来。
statement.js
import createStatementData from "./createStatementData";
let plays = {
"hamlet": { "name": "Hamlet", "type": "tragedy" },
"as-like": { "name": "As You Like It", "type": "comedy" },
"othello": { "name": "Othello", "type": "tragedy" }
};
let invoice =
{
customer: "BigCo",
performances: [
{
playID: "hamlet",
audience: 55
},
{
playID: "as-like",
audience: 35
},
{
playID: "othello",
audience: 40
}
]
};
function statement(invoice,plays){
return renderPlainText(createStatementData(invoice,plays));
}
//打印订单
function renderPlainText(data) {
let result = `Statement for ${data.customer}\n`;
for (let perf of data.performances) {
result += ` ${perf.play.name}: ${usd(perf.amount)} (${perf.audience} seats)\n`;
}
result += `Amount owed is ${usd(data.totalAmount)}\n`;
result += `You earned ${data.totalVolumeCredits} credits\n`;
console.log('text\n',result)
return result;
}
function htmlStatement (invoice, plays) {
return renderHtml(createStatementData(invoice, plays));
}
function renderHtml (data) {
let result = `Statement for
${data.customer}\n`;
result += "\n";
result += "play seats cost ";
for (let perf of data.performances) {
result += ` ${perf.play.name} ${perf.audience} `;
result += `${usd(perf.amount)} \n`;
}
result += "
\n";
result += `Amount owed is
${usd(data.totalAmount)}\n`;
result += `You earned
${data.totalVolumeCredits} credits\n`;
console.log('html\n',result)
return result;
}
//格式化数字货币
function usd(aNumber) {
return new Intl.NumberFormat("en-US",
{
style: "currency", currency: "USD",
minimumFractionDigits: 2
}).format(aNumber / 100);
}
statement(invoice, plays)
htmlStatement(invoice, plays)
createStatementData.js
export default 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;
//performances对象副本
function enrichPerformance(aPerformance) {
const result = Object.assign({}, aPerformance);
result.play = playFor(result);
result.amount = amountFor(result);
result.volumeCredits = volumeCreditsFor(result);
return result;
}
//剧目名称
function playFor(aPerformance) {
return plays[aPerformance.playID];
}
//计算演出费用
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;
}
//观众量积分
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;
}
//观众量积分总和
function totalVolumeCredits(data) {
return data.performances.reduce((total, p) => total + p.volumeCredits, 0);
}
// 总账单
function totalAmount(data) {
return data.performances.reduce((total, p) => total + p.amount, 0);
}
}
纯js文件无法使用export、import,所以使用了打包工具webpack,也可以使用其他。(也可以直接使用require)
//package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^2.0.2",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
statement: './src/statement.js'
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ template: './index.html' })
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
npm install
安装
npm run start
可在网页的控制台看到输出
以下更改的为createStatementData.js文件
将函数搬进演出计算器
将amountFor函数代码,移到PerformanceCalculator演出计算器中,并修改参数(aPerformance ->this.performance,playFor(aPerformance)->this.play)
将amountFor改成委托函数
引用处修改
同样的方法,将volumeCredits
将volumeCreditsFor函数代码,移到PerformanceCalculator演出计算器中,并修改参数。
工厂函数取代构造函数
创建子类
观众量积分
我注意到大多数戏剧都会检查观众是否超过30,只有一些不同。因此,将更为通用的逻辑放到超类作为默认条件,出现在特殊场景时,覆盖它。
statement.js未做修改,在上面有代码。
createStatementData.js最终代码
//演出计算器
class PerformanceCalculator {
constructor(aPerformance, aPlay) {
this.performance = aPerformance;
this.play = aPlay;
}
get amount() {
throw new Error('subclass responsibility子类任务');
}
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}`);
}
}
export default 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;
//performances对象副本
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;
}
//剧目名称
function playFor(aPerformance) {
return plays[aPerformance.playID];
}
//观众量积分总和
function totalVolumeCredits(data) {
return data.performances.reduce((total, p) => total + p.volumeCredits, 0);
}
// 总账单
function totalAmount(data) {
return data.performances.reduce((total, p) => total + p.amount, 0);
}
}
正常工作时invoice应该是数组
invoice.forEach(item => {
statement(item, plays)
htmlStatement(item, plays)
})