今天我在看到一個(gè)程序員發(fā)布了一個(gè)非常有趣的代碼片段(非常高效的代碼)。
這段代碼像病毒一樣傳播開(kāi)來(lái)，你可能已經(jīng)在不同的平臺(tái)上看到過(guò)它。
關(guān)于這個(gè)話題有許多爭(zhēng)論。一些人認(rèn)為有更短(也許也更好)的版本來(lái)做同樣的工作。
例如，我請(qǐng)求ChatGPT重寫一個(gè)更短的版本，得到如下結(jié)果:
是不是越短越好?
說(shuō)實(shí)話，我對(duì)原版的反應(yīng)是，什么鬼?我暗自發(fā)笑，認(rèn)為我可以在5分鐘內(nèi)使用map或類似的巧妙技術(shù)對(duì)其進(jìn)行重構(gòu)。然而，喝了杯咖啡后，我又看了看代碼片段。我發(fā)現(xiàn)意圖非常明確，諷刺的是，map版本需要更多的時(shí)間閱讀。
對(duì)于經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員來(lái)說(shuō)，較短的版本可能需要幾秒鐘才能弄清楚發(fā)生了什么。如果代碼是幾周前編寫的，嗯，可能需要多花幾分鐘時(shí)間才能理解。
原始代碼有什么問(wèn)題?
盡管第一個(gè)版本的代碼看起來(lái)簡(jiǎn)單明了，但它有一個(gè)缺點(diǎn)，就是不能將表示和業(yè)務(wù)邏輯結(jié)合起來(lái)。軟件被設(shè)計(jì)為具有靈活性和適應(yīng)性，這個(gè)版本的代碼使得將來(lái)更難進(jìn)行更改。
說(shuō)它混合了表現(xiàn)和邏輯，我的意思是，如果明天我們想顯示一個(gè)紅點(diǎn)(而不是藍(lán)色的)，我們必須修改相當(dāng)多的地方。
除此之外，我想先解決一個(gè)與邏輯泄漏有關(guān)的小問(wèn)題。你可能已經(jīng)注意到，它多次重復(fù)precentage> x &&precentage<= y，我將提取一個(gè)函數(shù)，使其更具可讀性:
const isPercentageInRange = (number: number, low: number, high: number) =>
number > low && number <= high;
如果我將百分比檢查分成兩個(gè)函數(shù)，并將藍(lán)色和白色的點(diǎn)畫在兩個(gè)函數(shù)中，并將結(jié)果安排在新的getPercentageRounds中，代碼將如下所示:
const getBandByPercentage = (percentage: number) => {
if (percentage === 0) return 0;
if (isPercentageInRange(percentage, 0.0, 0.1)) return 1;
if (isPercentageInRange(percentage, 0.1, 0.2)) return 2;
if (isPercentageInRange(percentage, 0.2, 0.3)) return 3;
if (isPercentageInRange(percentage, 0.3, 0.4)) return 4;
if (isPercentageInRange(percentage, 0.4, 0.5)) return 5;
if (isPercentageInRange(percentage, 0.5, 0.6)) return 6;
if (isPercentageInRange(percentage, 0.6, 0.7)) return 7;
if (isPercentageInRange(percentage, 0.7, 0.8)) return 8;
if (isPercentageInRange(percentage, 0.8, 0.9)) return 9;
return 10;
};
const drawProgress = (percentage: number) => {
const band = getBandByPercentage(percentage);
return new Array(10).fill("", 0, band).fill("?", band, 10);
};
const getPercentageRounds = (percentage: number) => {
return drawProgress(percentage).join("")
}函數(shù)getBandByPercentage將百分比映射到一個(gè)范圍(或級(jí)別)，而drawProgress根據(jù)范圍繪制圓點(diǎn)。
讓演示更加靈活。
我們可以提取藍(lán)白色的點(diǎn)作為參數(shù)，讓進(jìn)度條更加靈活。此外，為了保持當(dāng)前行為，我們可以使用當(dāng)前值作為默認(rèn)值:
const drawProgress = (
percentage: number,
done: string = "",
doing: string = "?"
) => {
const band = getBandByPercentage(percentage);
return new Array(10).fill(done, 0, band).fill(doing, band, 10);
};
然后可以在命令行中創(chuàng)建一個(gè)進(jìn)度條，如下所示:
const getPercentageRounds = (percentage: number) => {
return drawProgress(0.3, '#', '=').join("")
}如果想讓進(jìn)度條變寬，可以傳入一個(gè)較長(zhǎng)的版本字符串，表示“完成”和“正在做”:
const getPercentageRounds = (percentage: number) => {
return drawProgress(0.3, '##', '==').join("")
}所以我們可以有不同的進(jìn)度條，短的和長(zhǎng)的，藍(lán)色和紅色的。
代碼配置
重構(gòu)之后，表示和邏輯被拆分。我不喜歡使用這么大的if-else語(yǔ)句塊:
const getBandByPercentage = (percentage: number) => {
if (percentage === 0) return 0;
if (isPercentageInRange(percentage, 0.0, 0.1)) return 1;
if (isPercentageInRange(percentage, 0.1, 0.2)) return 2;
if (isPercentageInRange(percentage, 0.2, 0.3)) return 3;
if (isPercentageInRange(percentage, 0.3, 0.4)) return 4;
if (isPercentageInRange(percentage, 0.4, 0.5)) return 5;
if (isPercentageInRange(percentage, 0.5, 0.6)) return 6;
if (isPercentageInRange(percentage, 0.6, 0.7)) return 7;
if (isPercentageInRange(percentage, 0.7, 0.8)) return 8;
if (isPercentageInRange(percentage, 0.8, 0.9)) return 9;
return 10;
};正如Martin Fowler的文章所討論的，在某些情況下，將“代碼”拆分到配置文件中是有益的。
我們可以將這個(gè)百分比移動(dòng)到band mapping中，比如(甚至可以將bandConfig移動(dòng)到JSON文件中):
const bandConfig: BandConfig[] = [
{
range: [-Infinity, 0.0],
band: 0,
},
{
range: [0.0, 0.1],
band: 1,
},
//...
];
然后getBandByPercentage可以簡(jiǎn)化為
const getBandByPercentage = (percentage: number) => {
const config = bandConfig.find((c) => {
const [low, high] = c.range;
return isPercentageInRange(percentage, low, high)
});
return config?.band;
};隨著復(fù)雜性轉(zhuǎn)移到配置文件，getBandByPercentage函數(shù)只剩下幾行了。
重用邏輯?
讓我再演示一個(gè)用例來(lái)展示拆分可以帶來(lái)什么?，F(xiàn)在假設(shè)我們想在Web UI中使用進(jìn)度條——例如ProgressBar組件。
導(dǎo)入drawProgress函數(shù)非常容易:
const ProgressBar = ({
percentage,
}: {
percentage: number;
done?: string;
doing?: string;
}) => {
return (
<>
{drawProgress(percentage).map((character) => (
<span>{character}</span>
))}
</>
);
};在頁(yè)面上，我們可以看到這樣的內(nèi)容:
我們可以輕松地更改組件中的句點(diǎn)字符，并使進(jìn)度條更容易適應(yīng)新的UI需求。
總結(jié)
最終的結(jié)果可能沒(méi)有原始結(jié)果那么“高效”。盡管如此，通過(guò)明確的關(guān)注點(diǎn)分離(表示和業(yè)務(wù)邏輯，以及邏輯和配置)，它可以對(duì)新需求做出更積極的響應(yīng)。
