不要只是复制和粘贴代码，要使其可重用

背景

从互联网上复制粘贴代码是完全正常的。事实上，我们面临的大多数编码问题——无论是错误、样式挑战，还是对纯 CSS 中的流畅页面加载器的需求——通常都可以在线找到解决方案。我们寻找答案，互联网提供了大量的代码片段和指南。当然，过滤和验证这些解决方案以确保它们非常适合我们的需求是非常重要的。

编写代码时，很容易被复制和粘贴代码的便利所吸引。但随着时间的推移，我们可能会开始注意到我们的代码变得混乱且难以维护。模式通常是这样的：

1. 我们遇到了问题。
2. 在线搜索解决方案。
3. 复制我们找到的代码。
4. 将其粘贴到我们的代码库中。
5. 继续前进。

如前所述，我们最终很有可能再次面临同样的问题。这个循环不断重复，我们最终会重新审视和重新复制解决方案，而没有真正整合或理解它们（其他人面临的挑战现在已经成为我们自己的挑战？）。因此，我们回到第 1 步：遇到问题——然后​​循环继续。

解决方案

为了避免这个地狱循环，DRY 原则可能是解决方案。 DRY 原则代表“Don’t Repeat Yourself”，是一种软件开发原则，旨在减少代码重复和重复模式。将 DRY 原则应用于您的代码将用模块化和可引用的代码取代重复的代码和逻辑。或者在本文中，避免您因同样的问题再次从步骤 5 回到步骤 1。

让我们看一下这些示例：

使用函数避免重复

解决重复代码的函数。如果你写了一个函数，但你的代码库中仍然留下了重复的代码，那绝对是错误的。

如果您发现类似的逻辑块重复，请将它们重构为可重用的函数。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

创建一个用于面积计算的通用函数。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

创建实用函数

我仍然在谈论函数：创建实用函数是实现干净代码的方法之一。例如，如果代码的多个部分将字符串转换为标题大小写，请将其提取到实用函数中。

// before

let title1 = "hello world".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
let title2 = "good morning".split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');

考虑创建一个函数来处理这个问题。

// after
function toTitleCase(input: string): string {
    return input.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ');
}

let title1 = toTitleCase("hello world");
let title2 = toTitleCase("good morning");

共同值的常数

您调用具有相同端点的 API 多少次？我相信，不止一次。

如果在您的应用程序中使用了某些值（例如 URL 或配置选项），请将它们定义为常量。

// Before

function calculateAreaRectangle(width: number, height: number): number {
    return width * height;
}

function calculateAreaTriangle(base: number, height: number): number {
    return 0.5 * base * height;
}

如果后端改变了URL怎么办？如果你仍然像上面的例子一样编写这段代码，你将更改所有包含该URL的代码。如果您将端点移动到一个常量，您可以更改它一次，并且所有 API 调用仍然有效，这是明智的，因为它们遵循您所做的常量。

// after

function calculateArea(shape: "rectangle" | "triangle", dimension1: number, dimension2: number): number {
    if (shape === "rectangle") return dimension1 * dimension2;
    if (shape === "triangle") return 0.5 * dimension1 * dimension2;
    throw new Error("Invalid shape");
}

// Usage
const rectangleArea = calculateArea("rectangle", 5, 10);
const triangleArea = calculateArea("triangle", 5, 10);

还有其他想法吗？

这些例子只是一点点地描述了保持我们的代码指向而不是一遍又一遍地保留重复代码的重要性。欢迎在下方评论区分享你的想法。

概括

DRY（不要重复自己）原则是一种基本的编码实践，它鼓励开发人员通过尽可能重用代码来避免冗余。应用 DRY 原则可以显着增强整个代码库的可维护性、可读性和效率，因为它可以最大限度地减少需要更新时需要进行更改的位置的数量。 DRY 原则是关于创建可重用、可维护的代码。通过利用 TypeScript 的功能（例如函数、泛型、接口和枚举），您可以保持代码库整洁并减少冗余。

以上是不要只是复制和粘贴代码，要使其可重用的详细内容。更多信息请关注PHP中文网其他相关文章！