Javascript闭包和onload

我正在学习使用闭包，对于我的情况，我不确定什么是最好的方法。为了清晰起见，我编辑了我的代码，它包含伪代码。如果用户单击

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>

---

不要使用内联属性处理程序（很难管理，通常被认为是非常糟糕的做法），而是使用Javascipt将处理程序附加到

onload

中：

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

注意，分配给<代码> OnLoad 将意味着如果其他代码分配给<代码> OnLoad >，此处理程序将被覆盖（类似地，在代码“OnLoad ”上的另一个处理程序将在该脚本运行时被重写）。允许脚本在多个位置侦听

加载

事件，这对于较大或多个脚本非常有用：

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

---

为什么我们使用一个内联事件处理程序来强制您使用全局？您的意思是我应该使用类似“function name（）{…}”而不是“let name=（function（）{…}）（；”，并从onload事件中声明它们？不确定您为什么要使用为

handleCannon

no返回函数的函数，您应该使用addEventListener来绑定事件谢谢！我将尝试实现此代码。所以使用“window.addEventListener（'load'，（）=>{…”允许我从多个.js文件中向onload事件添加代码吗？我试图将handleCannon和handleBullet分离在两个不同的.js文件中，并使用window.addEventListener添加它们，但当然handleCannon现在无法访问handleBullet。我必须将这两个文件保存在同一个文件中吗？我试图通过保留内容来整理我的代码分开的。两个单独的脚本进行通信的唯一方法是通过全局的东西。要么使用全局的，要么使用模块绑定器，比如webpack。为了保持我的代码整洁可读，可以声明全局的吗？我的意思是，我可以将所有的都保存在同一个文件中，但很快它就会成为mantain的怪物。对，这就是为什么任何项目规模非常大，最好使用模块绑定器。