在这种情况下有没有办法避免全局变量？答案

【问题标题】：Is there a way to avoid global variable in this case?在这种情况下有没有办法避免全局变量？
【发布时间】：2021-10-20 01:58:04
【问题描述】：

我有一个第一个函数，它有另一个函数作为参数。这个函数创建了一个必须具有 onclick 属性的 DOM 元素，这个参数函数来自第一个函数！就像这样：

function funcOne(name,callback) {
    let button = document.createElement("button");
        button.setAttribute("id","myBtn");
        button.innerHTML = "Go to Func 2";
        button.setAttribute("onclick","funcTwo(this,'"+name+"','"+callback+"')");
    document.body.appendChild(button);
}

function funcTwo(element,name,callback) {
    let elementId = element.id;
    let yourName = name;
    console.log(yourName);
    callback();
}

funcOne('John',function(){alert('Holly cow!');});

我相信，错误发生在“setAttribute”时刻！我看到的唯一解决方案是设置：

globalThis.myGlobalCallback= callback;

funcOne 内部。所以我可以从 funcTwo 调用“myGlobalCallback()”，并在元素创建期间取消使用 setAttribute 数据！（因为我只能设置 ("onclick","myGlobalCallback()"); 但这不是最好的方法，是吗？

感谢您的帮助！

【问题讨论】：

标签： javascript

【解决方案1】：

使用 JavaScript 事件侦听器而不是 HTML 属性分配事件侦听器，您将能够在 funcOne 闭包内引用 name 而不是将其（或回调）设为全局。

function funcOne(name, callback) {
    const button = document.createElement("button");
    button.id = 'myBtn';
    button.textContent = "Go to Func 2";
    button.addEventListener('click',() => {
        funcTwo(button, name, callback);
    });
    document.body.appendChild(button);
}

function funcTwo(element, name, callback) {
    const elementId = element.id;
    const yourName = name;
    console.log(yourName);
    callback();
}

最佳做法是永远不要使用内联处理程序（即 HTML 中的 onclick="..."） - 改用 addEventListener，您的许多范围问题（以及繁琐的引用问题）都会消失。

【讨论】：