解读荷兰DigiD应用程序非常高效的代码重构

今天我在看到一个程序员发布了一个非常有趣的代码片段(非常高效的代码)。

十余年的福海网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整福海建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“福海网站设计”,“福海网站推广”以来,每个客户项目都认真落实执行。

这段代码像病毒一样传播开来,你可能已经在不同的平台上看到过它。

关于这个话题有许多争论。一些人认为有更短(也许也更好)的版本来做同样的工作。

例如,我请求ChatGPT重写一个更短的版本,得到如下结果:

是不是越短越好?

说实话,我对原版的反应是,什么鬼?我暗自发笑,认为我可以在5分钟内使用map或类似的巧妙技术对其进行重构。然而,喝了杯咖啡后,我又看了看代码片段。我发现意图非常明确,讽刺的是,map版本需要更多的时间阅读。

对于经验丰富的开发人员来说,较短的版本可能需要几秒钟才能弄清楚发生了什么。如果代码是几周前编写的,嗯,可能需要多花几分钟时间才能理解。

原始代码有什么问题?

尽管第一个版本的代码看起来简单明了,但它有一个缺点,就是不能将表示和业务逻辑结合起来。软件被设计为具有灵活性和适应性,这个版本的代码使得将来更难进行更改。

说它混合了表现和逻辑,我的意思是,如果明天我们想显示一个红点(而不是蓝色的),我们必须修改相当多的地方。

除此之外,我想先解决一个与逻辑泄漏有关的小问题。你可能已经注意到,它多次重复precentage> x &&precentage<= y,我将提取一个函数,使其更具可读性:

const isPercentageInRange = (number: number, low: number, high: number) =>
number > low && number <= high;

如果我将百分比检查分成两个函数,并将蓝色和白色的点画在两个函数中,并将结果安排在新的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("")
}

函数getBandByPercentage将百分比映射到一个范围(或级别),而drawProgress根据范围绘制圆点。

让演示更加灵活。

我们可以提取蓝白色的点作为参数,让进度条更加灵活。此外,为了保持当前行为,我们可以使用当前值作为默认值:

const drawProgress = (
percentage: number,
done: string = "",
doing: string = ""
) => {
const band = getBandByPercentage(percentage);
return new Array(10).fill(done, 0, band).fill(doing, band, 10);
};

然后可以在命令行中创建一个进度条,如下所示:

const getPercentageRounds = (percentage: number) => {
return drawProgress(0.3, '#', '=').join("")
}

如果想让进度条变宽,可以传入一个较长的版本字符串,表示“完成”和“正在做”:

const getPercentageRounds = (percentage: number) => {
return drawProgress(0.3, '##', '==').join("")
}

所以我们可以有不同的进度条,短的和长的,蓝色和红色的。

代码配置

重构之后,表示和逻辑被拆分。我不喜欢使用这么大的if-else语句块:

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的文章所讨论的,在某些情况下,将“代码”拆分到配置文件中是有益的。

我们可以将这个百分比移动到band mapping中,比如(甚至可以将bandConfig移动到JSON文件中):

const bandConfig: BandConfig[] = [
{
range: [-Infinity, 0.0],
band: 0,
},
{
range: [0.0, 0.1],
band: 1,
},
//...
];

然后getBandByPercentage可以简化为

const getBandByPercentage = (percentage: number) => {
const config = bandConfig.find((c) => {
const [low, high] = c.range;
return isPercentageInRange(percentage, low, high)
});

return config?.band;
};

随着复杂性转移到配置文件,getBandByPercentage函数只剩下几行了。

重用逻辑?

让我再演示一个用例来展示拆分可以带来什么。现在假设我们想在Web UI中使用进度条——例如ProgressBar组件。

导入drawProgress函数非常容易:

const ProgressBar = ({
percentage,
}: {
percentage: number;
done?: string;
doing?: string;
}) => {
return (
<>
{drawProgress(percentage).map((character) => (
{character}
))}

);
};

在页面上,我们可以看到这样的内容:

我们可以轻松地更改组件中的句点字符,并使进度条更容易适应新的UI需求。

总结

最终的结果可能没有原始结果那么“高效”。尽管如此,通过明确的关注点分离(表示和业务逻辑,以及逻辑和配置),它可以对新需求做出更积极的响应。

新闻名称:解读荷兰DigiD应用程序非常高效的代码重构
文章地址:http://www.gawzjz.com/qtweb/news29/170179.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联