首页 >web前端 >js教程 >属于博物馆而不是存储库的代码

属于博物馆而不是存储库的代码

Patricia Arquette
Patricia Arquette原创
2025-01-14 09:10:47152浏览

Code That Belongs in a Museum, Not a Repository

“为什么我们不应该庆祝美丽的代码”

我们都见过它——代码的结构如此复杂和原始,以至于它属于博物馆,而不是存储库。这是一种你会敬畏地盯着看一会儿的代码……直到你意识到你需要调试它。然后,就像我们其他凡人一样,您会想知道为什么有人决定编写 JavaScript,就像他们正在写下一部伟大的美国小说一样。

让我们明白一点:漂亮的代码只有有用才算漂亮。如果您的团队需要博士学位。用深奥的语法来弄清楚一个功能是如何工作的,恭喜你——你已经创造了一件无人能维护的杰作。

这就是为什么你应该抵制创建过于聪明的代码的冲动以及该怎么做。系好安全带;例子即将到来。

过度设计的优雅的魅力

首先,我们来看看开发者为什么要编写这种代码。

  • 感觉很好。编写聪明的代码可以满足智力的渴望。这是一个灵活的时刻,一个“看看我能做什么”的时刻。
  • 它给(一些)人留下了深刻的印象。直到这些人承担维护它的任务。然后,这只会让他们感到沮丧。
  • 它显示出精通。或者至少应该是这样。但真正的掌握并不是创造复杂性,而是创造复杂性。这是简单地解决问题。

示例 1:“WTF”工厂函数

这是我最近偶然发现的宝石:

const createMultiplier = (x) => (y) => (z) => x * y * z;
const multiply = createMultiplier(2)(3);
console.log(multiply(4)); // Outputs 24

漂亮吗?当然。但祝初级开发者好运,他们必须弄清楚这里发生了什么。三层函数来乘三个数字?恭喜你,你已经把算术变成了奥运会项目。

不要这样做。这是为人类编写的相同功能:

function multiplyThreeNumbers(x, y, z) {
  return x * y * z;
}
console.log(multiplyThreeNumbers(2, 3, 4)); // Outputs 24

可读。简单的。维持大家的理智。

示例 2:莎士比亚的承诺链

现在让我们来谈谈看起来像是莎士比亚代写的承诺链:

fetch(url)
  .then((response) => response.json())
  .then((data) =>
    data.map((item) =>
      item.isActive
        ? { ...item, status: "active" }
        : { ...item, status: "inactive" }
    )
  )
  .then((updatedData) =>
    updatedData.reduce(
      (acc, curr) =>
        curr.status === "active"
          ? { ...acc, active: [...acc.active, curr] }
          : { ...acc, inactive: [...acc.inactive, curr] },
      { active: [], inactive: [] }
    )
  )
  .then((finalResult) => console.log(finalResult))
  .catch((error) => console.error(error));

这段代码有效。但这也是对任何必须维护它的人的犯罪。为什么数据转换的每一步都像俄罗斯套娃一样嵌套在下一个步骤中?

让我们重构一下:

async function processData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();

    const updatedData = data.map((item) => ({
      ...item,
      status: item.isActive ? "active" : "inactive",
    }));

    const finalResult = updatedData.reduce(
      (acc, curr) => {
        if (curr.status === "active") {
          acc.active.push(curr);
        } else {
          acc.inactive.push(curr);
        }
        return acc;
      },
      { active: [], inactive: [] }
    );

    console.log(finalResult);
  } catch (error) {
    console.error(error);
  }
}
processData(url);

将逻辑分解为步骤使代码可读。它仍然在做同样的事情,但现在每个阶段发生的事情都很清楚。

为什么简单更好

说到软件,请记住这条黄金法则:你的代码不是个人日记。它是一种沟通工具。如果您的团队无法阅读它,他们就无法使用它。如果他们无法与之合作,业务就无法前进。

这就是简单获胜的原因:

1 更快的入门:初级开发人员不需要 Rosetta Stone 来理解您的代码。
2 更轻松的调试:当错误出现时(它们一定会出现),清晰的逻辑使它们更容易查明。
3 个更快乐的团队:没有人喜欢感到愚蠢。过于聪明的代码会疏远你的队友。

外卖

编写代码就像在经历了一夜的艰难睡眠后向未来的自己解释一样。善待下一个必须阅读您作品的开发人员 - 因为很有可能,那个开发人员就是您。

美丽的代码并不在于它看起来有多花哨,而在于它的外观。这是关于它如何有效地解决问题。任何少的东西都只是虚荣心的表现。

以上是属于博物馆而不是存储库的代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn