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

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

来源

2017-07-04 Tribikram Adhikari

这不是坏习惯，但是，例如'var body = document.querySelector（'body'）;'可以简单写成'var body = document.body;' –

不知道那个谢谢！ –

变量最后只有它们被定义的范围。所以，即使你的变量从你的DOM中获得了相同的值，只要它们在范围内（在这种情况下，只要你的功能正在执行）。
别担心。

来源

2017-07-04 04:04:56 Zeokav

在JavaScript中，var被提升到功能级别，所以它的作用范围在于该功能。由于你在不同的函数中使用了相同的变量名，所以你很好，因为它们存在于不同的作用域中。

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

来源

2017-07-04 04:34:29

正如其他人所说，这是很好的，因为功能范围，但是，你应该知道，这是更好的做法，把他们的iife之外这两条线（约4号线）

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

这样的js只执行一次查找，而不是3次。这缓存了可以提高性能的dom查找。

来源

2017-07-04 04:58:42 theRemix

这几乎不会提高性能，dom查找是如此便宜，无论它发生一次还是三次都无所谓。不过，它会改善代码质量，因为它减少了重复。 – Bergi

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

回答

相关问题