Javascript 闭包和 onload

Question

我正在学习使用闭包，但我不确定什么是适合我的情况的最佳方法。为了清楚起见，我编辑了我的代码，它包含虚拟代码。如果用户单击 test 元素，我必须访问 handleCannon 函数。如果我在 onload 事件中声明 handleCannon ，它将不起作用。如果我在 onload 事件之外声明这两个函数，则 handlebullet 函数将无法获取 test1 元素，因为它尚未加载。下面的代码可以接受吗？最好的方法是什么？

let handleCannon;

window.onload = function() {

    handleCannon = (function(el) {
        return function(el) {
            el.innerHTML = "bananas";
            handleBullet.reset();
        }
    })();

    let handleBullet = (function() {

        let test1 = document.getElementsByClassName("test1")[0];
        let rect = test1.getBoundingClientRect();

        console.log(rect);

        return {
            reset: function(){
                console.log("reset");
            },
        }

    })();

}

正文包含:

<div class="test" onclick="handleCannon(this)"></div>

<div class="test1"></div>

Answer 1

不要使用内联属性处理程序(这很难管理，通常被认为是非常糟糕的做法)，而是使用 Javascipt 在 onload 内附加处理程序:

window.onload = function() {
  const test = document.querySelector('.test');
  // handleCannon:
  test.addEventListener('click', () => {
    test.textContent = 'bananas';
    handleBullet.reset();
  });
  // ...

请注意，分配给 onload 将意味着如果有其他内容分配给 onload，则该处理程序将被覆盖(同样，另一个处理程序已经在 onload 上) > 当此脚本运行时将被覆盖) - 您可以考虑使用 addEventListener 相反，允许您的脚本在多个位置监听 load 事件，这对于较大的情况很有用或多个脚本:

window.addEventListener('load', () => {
  const test = document.querySelector('.test');
  // handleCannon:
  test.addEventListener('click', () => {
    test.textContent = 'bananas';
    handleBullet.reset();
  });
  // ...
});