极限改造:代码版

2025-05-24

极限改造:代码版

我有点痴迷于编写简洁的代码。代码应该面向未来的开发者(包括你自己),并且具有可扩展性——它应该能够相对轻松地为应用程序添加功能并维护代码。如果我们为计算机编写代码,我们只会编写二进制代码!以下是我编写简洁代码的一些技巧:

1. 使用清晰的变量和函数名称

如果你写出完整、描述性的变量和函数名称,代码会更容易阅读。下面的代码不太清晰:

function avg (a) {
  let s = a.reduce((x, y) => x + y)
  return s / a.length
}
Enter fullscreen mode Exit fullscreen mode

如果我们写出完整的变量名,它会变得更易读!

function averageArray (array) {
  let sum = array.reduce((number, currentSum) => number + currentSum)
  return sum / array.length
}
Enter fullscreen mode Exit fullscreen mode

不要缩小您自己的代码;使用下一个开发人员可以理解的完整变量名。

2. 编写只做一件事的简短函数

如果函数只做一件事,它会更容易理解、可读性和维护性。如果我们编写简短的函数时出现错误,通常更容易找到该错误的来源。此外,我们的代码也更具可复用性。例如,上面的函数可以重命名为“sumAndAverageArray”,因为我们使用 reduce 计算总和,然后计算该总和的平均值。

function sumAndAverageArray(array) {
  let sum = array.reduce((number, currentSum) => number + currentSum)
  return sum / array.length
}
Enter fullscreen mode Exit fullscreen mode

我们可以把它拆分成两个函数,这样每个代码部分的功能就更加清晰了。另外,如果我们要创建一个大型程序,这个sumArray函数会非常方便!

function sumArray(array) {
  return array.reduce((number, currentSum) => number + currentSum)
}

function averageArray(array) {
  return sumArray(array) / array.length
}
Enter fullscreen mode Exit fullscreen mode

如果您正在编写一个可以用“和”来命名的函数——它实际上应该是两个函数。

总结一下我对函数的提示...

函数规则信息图

3. 文档

为您的代码编写良好的文档,以便未来的开发人员了解您的代码在做什么以及为什么这样做。

以下代码中包含未记录的“神奇数字”。

function areaOfCircle (radius) {
  return 3.14 * radius ** 2
}
Enter fullscreen mode Exit fullscreen mode

我们可以为上述代码添加注释,以便那些不知道求圆面积的数学方程的人更容易理解。

const PI = 3.14 // PI rounded to two decimal places

function areaOfCircle (radius) {
  // Implements the mathematical equation for the area of a circle:
  // Pi times the radius of the circle squared.
  return PI * radius ** 2
}
Enter fullscreen mode Exit fullscreen mode

注意:以上代码只是一个例子!您可能更倾向于使用 Math.PI,而不是自己创建 PI 估算。

您的评论应该描述您的代码的“原因”。

额外福利:使用文档风格来规范你的代码。对于 Python,我喜欢Google 风格的文档字符串 (Docstrings),而JSDoc对于 JavaScript 来说非常棒。

4. 桑迪·梅茨的规则

Sandi Metz——一位出色的 Ruby 开发人员、演讲者和作家——制定了四条使用面向对象语言编写干净代码的规则。

  1. 类不能超过 100 行代码
  2. 方法和函数不能超过 5 行代码
  3. 向方法中传递的参数不超过 4 个
  4. 控制器只能实例化一个对象

我强烈建议观看关于这些规则的完整演讲!

过去两年左右,我一直在坚持遵循这些原则,它们已经根深蒂固,我几乎不再去想它们了!我真的很喜欢它们,而且我认为它们让代码更易于维护。

这些规则只是指导方针,但它们可以显著清理您的代码。

总结 Sandi Metz 规则...

Sandi Metz 规则的信息图

5.保持一致

编写代码时,一致性至关重要。人们不应该只看代码库就能准确说出每行代码的作者,除非你使用 git blame!如果你在 JavaScript 中使用分号,请在每个语句的末尾使用分号。同时,也请始终使用 " vs ' !

我建议使用样式指南和 linter 工具来强制执行这些标准——例如,我喜欢JavaScript 的JS 标准和Python 的PEP8!我甚至设置了我的文本编辑器,以便在每次保存时强制执行这些标准!

找到一种代码风格并坚持下去。

6. 保持代码简洁

对新程序员来说,首先要教的一件事就是“不要重复自己”。如果你注意到代码中存在一些模式,就用代码来减少这些重复。我经常鼓励我的学生玩SET游戏来提高他们的模式识别能力。

话虽如此,如果你过度 DRY 你的代码,或者选择了错误的抽象模式,你的代码可能会变得难以阅读,并且你可能需要在未来重复更多代码。Sandi Metz 有一篇很棒的文章,解释了为什么“重复远比错误的抽象更便宜”。

不要重复自己,也不要将代码抽象到难以理解的程度。

7.封装+模块化

对变量和函数进行分组,以使您的代码更具可重用性和可理解性。

let name = 'Ali'
let age = 24
let job = 'Software Engineer'

let getBio = (name, age, job) => `${name} is a ${age} year-old ${job}`   
Enter fullscreen mode Exit fullscreen mode

如果您的程序中有多个人员,则以下内容会更加清楚:

class Person {
  constructor (name, age, job) {
    this.name = name
    this.age = age
    this.job = job
  }

  getBio () {
    return `${this.name} is a ${this.age} year-old ${this.job}` 
  }
}
Enter fullscreen mode Exit fullscreen mode

或者如果你的剧本中只有一个人:

const ali = {
  name: 'Ali',
  age: 24,
  job: 'Software Engineer',
  getBio: function () {
    return `${this.name} is a ${this.age} year-old ${this.job}` 
  }
}
Enter fullscreen mode Exit fullscreen mode

类似地,将长程序拆分成不同的文件,这样你的代码就更加模块化,更容易理解。长文件通常很难筛选,所以你可能需要在不同项目中使用小块代码。

将代码中的类似项目分组,以便更易于重复使用。

简而言之...

这些是一些清理代码的好指南,但它们并非一成不变!我个人不会一直使用所有这些指南(请参阅我的个人项目!),而且没有完美的代码。这些只是一些编写代码的技巧,这些代码更容易被其他开发人员重用、阅读和扩展。

如果你喜欢这篇文章,请继续关注!我每周五都会发送一篇新闻简报,分享我最喜欢的文章以及我当周的写作心得。另外,欢迎在推特上分享你最喜欢的编写简洁代码的技巧!

文章来源:https://dev.to/aspittel/extreme-makeover-code-edition-k5k
PREV
Storybook 入门:如何在没有应用程序的情况下开发 React 组件
NEXT
CSS:从零到精通媒体查询