命名约定 - JS 中的 HTML 元素

Question

如何在 JS 中命名 HTML 元素对象？

var divEditorArea = document.getElementById("editorarea");

var btnCheckSyntax = document.getElementById("checksyntax");

这是一个好方法吗？

Answer 1

据我所知，JS 中没有命名 HTML 元素的约定。 Javascript 是一个如此多样化的世界，即使有一个约定，也很难被社区的大多数人遵循。例如，请参阅各种代码 linter 和代码样式约定 (https: //www.sitepoint.com/comparison-javascript-linting-tools/）。

名称应该清楚地表明您的意图，以便代码易于理解。我认为将 HTML 元素的类型添加到 JS 变量名称对于清晰起见（示例中的“btn”和“div”）没有多大用处，但在某些情况下它可能会增加清晰度。而且，如果您在一个团队中，您可能应该遵守团队的惯例。

运用您的最佳判断并始终努力使代码清晰。

Answer 2

如果您使用普通 JS，正如 Vinicius 所说，没有为 HTML DOM 元素命名 JS 变量的约定。

我将它们命名为：

let elCheckSyntax = document.querySelector("#checksyntax");

OR

let elementEditorArea and elementCheckSyntax

另一种方法是一些团队喜欢在 DOM 元素上添加 $ 前缀。因此，一旦团队中的任何人看到任何以 $ 为前缀的变量，他们就知道它是一个 DOM 元素。

像这样

let $editorArea;
let $checkSyntax;

，这完全取决于你是否独立工作的便利性以及你的团队的命名约定