JavaScript代碼優(yōu)化技巧示例詳解

更新時(shí)間：2022年08月15日 16:06:59 作者：俺是誰(shuí)

這篇文章主要為大家介紹了JavaScript代碼優(yōu)化技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言
提煉函數(shù)
函數(shù)參數(shù)化
使用策略模式替換“胖”分支
提煉變量
內(nèi)聯(lián)變量
封裝變量
拆分階段
拆分循環(huán)
拆分變量
分解條件表達(dá)式
合并條件表達(dá)式
以衛(wèi)語(yǔ)句取代嵌套條件表達(dá)式
將查詢函數(shù)和修改函數(shù)分離

引言

我們先引入一句話：

代碼主要是為了寫給人看的，而不是寫給機(jī)器看的，只是順便也能用機(jī)器執(zhí)行而已。

代碼和語(yǔ)言文字一樣是為了表達(dá)思想、記載信息，所以寫得清楚能更有效地表達(dá)。本文多數(shù)總結(jié)自《重構(gòu)：改善既有代碼的設(shè)計(jì)(第2版)》我們直接進(jìn)入正題，上代碼！

提煉函數(shù)

what

將一段代碼提煉到一個(gè)獨(dú)立的函數(shù)中，并以這段代碼的作用命名。

where

如果需要花時(shí)間瀏覽一段代碼才能弄清楚它到底要干什么，那么這時(shí)候就應(yīng)該將其提煉到一個(gè)函數(shù)中，并根據(jù)它所做的事命名。以后再讀這段代碼時(shí)，一眼就能知道這個(gè)函數(shù)的用途。

how

// ==================重構(gòu)前==================
function printOwing(invoice) {
    let outstanding = 0;
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}
// ==================重構(gòu)后==================
function printOwing(invoice) {
    let outstanding = 0;
    printBanner()
}
function printBanner() {
    console.log("***********************");
    console.log("**** Customer Owes ****");
    console.log("***********************");
}

函數(shù)參數(shù)化

what

以參數(shù)的形式傳入不同的值，消除重復(fù)函數(shù)

where

如果發(fā)現(xiàn)兩個(gè)函數(shù)邏輯非常相似，只有一些字面量值不同，可以將其合并成一個(gè)函數(shù)，以參數(shù)的形式傳入不同的值，從而消除重復(fù)。

how

// ==================重構(gòu)前==================
// 點(diǎn)擊異常項(xiàng)
clickFaultsItem(item){
    this.$u.route({
        url:'xxx',
        params:{
            id: item.id,
            type: '異常'
        }
    })
}
// 點(diǎn)擊正常項(xiàng)
clickNormalItem(item){
    this.$u.route({
        url:'xxx',
        params:{
            id: item.id,
            type: '正常'
        }
    })
}
// ==================重構(gòu)后==================
clickItem(id, type){
     this.$u.route({
        url:'xxx',
        params:{id, type}
    })
}

使用策略模式替換“胖”分支

what

使用策略模式替換“胖胖”的if-else或者switch-case

where

當(dāng)if-else或者switch-case分支過(guò)多時(shí)可以使用策略模式將各個(gè)分支獨(dú)立出來(lái)

how

// ==================重構(gòu)前==================
function getPrice(tag, originPrice) {
    // 新人價(jià)格
    if(tag === 'newUser') {
        return originPrice &gt; 50.1 ? originPrice - 50 : originPrice
    }
    // 返場(chǎng)價(jià)格
    if(tag === 'back') {
         return originPrice &gt; 200 ? originPrice - 50 : originPrice
    }
    // 活動(dòng)價(jià)格
    if(tag === 'activity') {
        return originPrice &gt; 300 ? originPrice - 100 : originPrice
    }
}
// ==================重構(gòu)后==================
const priceHandler = {
    newUser(originPrice){
        return originPrice &gt; 50.1 ? originPrice - 50 : originPrice
    },
    back(originPrice){
        return originPrice &gt; 200 ? originPrice - 50 : originPrice
    },
    activity(originPrice){
         return originPrice &gt; 300 ? originPrice - 100 : originPrice
    }
}
function getPrice(tag, originPrice){
    return priceHandler[tag](originPrice)
}

提煉變量

what

提煉局部變量替換表達(dá)式

where

一個(gè)表達(dá)式有可能非常復(fù)雜且難以閱讀。這種情況下，可以提煉出一個(gè)局部變量幫助我們將表達(dá)式分解為比較容易管理的形式，這樣的變量在調(diào)試時(shí)也很方便。

how

// ==================重構(gòu)前==================
function price(order) {
    //價(jià)格 = 商品原價(jià) - 數(shù)量滿減價(jià) + 運(yùn)費(fèi)
    return order.quantity * order.price -
    Math.max(0, order.quantity - 500) * order.price * 0.05 +
    Math.min(order.quantity * order.price * 0.1, 100);
}
// ==================重構(gòu)后==================
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;
}

內(nèi)聯(lián)變量

what

用變量右側(cè)表達(dá)式消除變量，這是提煉變量的逆操作

where

