Question

我正在编写一个脚本来管理HTML菜单与用户点击之间的交互，所以这是我的情况：



menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');




function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {

    var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
    var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
    var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
    var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
    var classeUlSubMenus = subMenuCSSClass;//sub-menu

    const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
    for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
        siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);

    };
    const menu = document.getElementsByClassName(classeMainNavigation);
    for (let i = 0; i< menu.length; i++) {
        menu[i].addEventListener("click", SubMenuInteractive);
    };
}


function HeaderBrandingInteractive(e) {
    //magic 
}

function SubMenuInteractive(e) {
    //magic 
}

这给我一个错误，因为在最后两个函数中，我需要访问在menuScripts（）{}中声明的某些变量

这些变量在后两个函数中不存在。但是如果我从声明中删除“ var”，就这样



menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');




function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {

    classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
    classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
    classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
    classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
    classeUlSubMenus = subMenuCSSClass;//sub-menu

    const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
    for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
        siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);

    };
    const menu = document.getElementsByClassName(classeMainNavigation);
    for (let i = 0; i< menu.length; i++) {
        menu[i].addEventListener("click", SubMenuInteractive);
    };
}


function HeaderBrandingInteractive(e) {
    //magic 
}

function SubMenuInteractive(e) {
    //magic 
}

有效！我还尝试使用“ const”代替“ var”，但存在可访问性问题。

理论上

var x = 'something';

必须等于

x = 'something' ;

我没有从javascript理论中得到什么？

Answer 1

用var声明的变量的作用域为enclosing function。

当x ='something'时，变量x将在分配时全局创建-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var。

将值分配给未声明的变量将其隐式创建为全局变量（它成为全局对象的属性）时，分配已执行。

在您的代码中，您首先要分配变量，然后再对HeaderBrandingInteractive-进行函数调用

classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
classeUlSubMenus = subMenuCSSClass;//sub-menu

上面的代码将创建全局变量，例如window.classeHamburger。因此，您可以在功能之外访问它。

Answer 2

var x = 'something';不应等于x = 'something';，因为如果在函数范围内将变量声明为var x = 'something';，则该变量在特定函数的范围内是“可见的”。当您简单地放置x = 'something';时，该变量在全局范围内将被清除，可以作为window.x进行访问。

Answer 3

JavaScript使用三种变量声明。

var：用var声明的变量的范围是其当前的执行上下文，它是封闭的函数，或者对于在任何函数之外声明的变量，是全局的。
let：允许您声明变量，其范围限于使用该变量的块，语句或表达式。这与整个功能在本地使用var关键字不同，无论 block 范围如何。
const：常量是块作用域的，非常类似于使用let语句定义的变量。常量的值不能通过重新分配而更改，也不能重新声明。
Neither of the above：如果您未指定var或let，则JS会将该变量视为全局变量，这意味着可以在整个脚本中对其进行访问。
< / li>

注意：变量声明是悬挂的，这意味着声明将被推到代码的顶部（在<{1}}范围内，在{{ {1}}和let/const 整个脚本的顶部），但初始化不会。 Learn More...

在上面的代码中，当您使用var时，变量仅限于global的范围。当您不指定任何内容时，变量将变为var，因此可以在任何位置访问。

Answer 4

不建议声明不带var关键字的变量。它可能会意外覆盖现有的全局变量。

使用var关键字声明的变量的范围将变为全局变量，而不管声明的位置如何。可以从网页中的任何位置访问全局变量。访问Scope了解更多信息。

Answer 5

感谢您提供的所有说明。现在，对我来说，更清晰的是var local / global概念。

由于始终使用“ var”关键字来保护变量不受外部影响是值得的-@ G.M。 Patel-我的问题是无法将参数传递给通过.addEventListener启动的函数。我看着How to pass arguments to addEventListener listener function?，但这些解决方案对我没有帮助。

我所做的是将两个函数（HeaderBrandingInteractive和SubMenuInteractive）向上移动，使它们成为menuScript的一部分。这样，无需编写代码即可从HeaderBrandingInteractive和SubMenuInteractive访问menuScript的局部变量。现在可以了。也许将来会对某人有所帮助。

menuScripts('site-header-branding', 'menu-mobile-toggle', 'site-header-navigation', 'main-navigation', 'sub-menu');




function menuScripts(siteHeaderBrandingCSSClass, hamburgerCSSClass, wrapperOfMainNavigationCSSClass, ulMainNavigationCSSClass, subMenuCSSClass) {

    var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
    var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
    var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
    var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
    var classeUlSubMenus = subMenuCSSClass;//sub-menu

    const siteHeaderBrandingDOM = document.getElementsByClassName(classeSiteHeaderBranding);
    for (let i = 0; i< siteHeaderBrandingDOM.length; i++) {
        siteHeaderBrandingDOM[i].addEventListener("click", HeaderBrandingInteractive);

    };
    const menu = document.getElementsByClassName(classeMainNavigation);
    for (let i = 0; i< menu.length; i++) {
        menu[i].addEventListener("click", SubMenuInteractive);
    };

    function HeaderBrandingInteractive(e) {
        //magic 
    }

    function SubMenuInteractive(e) {
        //magic 
    }



}

我也试图删除

    var classeSiteHeaderBranding = siteHeaderBrandingCSSClass; //site-header-branding
    var classeHamburger = hamburgerCSSClass; //menu-mobile-toggle
    var classeWrapperOfMainNavigation = wrapperOfMainNavigationCSSClass;//site-header-navigation
    var classeMainNavigation = ulMainNavigationCSSClass; //main-navigation
    var classeUlSubMenus = subMenuCSSClass;//sub-menu

因为@James说这是浪费时间，这是正确的。

但是您需要更改这些变量的前向用法，以便它们与新名称匹配。

例如，我的SubMenuInteractive是：

function SubMenuInteractive(e) {
  //some code
  if (e.toElement.parentElement.parentElement.getAttribute('class') == classeMainNavigation ) {
      console.log("it's him");
      }
  //some other code
}

现在需要像这样，“ classeMainNavigatin”变成“ ulMainNavigationCSSClass”，就像在“ menuScript”声明中一样：

function SubMenuInteractive(e) {
  //some code
  if (e.toElement.parentElement.parentElement.getAttribute('class') == ulMainNavigationCSSClass ) {
      console.log("it's him");
      }
  //some other code
}

一个函数启动另一个函数时的可变性可访问性-javascript

5 个答案: