关于javascript:JavaScript重构

如果你须要花工夫浏览一段代码能力弄清它到底在干什么，那么就应该将其提炼到一个函数中，并依据它所做的事为其命名。

发明一个新函数，依据这个函数的用意来对它命名
将待提炼的代码从源函数复制到新建的指标函数中。
仔细检查提炼出的代码，看看其中是否援用了作用域限于源函数、在提炼出的新函数中拜访不到的变量。若是，以参数的模式将它们传递给新函数。
所有变量都解决完之后，编译。
在源函数中，将被提炼代码段替换为对指标函数的调用。
测试。
查看其余代码是否有与被提炼的代码段雷同或类似之处。如果有，思考应用以函数调用取代内联代码，令其调用提炼出的新函数。

function printOwing(invoice) {  
  let outstanding = 0;

  // calculate outstanding
  for (const o of invoice.orders) {outstanding += o.amount;}
  
  // record due date
  const today = Clock.today;
  invoice.dueDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 30);
  console.log(`name: ${invoice.customer}`);   
  console.log(`amount: ${outstanding}`);
  console.log(`due: ${invoice.dueDate.toLocaleDateString()}`); 
}


// 重构
function printOwing(invoice) {let outstanding = calculateOutstanding(invoice)
  recordDueDate(invoice)
  printDetails(invoice, outstanding)
}

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

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

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

如果代码中有太多间接层，使得零碎中的所有函数都仿佛只是对另一个函数的简略委托，造成我在这些委托动作之间昏头昏脑，那么我通常都会应用内联函数。

查看函数，确定它不具多态性。
找出这个函数的所有调用点。
将这个函数的所有调用点都替换为函数本体。
每次替换之后，执行测试。
删除该函数的定义。

function reportLines(aCustomer) {const lines = [];  
  gatherCustomerData(lines, aCustomer);  
  return lines;
}

function gatherCustomerData(out, aCustomer) {out.push(["name", aCustomer.name]);  
  out.push(["location", aCustomer.location]); 
}


// 重构
function reportLines(aCustomer) {const lines = [];
     lines.push(["name", aCustomer.name]);  
  lines.push(["location", aCustomer.location]);  
  return lines;
}

表达式有可能非常复杂而难以浏览。

确认要提炼的表达式没有副作用。
申明一个不可批改的变量，把你想要提炼的表达式复制一份，以该表达式的后果值给这个变量赋值。
用这个新变量取代原来的表达式。
测试。

在一个函数中，将它们提炼成变量

function price(order) {return order.quantity * order.itemPrice - Math.max(0, order.quantity - 500) * order.itemPrice * 0.05 +           Math.min(order.quantity * order.itemPrice * 0.1, 100);
}


// 重构
function price(order) {
  const basePrice = order.quantity * order.itemPrice;
  const quantityDiscount = Math.max(0, order.quantity - 500) * order.itemPrice * 0 .05;
  const shipping = Math.min(basePrice * 0.1, 100);
  return basePrice - quantityDiscount + shipping;
}

在一个类中，将它们提炼成办法

class Order {constructor(aRecord) {this._data = aRecord;}
  
 get quantity() {return this._data.quantity;}  
  
 get itemPrice() {return this._data.itemPrice;}
   
 get price() {return this.quantity * this.itemPrice - Math.max(0, this.quantity - 500) * this.itemPrice * 0.05 +    Math.min(this.quantity * this.itemPrice * 0.1, 100);
 }
}


// 重构
class Order {constructor(aRecord) {this._data = aRecord;}

  get quantity() {return this._data.quantity;}  

  get itemPrice() {return this._data.itemPrice;}

  get price() {return this.basePrice - this.quantityDiscount + this.shipping;}

  get basePrice() {return this.quantity * this.itemPrice;}

  get quantityDiscount() {return Math.max(0, this.quantity - 500) * this.itemPrice * 0.05;
  }

  get shipping() {return Math.min(this.basePrice * 0.1, 100);
  } 
}

有些时候，变量并不比表达式自身更具表现力，可能会障碍重构左近的代码。若果真如此，就应该通过内联的手法打消变量。

查看确认变量赋值语句的右侧表达式没有副作用。
如果变量没有被申明为不可批改，先将其变为不可批改，并执行测试。
找到第一处应用该变量的中央，将其替换为间接应用赋值语句的右侧表达式。
测试。
反复后面两步，逐个替换其余所有应用该变量的中央。
删除该变量的申明点和赋值语句。
测试。

let basePrice = anOrder.basePrice;
return (basePrice > 1000);


// 重构
return anOrder.basePrice > 1000;

如果我一个函数、函数的参数的名字不能一眼看出它的用处，一旦发现了就得尽快给它改名。

先写一句正文形容这个函数的用处。
再把这句正文变成函数的名字。
先实现函数改名。
测试。
而后增加参数。
测试。

function inNewEngland(aCustomer) {return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(aCustomer.address.state);
}

 const newEnglanders = someCustomers.filter(c => inNewEngland(c));


// 重构
function inNewEngland(stateCode) {return ["MA", "CT", "ME", "VT", "NH", "RI"].includes(stateCode);
}

const newEnglanders = someCustomers.filter(c => inNewEngland(c.address.state));

对于所有可变的数据，只有它的作用域超出单个函数，就将其封装起来，只容许通过函数拜访。

创立封装函数，在其中拜访和更新变量值。
执行动态查看。
逐个批改应用该变量的代码，将其改为调用适合的封装函数。每次替换之后，执行测试。
限度变量的可见性。
测试。
如果变量的值是一个记录，思考应用封装记录

变量要能够很好地解释一段程序在干什么，对于作用域超出一次函数调用的字段，则须要更用心命名。

如果变量被宽泛应用，思考使用封装变量将其封装起来。
找出所有应用该变量的代码，逐个批改。
测试。

变量要能够很好地解释一段程序在干什么，对于作用域超出一次函数调用的字段，则须要更用心命名。

如果临时还没有一个适合的数据结构，就创立一个。
测试。
应用扭转函数申明给原来的函数新增一个参数，类型是新建的数据结构。
测试。
调整所有调用者，传入新数据结构的适当实例。每批改一处，执行测试。
用新数据结构中的每项元素，逐个取代参数列表中与之对应的参数项，而后删除原来的参数。
测试。

const station = { 
  name: "ZB1",
  readings: [{temp: 47, time: "2016-11-10 09:10"},           
    {temp: 53, time: "2016-11-10 09:20"},           
    {temp: 58, time: "2016-11-10 09:30"},           
    {temp: 53, time: "2016-11-10 09:40"},           
    {temp: 51, time: "2016-11-10 09:50"},          
  ]
};

function readingsOutsideRange(station, min, max) {return station.readings.filter(r => r.temp < min || r.temp > max);
}

const alerts = readingsOutsideRange(station, operatingPlan.temperatureFloor, operatingPlan.temperatureCeiling);


// 重构
function readingsOutsideRange(station, range) {return station.readings.filter(r => !range.contains(r.temp));
}

function contains(arg) {return (arg >= this.min && arg <= this.max);
}

const alerts = readingsOutsideRange(station, range);

如果发现一组函数如影随行地操作同一块数据 (通常是将这块数据作为参数传递给函数)，就须要组建一个类了。

使用封装记录对多个函数共用的数据记录加以封装。
对于应用该记录构造的每个函数，使用搬移函数将其移入新类。
用以解决该数据记录的逻辑能够用提炼函数提炼进去，并移入新类。

const reading = {customer: "ivan", quantity: 10, month: 5, year: 2017};
const aReading = acquireReading();
const baseCharge = baseRate(aReading.month, aReading.year) * aReading.quantity;

const base = (baseRate(aReading.month, aReading.year) * aReading.quantity);
const taxableCharge = Math.max(0, base - taxThreshold(aReading.year));

const basicChargeAmount = calculateBaseCharge(aReading);
function calculateBaseCharge(aReading) {return baseRate(aReading.month, aReading.year) * aReading.quantity;
}


// 重构
class Reading {constructor(data) {   
    this._customer = data.customer;   
    this._quantity = data.quantity;
    this._month = data.month;   
    this._year = data.year;
  }

  get customer() {return this._customer;}  
  
  get quantity() {return this._quantity;}  
  
  get month() {return this._month;}  
  
  get year() {return this._year;}
  
  get calculateBaseCharge() {return baseRate(this.month, this.year) * this.quantity;
  }
  
  get baseCharge() {return baseRate(this.month, this.year) * this.quantity;
  }
  
  get taxableCharge() {return Math.max(0, this.baseCharge - taxThreshold(this.year));
  }
}

如果代码中会对源数据做更新，那么应用类要好得多; 如果应用变换，派生数据会被存储在新生成的记录中，一旦源数据被批改，我就会遭逢数据不统一。