當(dāng)變量名字并不比表達(dá)式本身更具表現(xiàn)力時(shí)可以采取該方法

how

// ==================重構(gòu)前==================
let basePrice = anOrder.basePrice;
return (basePrice &gt; 1000);
// ==================重構(gòu)后==================
return anOrder.basePrice &gt; 1000

封裝變量

what

將變量封裝起來(lái)，只允許通過(guò)函數(shù)訪問(wèn)

where

對(duì)于所有可變的數(shù)據(jù)，只要它的作用域超出單個(gè)函數(shù)，就可以采用封裝變量的方法。數(shù)據(jù)被使用得越廣，就越是值得花精力給它一個(gè)體面的封裝。

how

// ==================重構(gòu)前==================
let defaultOwner = {firstName: "Martin", lastName: "Fowler"};
// 訪問(wèn)
spaceship.owner = defaultOwner;
// 賦值
defaultOwner = {firstName: "Rebecca", lastName: "Parsons"};
// ==================重構(gòu)后==================
function getDefaultOwner() {return defaultOwner;}
function setDefaultOwner(arg) {defaultOwner = arg;}
// 訪問(wèn)
spaceship.owner = getDefaultOwner();
// 賦值
setDefaultOwner({firstName: "Rebecca", lastName: "Parsons"});

拆分階段

what

把一大段行為拆分成多個(gè)順序執(zhí)行的階段

where

當(dāng)看見(jiàn)一段代碼在同時(shí)處理兩件不同的事，可以把它拆分成各自獨(dú)立的模塊，因?yàn)檫@樣到了需要修改的時(shí)候，就可以單獨(dú)處理每個(gè)模塊。

how

// ==================重構(gòu)前==================
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 &gt; shippingMethod.discountThreshold)
    ? shippingMethod.discountedFee : shippingMethod.feePerCase;
    const shippingCost = quantity * shippingPerCase;
    const price = basePrice - discount + shippingCost;
    return price;
}
/*
該例中前兩行代碼根據(jù)商品信息計(jì)算訂單中與商品相關(guān)的價(jià)格， 隨后的兩行則根據(jù)配送信息計(jì)算配送成本。
將這兩塊邏輯相對(duì)獨(dú)立后，后續(xù)如果修改價(jià)格和配送的計(jì)算邏輯則只需修改對(duì)應(yīng)模塊即可。
*/
// ==================重構(gòu)后==================
function priceOrder(product, quantity, shippingMethod) {
    const priceData = calculatePricingData(product, quantity);
    return applyShipping(priceData, shippingMethod);
}
// 計(jì)算商品價(jià)格
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};
}
// 計(jì)算配送價(jià)格
function applyShipping(priceData, shippingMethod) {
    const shippingPerCase = (priceData.basePrice &gt; shippingMethod.discountThreshold)
    ? shippingMethod.discountedFee : shippingMethod.feePerCase;
    const shippingCost = priceData.quantity * shippingPerCase;
    return priceData.basePrice - priceData.discount + shippingCost;
}

拆分循環(huán)

what

將一個(gè)循環(huán)拆分成多個(gè)循環(huán)

where

當(dāng)遇到一個(gè)身兼數(shù)職的循環(huán)時(shí)可以將循環(huán)拆解，讓一個(gè)循環(huán)只做一件事情，那就能確保每次修改時(shí)你只需要理解要修改的那塊代碼的行為就可以了。該行為可能會(huì)被質(zhì)疑，因?yàn)樗鼤?huì)迫使你執(zhí)行兩次甚至多次循環(huán)，實(shí)際情況是，即使處理的列表數(shù)據(jù)更多一些，循環(huán)本身也很少成為性能瓶頸，更何況拆分出循環(huán)來(lái)通常還使一些更強(qiáng)大的優(yōu)化手段變得可能。

how

// ==================重構(gòu)前==================
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 &lt; youngest) youngest = p.age;
    // 計(jì)算總薪水
    totalSalary += p.salary;
}
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================重構(gòu)后==================
const people = [
    { age: 20, salary: 10000 },
    { age: 21, salary: 15000 },
    { age: 22, salary: 18000 }
]
let totalSalary = 0;
for (const p of people) {
    // 只計(jì)算總薪資
    totalSalary += p.salary;
}
let youngest = people[0] ? people[0].age : Infinity;
for (const p of people) {
    // 只查找最年輕的人員
    if (p.age &lt; youngest) youngest = p.age;
} 
console.log(`youngestAge: ${youngest}, totalSalary: ${totalSalary}`);
// ==================提煉函數(shù)==================
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 &lt; youngest) youngest = p.age;
    }
    return youngest;
}
// ==================使用工具類進(jìn)一步優(yōu)化==================
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) =&gt; total + p.salary, 0);
}
function youngestAge() {
    return Math.min(...people.map(p =&gt; p.age));
}

拆分變量

what

將一個(gè)變量拆分成兩個(gè)或多個(gè)變量

where

如果變量承擔(dān)多個(gè)責(zé)任，它就應(yīng)該被替換為多個(gè)變量，每個(gè)變量只承擔(dān)一個(gè)責(zé)任。

