Question

这是我的代码：

var p1Display = document.querySelector（“＃p1Display”）;

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

Answer 1

如果同一页面上还有其他脚本使用不良做法，并且还依赖于引用该元素的全局变量，则可能会导致问题。和您为该变量分配了不同的元素。这是因为（不幸的）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上的属性，这可能会导致语义混乱和难以理解的代码

具有与html ID相同名称的javascript变量是一种不好的做法吗？

1 个答案: