JavaScript 代碼優化之道
我們先引入一句話:
代碼主要是爲了寫給人看的,而不是寫給機器看的,只是順便也能用機器執行而已。
代碼和語言文字一樣是爲了表達思想、記載信息,所以寫得清楚能更有效地表達。本文多數總結自《重構:改善既有代碼的設計 (第 2 版)》我們直接進入正題,上代碼!
提煉函數
what
將一段代碼提煉到一個獨立的函數中,並以這段代碼的作用命名。
where
如果需要花時間瀏覽一段代碼才能弄清楚它到底要幹什麼,那麼這時候就應該將其提煉到一個函數中,並根據它所做的事命名。以後再讀這段代碼時,一眼就能知道這個函數的用途。
how
// ==================重構前==================
function printOwing(invoice) {
let outstanding = 0;
console.log("***********************");
console.log("**** Customer Owes ****");
console.log("***********************");
}
// ==================重構後==================
function printOwing(invoice) {
let outstanding = 0;
printBanner()
}
function printBanner() {
console.log("***********************");
console.log("**** Customer Owes ****");
console.log("***********************");
}
複製代碼
函數參數化
what
以參數的形式傳入不同的值,消除重複函數
where
如果發現兩個函數邏輯非常相似, 只有一些字面量值不同, 可以將其合併成一個函數, 以參數的形式傳入不同的值, 從而消除重複。
how
// ==================重構前==================
// 點擊異常項
clickFaultsItem(item){
this.$u.route({
url:'xxx',
params:{
id: item.id,
type: '異常'
}
})
}
// 點擊正常項
clickNormalItem(item){
this.$u.route({
url:'xxx',
params:{
id: item.id,
type: '正常'
}
})
}
// ==================重構後==================
clickItem(id, type){
this.$u.route({
url:'xxx',
params:{id, type}
})
}
複製代碼
使用策略模式替換 “胖” 分支
what
使用策略模式替換 “胖胖” 的 if-else 或者 switch-case
where
當 if-else 或者 switch-case 分支過多時可以使用策略模式將各個分支獨立出來
how
// ==================重構前==================
function getPrice(tag, originPrice) {
// 新人價格
if(tag === 'newUser') {
return originPrice > 50.1 ? originPrice - 50 : originPrice
}
// 返場價格
if(tag === 'back') {
return originPrice > 200 ? originPrice - 50 : originPrice
}
// 活動價格
if(tag === 'activity') {
return originPrice > 300 ? originPrice - 100 : originPrice
}
}
// ==================重構後==================
const priceHandler = {
newUser(originPrice){
return originPrice > 50.1 ? originPrice - 50 : originPrice
},
back(originPrice){
return originPrice > 200 ? originPrice - 50 : originPrice
},
activity(originPrice){
return originPrice > 300 ? originPrice - 100 : originPrice
}
}
function getPrice(tag, originPrice){
return priceHandler[tag](originPrice)
}
複製代碼
提煉變量
what
提煉局部變量替換表達式
where
一個表達式有可能非常複雜且難以閱讀。這種情況下, 可以提煉出一個局部變量幫助我們將表達式分解爲比較容易管理的形式 ,這樣的變量在調試時也很方便。
how
// ==================重構前==================
function price(order) {
//價格 = 商品原價 - 數量滿減價 + 運費
return order.quantity * order.price -
Math.max(0, order.quantity - 500) * order.price * 0.05 +
Math.min(order.quantity * order.price * 0.1, 100);
}
// ==================重構後==================
function price(order) {
const basePrice = order.quantity * order.price;
const quantityDiscount = Math.max(0, order.quantity - 500) * order.price * 0.05;
const shipping = Math.min(basePrice * 0.1, 100);
return basePrice - quantityDiscount + shipping;
}
複製代碼
內聯變量
what
用變量右側表達式消除變量,這是提煉變量的逆操作
where
當變量名字並不比表達式本身更具表現力時可以採取該方法
how
// ==================重構前==================
let basePrice = anOrder.basePrice;
return (basePrice > 1000);
// ==================重構後==================
return anOrder.basePrice > 1000
複製代碼
封裝變量
what
將變量封裝起來,只允許通過函數訪問
where
對於所有可變的數據, 只要它的作用域超出單個函數,就可以採用封裝變量的方法。數據被使用得越廣, 就越是值得花精力給它一個體面的封裝。
how
// ==================重構前==================
let defaultOwner = {firstName: "Martin", lastName: "Fowler"};
// 訪問
spaceship.owner = defaultOwner;
// 賦值
defaultOwner = {firstName: "Rebecca", lastName: "Parsons"};
// ==================重構後==================
function getDefaultOwner() {return defaultOwner;}
function setDefaultOwner(arg) {defaultOwner = arg;}
// 訪問
spaceship.owner = getDefaultOwner();
// 賦值
setDefaultOwner({firstName: "Rebecca", lastName: "Parsons"});
複製代碼
拆分階段
what
把一大段行爲拆分成多個順序執行的階段
where
當看見一段代碼在同時處理兩件不同的事, 可以把它拆分成各自獨立的模塊, 因爲這樣到了需要修改的時候, 就可以單獨處理每個模塊。
how
// ==================重構前==================
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, quantity, 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;
}
複製代碼
拆分循環
what
將一個循環拆分成多個循環
where
當遇到一個身兼數職的循環時可以將循環拆解,讓一個循環只做一件事情, 那就能確保每次修改時你只需要理解要修改的那塊代碼的行爲就可以了。該行爲可能會被質疑,因爲它會迫使你執行兩次甚至多次循環,實際情況是,即使處理的列表數據更多一些,循環本身也很少成爲性能瓶頸,更何況拆分出循環來通常還使一些更強大的優化手段變得可能。
how
// ==================重構前==================
const people = [
{ age: 20, salary: 10000 },
{ age: 21, salary: 15000 },
{ age: 22, salary: 18000 }
]
let youngest = people[0] ? people[0].age : Infinity;
let totalSalary = 0;
for (const p of people) {
// 查找最年輕的人員
if (p.age < youngest) youngest = p.age;
// 計算總薪水
totalSalary += p.salary;
}
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================重構後==================
const people = [
{ age: 20, salary: 10000 },
{ age: 21, salary: 15000 },
{ age: 22, salary: 18000 }
]
let totalSalary = 0;
for (const p of people) {
// 只計算總薪資
totalSalary += p.salary;
}
let youngest = people[0] ? people[0].age : Infinity;
for (const p of people) {
// 只查找最年輕的人員
if (p.age < youngest) youngest = p.age;
}
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================提煉函數==================
const people = [
{ age: 20, salary: 10000 },
{ age: 21, salary: 15000 },
{ age: 22, salary: 18000 }
]
console.log(`youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`);
function totalSalary() {
let totalSalary = 0;
for (const p of people) {
totalSalary += p.salary;
}
return totalSalary;
}
function youngestAge() {
let youngest = people[0] ? people[0].age : Infinity;
for (const p of people) {
if (p.age < youngest) youngest = p.age;
}
return youngest;
}
// ==================使用工具類進一步優化==================
const people = [
{ age: 20, salary: 10000 },
{ age: 21, salary: 15000 },
{ age: 22, salary: 18000 }
]
console.log(`youngestAge: ${youngestAge()}, totalSalary: ${totalSalary()}`);
function totalSalary() {
return people.reduce((total,p) => total + p.salary, 0);
}
function youngestAge() {
return Math.min(...people.map(p => p.age));
}
複製代碼
拆分變量
what
將一個變量拆分成兩個或多個變量
where
如果變量承擔多個責任, 它就應該被替換爲多個變量, 每個變量只承擔一個責任。
how
// ==================重構前==================
let temp = 2 * (height + width);
console.log(temp);
temp = height * width;
console.log(temp);
// ==================重構後==================
const perimeter = 2 * (height + width);
console.log(perimeter);
const area = height * width;
console.log(area);
複製代碼
分解條件表達式
what
將條件表達式提煉成函數
where
在帶有複雜條件邏輯的函數中,往往可以將原函數中對應的代碼改爲調用新函數。
對於條件邏輯, 將每個分支條件分解成新函數可以帶來的好處:
-
提高可讀性
-
可以突出條件邏輯, 更清楚地表明每個分支的作用
-
突出每個分支的原因
how
// ==================重構前==================
// 計算一件商品的總價,該商品在冬季和夏季的單價是不同的
if (!aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd))
charge = quantity * plan.summerRate;
else
charge = quantity * plan.regularRate + plan.regularServiceCharge;
// ==================重構後==================
if (summer())
charge = summerCharge();
else
charge = regularCharge();
function summer() {
return !aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
return quantity * plan.summerRate;
}
function regularCharge() {
return quantity * plan.regularRate + plan.regularServiceCharge;
}
// 進一步優化(使用三元運算符)
charge = summer() ? summerCharge() : regularCharge();
function summer() {
return !aDate.isBefore(plan.summerStart) && !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
return quantity * plan.summerRate;
}
function regularCharge() {
return quantity * plan.regularRate + plan.regularServiceCharge;
}
複製代碼
合併條件表達式
what
將多個條件表達式合併
where
當發現這樣一串條件檢查:檢查條件各不相同, 最終行爲卻一致。如果發現這種情況,就應該使用 “邏輯或” 和“邏輯與”將它們合併爲一個條件表達式。
how
// ==================重構前==================
if (anEmployee.seniority < 2) return 0;
if (anEmployee.monthsDisabled > 12) return 0;
if (anEmployee.isPartTime) return 0;
// ==================重構後==================
if (isNotEligableForDisability()) return 0;
function isNotEligableForDisability() {
return ((anEmployee.seniority < 2)
|| (anEmployee.monthsDisabled > 12)
|| (anEmployee.isPartTime));
}
複製代碼
以衛語句取代嵌套條件表達式
what
如果某個條件極其罕見,就應該單獨檢查該條件,並在該條件爲真時立刻從函數中返回。這樣的單獨檢查常常被稱爲 “衛語句”(guard clauses)。
where
如果使用 if-else 結構,你對 if 分支和 else 分支的重視是同等的。這樣的代碼結構傳遞給閱讀者的消息就是:各個分支有同樣的重要性。衛語句就不同了,它告訴閱讀者:“這種情況不是本函數的核心邏輯所關心的, 如果它真發生了,請做一些必要的整理工作,然後退出。” 爲了傳遞這種信息可以使用衛語句替換嵌套結構。
how
// ==================重構前==================
function payAmount(employee) {
let result;
if(employee.isSeparated) {
result = {amount: 0, reasonCode:"SEP"};
}
else {
if (employee.isRetired) {
result = {amount: 0, reasonCode: "RET"};
}
else {
result = someFinalComputation();
}
}
return result;
}
// ==================重構後==================
function payAmount(employee) {
if (employee.isSeparated) return {amount: 0, reasonCode: "SEP"};
if (employee.isRetired) return {amount: 0, reasonCode: "RET"};
return someFinalComputation();
}
複製代碼
將查詢函數和修改函數分離
what
將查詢動作從修改動作中分離出來的方式
where
如果遇到一個 “既有返回值又有副作用” 的函數,此時可以將查詢動作從修改動作中分離出來。
how
// ==================重構前==================
function alertForMiscreant (people) {
for (const p of people) {
if (p === "Don") {
setOffAlarms();
return "Don";
}
if (p === "John") {
setOffAlarms();
return "John";}
}
return "";
}
// 調用方
const found = alertForMiscreant(people);
// ==================重構後==================
function findMiscreant (people) {
for (const p of people) {
if (p === "Don") {
return "Don";
}
if (p === "John") {
return "John";
}
}
return "";
}
function alertForMiscreant (people) {
if (findMiscreant(people) !== "") setOffAlarms();
}
// 調用方
const found = findMiscreant(people);
alertForMiscreant(people);
複製代碼
關於本文
作者:俺是誰
https://juejin.cn/post/7131211363493347335
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/2iuREH8A1dvERsB8CbXurw