js命名规范

js命名规范

在计算机科学中只有两件难事:缓存失效和命名。

Phil Karlton

撇开缓存无效不谈,这确实很困难,每当俺找不到正确的名称时,这个臭名昭著的引用就会在俺的脑海中萦绕。

当有人需要快速理解代码时,清晰的命名提供了重要的上下文,无论他们是在编码、调试还是协助队友——俺不需要问别人用户的意思,但俺必须问数据的意思。

虽然俺不经常找到最好的名字,但俺试图通过遵循一些基本规则来优化俺的代码。

使用有意义的前缀

虽然这些前缀不是通用的,但它们对于在您的团队中建立一种共享的语言是很好的。在你的代码库中始终如一地使用它们可以使阅读更容易理解。

  • 函数名前缀get、 find、 fetch用于代表该函数返回一个值
  • 函数名前缀set、update用于代表该函数将用于更新
  • on、handle用于事件处理函数
  • is、should、can代表一个值或函数将是一个布尔类型

在团队中成为标准的任何约定都有助于提高可读性。请确保在项目Readme文件或wiki中记录这些内容。

使用有意义的单词

例如,开发人员通常在默认情况下将变量命名为data,但是让我们检查一下它的几个定义:

  • 作为推理、讨论或计算基础的事实信息(如测量或统计)
  • 可传输或处理的数字形式的信息

这些定义可以引用我们处理的任何变量,因此它们不会给读者提供任何信息。让我们来看一个不遵循这个规则的例子:

function total(data) {
  let total = 0;
  for (let i = 0; i < data.length; i++) {
    total += data[i].value;
  }

  return total;
}

我们知道这个函数计算了一些东西,但我们不确定是什么。

使用完整的单词

当涉及到变量命名时,快捷方式通常意味着缩写或单个字符的变量名称。

像上面的案例代码一样,让我们看一个不遵守规则的函数:

function totBal(accts) {
  let tot = 0;
  for (let i = 0; i < accts.length; i++) {
    tot += accts[i].bal;
  }

  return tot;
}

我们可能可以猜测accts是account, tot是total,但是我们不能一眼就看出来代码的含义。

不要用“无用”的词

container和wrapper只有在与它们所包含的东西相关时才有意义。问题是,不是基本元素的任何组件都包含另一个组件。

您还会陷入将组件命名为MyComponentContainerContainer的尴尬境地。wrapper也是如此。

注意拼写: )

单词拼写错误会产生bug,使搜索代码更加困难。拼写错误很容易被忽略,但是如果代码库中的所有内容都有正确的拼写,就会产生巨大的差异,尤其是在尝试全局查找/替换时。

正确案例

同时应用所有规则,我们得到如下函数:

function getAccountsTotalBalance(accounts) {
  let totalBalance = 0;
  for (let accountIndex = 0; accountIndex < accounts.length; accountIndex++) {
    totalBalance += accounts[accountIndex].balance;
  }

  return totalBalance;
}

虽然accountIndex与i可能存在争议,但函数的其余部分应该更清楚。getAccountsTotalBalance完全传达了函数的意图,前缀get表示它不会导致任何突变。为了读者的利益,代码作者投入更多的精力是值得的。6个月后,当他们维护代码时,你未来的自己会感激他们所做的额外工作。

如果担心行长度,可以考虑使用Prettier之类的工具来自动格式化代码。

总结

这些规则的目标是让我们为未来的读者编写的代码尽可能有意义。找到适合您的上下文的规则,如果一个规则弊大于利,就更改或放弃它。把你的团队规则编成代码将有助于交流你在这个问题上的想法,而不是打击你的同事。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/5215.html

发表评论

登录后才能评论