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');
                    }

                }


        });

    })();


};

})();

正如您所看到的，我在代码中多次声明了具有完全相同值的变量，但它们具有不同的功能。每个生命都是一个单独的动画，虽然它们可能共享共同的元素，但它们具有不同的功能。但是，我想知道这是不是一个好习惯。我应该在main函数中声明公共变量，以便它们可能位于所有子函数的执行上下文中吗？此外，请突出显示任何看起来不好或不好的做法。谢谢

Answer 1

正如其他人所说，由于功能范围很好，但是，你应该知道将这两条线移到他们的生命之外是更好的做法（到第4行）

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

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

Answer 2

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

Answer 3

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

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

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

3 个答案: