时间戳

首页 > 解决方案 > 在这种情况下有没有办法避免全局变量？

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

问题描述

我有一个第一个函数，它有另一个函数作为参数。这个函数创建了一个必须具有 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

解决方案

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

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

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

推荐阅读