重构手法探索器

RefactoringExplorer

学习常见的重构手法,对比重构前后的代码差异,理解重构的收益。对应《重构》。

重构手法探索器

学习常见的重构手法,对比重构前后的代码差异

重构前

function printOwing(invoice) {
  let outstanding = 0;
  
  console.log("***********************");
  console.log("**** Customer Owes ****");
  console.log("***********************");
  
  // calculate outstanding
  for (const order of invoice.orders) {
    outstanding += order.amount;
  }
  
  // record due date
  const today = Clock.today;
  invoice.dueDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
  
  // print details
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${outstanding}`);
}

重构后

function printOwing(invoice) {
  recordDueDate(invoice);
  printDetails(invoice, calculateOutstanding(invoice));
}

function calculateOutstanding(invoice) {
  let result = 0;
  for (const order of invoice.orders) {
    result += order.amount;
  }
  return result;
}

function recordDueDate(invoice) {
  const today = Clock.today;
  invoice.dueDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
}

function printDetails(invoice, outstanding) {
  printBanner();
  console.log(`name: ${invoice.customer}`);
  console.log(`amount: ${outstanding}`);
}

function printBanner() {
  console.log("***********************");
  console.log("**** Customer Owes ****");
  console.log("***********************");
}

提取函数 (Extract Function)

将一段代码提取为独立函数,提高可读性和可复用性

提高代码可读性减少重复代码便于单元测试职责更清晰

使用说明

  • •调整参数观察行为变化,实时反馈
  • •状态自动编码到 URL,可直接分享给他人
  • •支持键盘操作(Tab 切换、方向键调整)