多次声明相同的变量是一种很好的做法

Question

这是我的javascript代码：

(function(){
"use strict";
document.addEventListener("DOMContentLoaded",animations); /*on content loaded */

function animations() {

/*start of animation for the toggle navigation button in smaller view ports*/
(function () { 
var button = document.getElementById('nav-icon');
button.addEventListener('click', function(){
if (this.classList.contains('active')===true) {
this.classList.remove('active');
}
else {
this.classList.add('active');
}
})
})();  /*End of the toggle navigation animation*/
/*Start of  scrolling side navigation for smaller view ports*/
(function(){
var button = document.getElementById('nav-icon');
var body = document.querySelector('body');
button.addEventListener('click', function(){
if (this.classList.contains('active')===true) {
body.classList.add('active-nav');
}
else {
body.classList.remove('active-nav');
}
});
})(); /*End of scrolling side navigation*/

(function () {
// body...
var media = window.matchMedia("(min-width: 992px)");
var body = document.querySelector('body');
var button = document.getElementById('nav-icon');
window.addEventListener('resize',function(){
if (media.matches) {
body.classList.remove('active-nav');
if (button.classList.contains('active')===true) {
button.classList.remove('active');
}
}

});
})();

};
})();

如您所见，我已经在我的代码中多次声明了具有完全相同值的变量，但它们位于不同的函数中。 每个 IIFE 都是一个单独的动画，并且具有不同的功能，尽管它们可能共享共同的元素。但是，我想知道这是否是一种好的做法。我是否应该在主函数中声明公共变量，以便它们可能位于所有子函数的执行上下文中？另外，请突出显示任何看起来不好或不是好做法的内容。谢谢

Answer 1

正如其他人所说，由于函数作用域，这很好，但是，您应该知道将这两行移到它们的 iife 之外(大约第 4 行(是更好的做法

var button = document.getElementById('nav-icon'); 
var body = document.querySelector('body');

这样 js 只执行一次查找，而不是 3 次。这将缓存 dom 查找，从而提高性能。

Answer 2

变量只代表它们定义的范围。因此，即使您的变量从 DOM 中获取相同的值，只要它们在范围内(在本例中，只要您的函数正在执行(，它们就会在内存中。
别担心。

Answer 3

在 JavaScript 中，var被提升到函数级别，因此它的作用域为函数。由于您在不同的函数中使用相同的变量名称，因此您可以，因为这样它们就存在于不同的作用域中。

正如@theRemix和@Bergi所指出的，除了范围之外，如果你的变量在每个匿名函数中表示相同的数据，请考虑重构以提高可读性和代码维护。