Javascript закрытия и загрузки

Question

Я учусь использовать замыкания, и я не уверен, что лучше всего подходит для моей ситуации.Я отредактировал мой код для ясности, и он содержит фиктивный код.Я должен получить доступ к функции 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>

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