重构改善既有代码的设计(第二版) 第一章 整理

JS 专栏收录该内容
15 篇文章 1 订阅
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)
})
  • 4
    点赞
  • 2
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

第1章 重构第一个案例 1.1 起点 1.2 重构第一步 1.3 分解并重组Statemen 1.4 运用多态取代与价格相关的条件逻辑 1.5 结语 第2章 重构原则 2.1 何谓重构 2.2 为何重构 2.3 何时重构 2.4 怎么对经理说 2.5 重构的难题 2.6 重构设计 2.7 重构与性能 2.8 重构起源何处 第3章 代码的坏味道 3.1 Duplicated Code(重复的代码) 3.2 Long Method(过长函数) 3.3 Large Class(过大类) 3.4 Long Parameter List(过长参数列) 3.5 Divergent Change(发散式变化) 3.6 Shortgun Surgery(霰弹式修改) 3.7 Feature Envy(依恋情结) 3.8 Data Clumps(数据泥团) 3.9 Primitive Obsession(基本型别偏执) 3.10 Switch Statements(switch惊悚现身) 3.11 Parallel Inheritance Hierarchies(平行继承体系) 3.12 Lazy Class(冗赘类) 3.13 Speculative Generality(夸夸其谈未来性) 3.14 Temporary Field(令人迷惑的暂时值域) 3.15 Message Chai (过度耦合的消息链) 3.16 Middle Man(中间转手人) 3.17 Inappropriate Intimacy(狎昵关系) 3.18 Alternative Classes with Different Interfaces(异曲同工的类) 3.19 Incomplete Library Class(不完善的程序库类) 3.20 Data Class(纯稚的数据类) 3.21 Refused Bequest(被拒绝的遗赠) 3.22 Comments(过多的注释) 第4章 建立测试体系 4.1 自我测试码的价值 4.2 JUnit测试框架 4.3 添加更多测试 第5章 重构名录 5.1 重构的记录格式 5.2 寻找引用点 5.3 这些重构准则有多成熟 第6章 重新组织你的函数 6.1 Extract Method(提炼函数) 6.2 Inline Method(将函数内联化) 6.3 Inline Temp(将临时变量内联化) 6.4 Replace Temp With Query(以查询取代临时变量) 6.5 Introduce Explaining Variable(引入解释性变量) 6.6 Split Temporary Variable(剖解临时变量) 6.7 Remove Assignments to Paramete (移除对参数的赋值动作) 6.8 Replace Method with Method Object(以函数对象取代函数) 6.9 Substitute Algorithm(替换你的算法) 第7章 在对象之间移动特性 7.1 Move Method(搬移函数) 7.2 Move Field(搬移值域) 7.3 Extract Class(提炼类) 7.4 Inline Class(将类内联化) 7.5 Hide Delegate(隐藏「委托关系」) 7.6 Remove Middle Man(移除中间人) 7.7 Introduce Foreign Method(引入外加函数) 7.8 Introduce Local Exte ion(引入本地扩展) 第8章 重新组织你的数据 8.1 Self Encapsulate Field(自封装值域) 8.2 Replace Data Value with Object(以对象取代数据值) 8.3 Change Value to Reference(将实值对象改为引用对象) 8.4 Change Reference to Value(将引用对象改为实值对象) 8.5 Replace Array with Object(以对象取代数组) 8.6 Duplicate Observed Data(复制「被监视数据」) 8.7 Change Unidirectional Association to Bidirectional(将单向关联改为双向) 8.8 Change Bidirectional Association to Unidirectional(将双向关联改为单向) 8.9 Replace Magic Number with Symbolic Co tant (以符号常量/字面常量 取代魔法数) 8.10 Encapsulate Field(封装值域) 8.11 Encapsulate Collection(封装群集) 8.12 Replace Record with Data Class(以数据类取代记录) 8.13 Replace Type Code with Class(以类取代型别码) 8.14 Replace Type Code with Subclasses (以子类取代型别码) 8.15 Replace Type Code with State/Strategy (以State/Strategy取代型别码) 8.16 Replace Subclass with Fields(以值域取代子类) 第9章 简化条件表达式 9.1 Decompose Conditional(分解条件式) 9.2 Co olidate Conditional Expression(合并条件式) 9.3 Co olidate Duplicate Conditional Fragments (合并重复的条件片段) 9.4 Remove Control Flag(移除控制标记) 9.5 Replace Nested Conditional with Guard Clauses (以卫语句取代嵌套条件式) 9.6 Replace Conditional with Polymorphism(以多态取代条件式) 9.7 Introduce Null Object(引入Null对象) 9.8 Introduce Assertion(引入断言) 第10章 简化函数呼叫 10.1 Rename Method(重新命名函数) 10.2 Add Parameter(添加参数) 10.3 Remove Parameter(移除参数) 10.4 Separate Query from Modifier(将查询函数和修改函数分离) 10.5 Parameterize Method(令函数携带参数) 10.6 Replace Parameter with Explicit Methods(以明确函数取代参数) 10.7 Preserve Whole Object(保持对象完整) 10.8 Replace Parameter with Method(以函数取代参数) 10.9 Introduce Parameter Object(引入参数对象) 10.10 Remove Setting Method(移除设值函数) 10.11 Hide Method(隐藏你的函数) 10.12 Replace Co tructor with Factory Method(以工厂方法取代构造函数) 10.13 Encapsulate Downcast(封装「向下转型」动作) 10.14 Replace Error Code with Exception(以异常取代错误码) 10.15 Replace Exception with Test(以测试取代异常) 第11章 处理概括关系 11.1 Pull Up Field(值域上移) 11.2 Pull Up Method(函数上移) 11.3 Pull Up Co tructor Body(构造函数本体上移) 11.4 Push Down Method(函数下移) 11.5 Push Down Field(值域下移) 11.6 Extract Subclass(提炼子类) 11.7 Extract Superclass(提炼超类) 11.8 Extract Interface(提炼接口) 11.9 Collapse Hierarchy(折叠继承体系) 11.10 Form Template Method(塑造模板函数) 11.11 Replace Inheritance with Delegation(以委托取代继承) 11.12 Replace Delegation with Inheritance(以继承取代委托) 第12章 大型重构 12.1 Tease Apart Inheritance(疏理并分解继承体系) 12.2 Convert Procedural Design to Objects(将过程化设计转化为对象设计) 12.3 Separate Domain from Presentation(将领域和表述/显示分离) 12.4 Extract Hierarchy(提炼继承体系) 第13章 重构,复用,与现实 13.1 现实的检验 13.2 为什么开发者不愿意重构他们的程序 13.3 再论现实的检验 13.4 重构的资源和参考数据 13.5 从重构联想到软件复用和技术传播 13.6 结语 13.7 参考文献 第14章 重构工具 14.1 使用工具进行重构 14.2 重构工具的技术标准 14.3 重构工具的实用标准 14.4 小结 第15章 总结 参考书目 要点列表 索引
评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

潇蓝诺依

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值