how

// ==================重構(gòu)前==================
let temp = 2 * (height + width);
console.log(temp);
temp = height * width;
console.log(temp);
// ==================重構(gòu)后==================
const perimeter = 2 * (height + width);
console.log(perimeter);
const area = height * width;
console.log(area);

分解條件表達(dá)式

what

將條件表達(dá)式提煉成函數(shù)

where

在帶有復(fù)雜條件邏輯的函數(shù)中，往往可以將原函數(shù)中對(duì)應(yīng)的代碼改為調(diào)用新函數(shù)。

對(duì)于條件邏輯，將每個(gè)分支條件分解成新函數(shù)可以帶來(lái)的好處：

提高可讀性
可以突出條件邏輯，更清楚地表明每個(gè)分支的作用
突出每個(gè)分支的原因

how

// ==================重構(gòu)前==================
// 計(jì)算一件商品的總價(jià)，該商品在冬季和夏季的單價(jià)是不同的
if (!aDate.isBefore(plan.summerStart) &amp;&amp; !aDate.isAfter(plan.summerEnd))
charge = quantity * plan.summerRate;
else
charge = quantity * plan.regularRate + plan.regularServiceCharge;
// ==================重構(gòu)后==================
if (summer())
    charge = summerCharge();
else
    charge = regularCharge();
function summer() {
    return !aDate.isBefore(plan.summerStart) &amp;&amp; !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
    return quantity * plan.summerRate;
}
function regularCharge() {
    return quantity * plan.regularRate + plan.regularServiceCharge;
}
// 進(jìn)一步優(yōu)化（使用三元運(yùn)算符）
charge = summer() ? summerCharge() : regularCharge();
function summer() {
    return !aDate.isBefore(plan.summerStart) &amp;&amp; !aDate.isAfter(plan.summerEnd);
}
function summerCharge() {
    return quantity * plan.summerRate;
}
function regularCharge() {
    return quantity * plan.regularRate + plan.regularServiceCharge;
}

合并條件表達(dá)式

what

將多個(gè)條件表達(dá)式合并

where

當(dāng)發(fā)現(xiàn)這樣一串條件檢查：檢查條件各不相同，最終行為卻一致。如果發(fā)現(xiàn)這種情況，就應(yīng)該使用“邏輯或”和“邏輯與”將它們合并為一個(gè)條件表達(dá)式。

how

// ==================重構(gòu)前==================
if (anEmployee.seniority &lt; 2) return 0;
if (anEmployee.monthsDisabled &gt; 12) return 0;
if (anEmployee.isPartTime) return 0;
// ==================重構(gòu)后==================
if (isNotEligableForDisability()) return 0;
function isNotEligableForDisability() {
    return ((anEmployee.seniority &lt; 2)
            || (anEmployee.monthsDisabled &gt; 12)
            || (anEmployee.isPartTime));
}

以衛(wèi)語(yǔ)句取代嵌套條件表達(dá)式

what

如果某個(gè)條件極其罕見(jiàn)，就應(yīng)該單獨(dú)檢查該條件，并在該條件為真時(shí)立刻從函數(shù)中返回。這樣的單獨(dú)檢查常常被稱為“衛(wèi)語(yǔ)句”（guard clauses）。

where

如果使用if-else結(jié)構(gòu)，你對(duì)if分支和else分支的重視是同等的。這樣的代碼結(jié)構(gòu)傳遞給閱讀者的消息就是：各個(gè)分支有同樣的重要性。衛(wèi)語(yǔ)句就不同了，它告訴閱讀者： “這種情況不是本函數(shù)的核心邏輯所關(guān)心的，如果它真發(fā)生了，請(qǐng)做一些必要的整理工作，然后退出。” 為了傳遞這種信息可以使用衛(wèi)語(yǔ)句替換嵌套結(jié)構(gòu)。

how

// ==================重構(gòu)前==================
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;
}
// ==================重構(gòu)后==================
function payAmount(employee) {
    if (employee.isSeparated) return {amount: 0, reasonCode: "SEP"};
    if (employee.isRetired) return {amount: 0, reasonCode: "RET"};
    return someFinalComputation();
}

將查詢函數(shù)和修改函數(shù)分離

what

將查詢動(dòng)作從修改動(dòng)作中分離出來(lái)的方式

where

如果遇到一個(gè)“既有返回值又有副作用”的函數(shù)，此時(shí)可以將查詢動(dòng)作從修改動(dòng)作中分離出來(lái)。

how

// ==================重構(gòu)前==================
function alertForMiscreant (people) {
    for (const p of people) {
        if (p === "Don") {
            setOffAlarms();
            return "Don";
        }
        if (p === "John") {
            setOffAlarms();
            return "John";}
    }
    return "";
}
// 調(diào)用方
const found = alertForMiscreant(people);
// ==================重構(gòu)后==================
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();
}
// 調(diào)用方
const found = findMiscreant(people);
alertForMiscreant(people);

以上就是JavaScript代碼優(yōu)化技巧示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript優(yōu)化技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: