多次声明同一个变量是一种好习惯答案

【问题标题】：Is declaring the same variable multiple times a good practice多次声明同一个变量是一种好习惯
【发布时间】：2017-07-04 04:00:09
【问题描述】：

这是我的 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 都是一个单独的动画，并且具有不同的功能，尽管它们可能共享共同的元素。但是，我想知道这是否是一个好习惯。我应该在主函数中声明公共变量，以便它们可能在所有子函数的执行上下文中吗？另外，请强调任何看起来不好或不是好的做法。谢谢

【问题讨论】：

这不是坏习惯，但是，例如var body = document.querySelector('body');可以简单地写成var body = document.body;
不知道谢谢！

标签： javascript

【解决方案1】：

正如其他人所说，这很好，因为函数范围，但是，您应该知道将这两行移到它们的 iife 之外（到大约第 4 行）是更好的做法

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

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

【讨论】：

这几乎不会提高性能，dom 查找是如此便宜，无论发生一次还是三次都没有关系。但是，它会减少重复，从而提高代码质量。

【解决方案2】：

变量仅在它们定义的范围内持续存在。因此，即使您的变量从 DOM 中获取相同的值，只要它们在范围内，它们也只会在内存中（在这种情况下，只要您的功能正在执行）。
别担心。

【讨论】：

【解决方案3】：

在 JavaScript 中，var 被提升到函数级别，因此它的作用域是函数。由于您在不同的函数中使用相同的变量名，所以没问题，因为它们存在于不同的范围内。

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

【讨论】：