创立一个变换函数，输出参数是须要变换的记录，并间接返回该记录的值。
筛选一块逻辑，将其主体移入变换函数中，把后果作为字段增加到输入记录中。批改客户端代码，令其应用这个新字段。
测试。
针对其余相干的计算逻辑，反复上述步骤。

const reading = {customer: "ivan", quantity: 10, month: 5, year: 2017};
const aReading = acquireReading();
const baseCharge = baseRate(aReading.month, aReading.year) * aReading.quantity;

const base = (baseRate(aReading.month, aReading.year) * aReading.quantity);
const taxableCharge = Math.max(0, base - taxThreshold(aReading.year));

const basicChargeAmount = calculateBaseCharge(aReading);
function calculateBaseCharge(aReading) {return baseRate(aReading.month, aReading.year) * aReading.quantity;
}


// 重构
function enrichReading(original) {const result = _.cloneDeep(original);
  result.baseCharge = calculateBaseCharge(result);
  result.taxableCharge = Math.max(0, result.baseCharge - taxThreshold(result.year));
  return result;
}

const rawReading = acquireReading();
const aReading = enrichReading(rawReading);
const base = aReading.baseCharge;
const taxableCharge = aReading.taxableCharge;

一段代码在同时解决两件不同的事，就要把它拆分成各自独立的模块。可能你有一段解决逻辑，其输出数据的格局不合乎计算逻辑的要求，所以你得先对输出数据做一番调整，使其便于解决。也可能是你把数据处理逻辑分成程序执行的多个步骤，每个步骤负责的工作全然不同。

将第二阶段的代码提炼成独立的函数。
测试。
引入一个直达数据结构，将其作为参数增加到提炼出的新函数的参数列表中。
测试。
逐个查看提炼出的“第二阶段函数”的每个参数。如果某个参数被第一阶段用到，就将其移入直达数据结构。每次搬移之后都要执行测试。
对第一阶段的代码使用提炼函数，让提炼出的函数返回直达数据结构。

function priceOrder(product, quantity, shippingMethod) {
   const basePrice = product.basePrice * quantity;
   const discount = Math.max(quantity - product.discountThreshold, 0) * product.basePrice * product.discountRate;
   const shippingPerCase = (basePrice > shippingMethod.discountThreshold) 
      ? shippingMethod.discountedFee 
      : shippingMethod.feePerCase;  
   const shippingCost = quantity * shippingPerCase;
   const price = basePrice - discount + shippingCost;
   return price;
}


// 重构
function priceOrder(product, quantity, shippingMethod) {const priceData = calculatePricingData(product, quantity);  
  return applyShipping(priceData, shippingMethod);
}

function calculatePricingData(product, quantity) {
  const basePrice = product.basePrice * quantity;
  const discount = Math.max(quantity - product.discountThreshold, 0) * product.basePrice * product.discountRate;
  return {
    basePrice: basePrice, 
    quantity: quantity, 
    discount:discount
  }
};
  
function applyShipping(priceData, shippingMethod) {const shippingPerCase = (priceData.basePrice > shippingMethod.discountThreshold) 
  ? shippingMethod.discountedFee 
  : shippingMethod.feePerCase;
  const shippingCost = priceData.quantity * shippingPerCase;
  return priceData.basePrice - priceData.discount + shippingCost;
}

一、根底重构

1. 提炼函数 (Extract Function)

1.1 应用场景

1.2 应用步骤

1.3 范例

2. 内联函数 (Inline Function)

2.1 应用场景

2.2 应用步骤

2.3 范例

3. 提炼变量 (Extract Variable)

3.1 应用场景

3.2 应用步骤

3.3 范例

在一个函数中，将它们提炼成变量

在一个类中，将它们提炼成办法

4. 内联变量 (Inline Variable)

4.1 应用场景

4.2 应用步骤

4.3 范例

5. 扭转函数申明 (Change Function Declaration)

5.1 应用场景

5.2 应用步骤

5.3 范例

6. 封装变量 (Encapsulate Variable)

6.1 应用场景

6.2 应用步骤

6.3 范例

7. 变量改名 (Rename Variable)

7.1 应用场景

7.2 应用步骤

7.3 范例

8. 引入参数对象 (Introduce Parameter Object)

8.1 应用场景

8.2 应用步骤

8.3 范例

9. 函数组合成类 (Combine Functions into Class)

9.1 应用场景

9.2 应用步骤

9.3 范例

10. 函数组合成变换 (Combine Functions into Transform)

10.1 应用场景

10.2 应用步骤

10.3 范例

11. 拆分阶段 (Split Phase)

11.1 应用场景

11.2 应用步骤

11.3 范例