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)

开始

1. 提炼函数，删除thisAmount变量 thisAmount–>function amountFor(perf,play)
2. 修改函数内部变量名
   1. thisAmount–>result
   2. perf -->aPerformance(a代表类型)

提炼函数，删除play变量 play–>function playFor(aPerformance)

1. 提炼函数，volumeCredits–>function volumeCreditsFor(perf)
2. 提炼函数，删除format变量 format–>function usd(aNumber)

移除volumeCredits变量

4. 拆分循环
5. 移动语句
6. 提炼函数
7. 移除内联变量

同样的过程，删除totalAmount，result

目前代码

添加一个数据结构 statementData,将customer，performances添加到此数据结构中。这样可以移除renderPlainText函数的invoice变量。

剧目名称也存在statementData数据对象中。

替换renderPlainText中所有playFor的引用

同样的方法，将amount，volumeCredits提取出来。

并将两个求总和的函数提取到statement函数中。

以管道取代循环

将数据和打印函数分离，将打印函数提取到外层。

拆分代码为两个文件

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 = `<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>`;
    result += `<td>${
      usd(perf.amount)}</td></tr>\n`;
  }
  result += "</table>\n";
  result += `<p>Amount owed is <em>${
      usd(data.totalAmount)}</em></p>\n`;
  result += `<p>You earned <em>${
      data.totalVolumeCredits}</em> credits</p>\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)
})