时间戳

首页 > 解决方案 > 将 javascript 变量与 html ID 同名是不好的做法吗？

javascript - 将 javascript 变量与 html ID 同名是不好的做法吗？

问题描述

这是我的代码：

var p1Display = document.querySelector("#p1Display");

我想知道如果我只是使用变量来获取相同的 ID，那么让 ID 和变量同名是否是不好的做法？

标签： javascripthtmlcss

解决方案

如果同一页面上有其他脚本使用不良做法并且还依赖于引用该元素的全局变量，并且您将不同的元素分配给该变量，则可能会导致问题。这是因为 ID （不幸地）分配给了window：

// This doesn't throw a ReferenceError because window.mydiv exists:
console.log(mydiv);
<div id="mydiv">
</div>

举一个问题的例子：

<div id="mydiv">text content!</div>

<script>
// One script written by someone else (not you):
setTimeout(() => {
  console.log('Expecting text content to be `text content!`');
  console.log(mydiv.textContent);
  console.log('Oops...');
}, 1000);
</script>

<script>
// Your script, which assigns something *other* than `#mydiv` to the variable named `mydiv` in global scope:
const mydiv = document.createElement('div');
mydiv.textContent = 'Another div';
document.body.appendChild(mydiv);
</script>

解决方案是：

(1) 不要在顶层定义变量，因为这会干扰其他脚本的变量名 - 改用 IIFE

(2) 不要依赖隐式引用 上的属性window，这会导致语义混乱和代码难以阅读

推荐阅读