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

Question

第一个函数有另一个函数作为参数。这个函数创建了一个DOM元素，该元素必须具有onclick属性和来自第一个函数的参数函数!就像这样:

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内部。所以我可以调用myGlobalCallback()从funcTwo中删除，并在元素创建过程中取消使用setAttribute数据!(因为我只能设置("onclick"，"myGlobalCallback()");但这不是最好的办法，对吧?

谢谢你的帮助!

Answer 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代替，您的许多作用域问题(以及繁琐的引用问题)将会消失。