共计 8598 个字符，预计需要花费 22 分钟才能阅读完成。
一、根底重构
1. 提炼函数 (Extract Function)
1.1 应用场景
如果你须要花工夫浏览一段代码能力弄清它到底在干什么，那么就应该将其提炼到一个函数中，并依据它所做的事为其命名。
1.2 应用步骤
- 发明一个新函数，依据这个函数的用意来对它命名
- 将待提炼的代码从源函数复制到新建的指标函数中。
- 仔细检查提炼出的代码，看看其中是否援用了作用域限于源函数、在提炼出的新函数中拜访不到的变量。若是，以参数的模式将它们传递给新函数。
- 所有变量都解决完之后，编译。
- 在源函数中，将被提炼代码段替换为对指标函数的调用。
- 测试。
- 查看其余代码是否有与被提炼的代码段雷同或类似之 处。如果有，思考应用以函数调用取代内联代码，令其调用提炼出的新函数。
1.3 范例
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()}`);
}2. 内联函数 (Inline Function)
2.1 应用场景
如果代码中有太多间接层，使得零碎中的所有函数都仿佛只是对另一个函数的简略委托，造成我在这些委托动作之间昏头昏脑，那么我通常都会应用内联函数。
2.2 应用步骤
- 查看函数，确定它不具多态性。
- 找出这个函数的所有调用点。
- 将这个函数的所有调用点都替换为函数本体。
- 每次替换之后，执行测试。
- 删除该函数的定义。
2.3 范例
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;
}3. 提炼变量 (Extract Variable)
3.1 应用场景
表达式有可能非常复杂而难以浏览。
3.2 应用步骤
- 确认要提炼的表达式没有副作用。
- 申明一个不可批改的变量，把你想要提炼的表达式复制 一份，以该表达式的后果值给这个变量赋值。
- 用这个新变量取代原来的表达式。
- 测试。
3.3 范例
在一个函数中，将它们提炼成变量
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);
}
}4. 内联变量 (Inline Variable)
4.1 应用场景
有些时候，变量并不比表达式自身更具表现力，可能会障碍重构左近的代码。若果真如此，就应该通过内联的手法打消变量。
4.2 应用步骤
- 查看确认变量赋值语句的右侧表达式没有副作用。
- 如果变量没有被申明为不可批改，先将其变为不可批改，并执行测试。
- 找到第一处应用该变量的中央，将其替换为间接应用赋值语句的右侧表达式。
- 测试。
- 反复后面两步，逐个替换其余所有应用该变量的中央。
- 删除该变量的申明点和赋值语句。
- 测试。
4.3 范例
let basePrice = anOrder.basePrice;
return (basePrice > 1000);
// 重构
return anOrder.basePrice > 1000;5. 扭转函数申明 (Change Function Declaration)
5.1 应用场景
如果我一个函数、函数的参数的名字不能一眼看出它的用处，一旦发现了就得尽快给它改名。
5.2 应用步骤
- 先写一句正文形容这个函数的用处。
- 再把这句正文变成函数的名字。
- 先实现函数改名。
- 测试。
- 而后增加参数。
- 测试。
5.3 范例
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));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 范例
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);9. 函数组合成类 (Combine Functions into Class)
9.1 应用场景
如果发现一组函数如影随行地操作同一块数据 (通常是将这块数据作为参数传递给函数)，就须要组建一个类了。
9.2 应用步骤
- 使用封装记录对多个函数共用的数据记录加以封装。
- 对于应用该记录构造的每个函数，使用搬移函数将其移入新类。
- 用以解决该数据记录的逻辑能够用提炼函数提炼进去，并移入新类。
9.3 范例
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));
}
}10. 函数组合成变换 (Combine Functions into Transform)
10.1 应用场景
如果代码中会对源数据做更新，那么应用类要好得多; 如果应用变换，派生数据会被存储在新生成的记录中，一旦源数据被批改，我就会遭逢数据不统一。
10.2 应用步骤
- 创立一个变换函数，输出参数是须要变换的记录，并间接返回该记录的值。
- 筛选一块逻辑，将其主体移入变换函数中，把后果作为字段增加到输入记录中。批改客户端代码，令其应用这个新字段。
- 测试。
- 针对其余相干的计算逻辑，反复上述步骤。
10.3 范例
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;11. 拆分阶段 (Split Phase)
11.1 应用场景
一段代码在同时解决两件不同的事，就要把它拆分成各自独立的模块。可能你有一段解决逻辑，其输出数据的格局不合乎计算逻辑的要求，所以你得先对输出数据做一番调整，使其便于解决。也可能是你把数据处理逻辑分成程序执行的多个步骤，每个步骤负责的工作全然不同。
11.2 应用步骤
- 将第二阶段的代码提炼成独立的函数。
- 测试。
- 引入一个直达数据结构，将其作为参数增加到提炼出的新函数的参数列表中。
- 测试。
- 逐个查看提炼出的“第二阶段函数”的每个参数。如果某个参数被第一阶段用到，就将其移入直达数据结构。每次搬移之后都要执行测试。
- 对第一阶段的代码使用提炼函数，让提炼出的函 数返回直达数据结构。
11.3 范例
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;
}正文完