时间戳

首页 > 解决方案 > Javascript 闭包和加载

javascript - Javascript 闭包和加载

问题描述

我正在学习使用闭包，但我不确定哪种方法最适合我的情况。为了清楚起见，我编辑了我的代码，它包含虚拟代码。handleCannon如果用户单击test元素，我必须访问该功能。如果我handleCannon在onload活动中声明它将不起作用。如果我在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>

标签： javascriptclosures

解决方案

而不是使用内联属性处理程序（这很难管理并且通常被认为是非常糟糕的做法），而是使用 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();
  });
  // ...
});

推荐阅读