为什么 JavaScript 外部类不起作用？

Question

我正在学习 JavaScript

我到达了类，我不知道为什么当我在外部“.js”文件中编码 JS 并将其链接到我的 HTML 时它不起作用，但是当我在 html（内部）中执行此操作时，它起作用了！

index.html

<div id="noticeContainer"></div>

app.js :

class Notice {
  constructor(message = 'Hello, World!') {
    this.element = document.createElement('div');
    this.element.textContent = message;
    this.css =
      'background: silver; border: 3px gray solid; color: gray; font: 18px sans-serif; padding: 8px; margin: 10px';
    this.element.style.cssText = this.css;
  }

  render(element) {
    if (element) {
      element.appendChild(this.element);
    } else {
      console.error('Error: element is null or undefined.');
    }
  }
}

class Success extends Notice {
  constructor(message = 'Success!') {
    super(message);
    this.element.style.background = 'palegreen';
    this.element.style.color = 'green';
    this.element.style.borderColor = 'green';
  }
}

class Info extends Notice {
  constructor(message = 'Information') {
    super(message);
    this.element.style.background = 'powderblue';
    this.element.style.color = 'blue';
    this.element.style.borderColor = 'blue';
  }
}

const noticeContainer = document.getElementById('noticeContainer');

const success = new Success();
success.render(noticeContainer);

const info = new Info();
info.render(noticeContainer);

我喜欢在外部js中执行此操作:)

Answer 1

问题 代码中的问题与脚本执行的时间有关。当 JavaScript 类在外部文件中定义并链接到 HTML 文件时，脚本可能会在 HTML 内容完全加载之前执行，从而导致无法找到“noticeContainer”元素。

原因 问题的根本原因是 JavaScript 代码在 HTML 内容完全加载之前执行，导致脚本尝试访问“noticeContainer”元素时为 null 或未定义。

解决方案 要解决此问题并使外部 JavaScript 类正常工作，您可以确保脚本在 HTML 内容完全加载后运行。实现此目的的一种方法是将脚本放置在 HTML 正文的末尾或使用 DOMContentLoaded 事件侦听器来确保在执行脚本之前完全加载 DOM。

这是外部 JavaScript 文件 (app.js) 中代码的更新版本，添加了事件侦听器：

document.addEventListener('DOMContentLoaded', function() {
  const noticeContainer = document.getElementById('noticeContainer');

  const success = new Success();
  success.render(noticeContainer);

  const info = new Info();
  info.render(noticeContainer);
});

通过添加 DOMContentLoaded 事件监听器，脚本将等待 HTML 内容完全加载后再执行，确保“noticeContainer”元素可用于操作。

预防 为了防止将来在使用外部 JavaScript 文件时出现类似问题，请始终确保脚本执行与 HTML 内容的加载同步。使用 DOMContentLoaded 等事件监听器仅在 DOM 完全加载后触发脚本执行，避免 null 或未定义元素错误。

为什么 JavaScript 外部类不起作用？ 在学习 JavaScript 时，了解外部类为何可能无法按预期工作至关重要。由于脚本执行的时间和 DOM 元素的可用性，经常会出现此问题。

在您的情况下，当在外部“.js”文件中编码 JavaScript 类并将其链接到您的 HTML 时，脚本可能会在 HTML 内容完全加载之前运行。因此，脚本可能无法在 DOM 中找到必要的元素，从而导致错误或意外行为。

为了确保外部 JavaScript 类无缝工作，必须将脚本执行与 HTML 内容加载同步。通过使用 DOMContentLoaded 等事件侦听器，您可以保证脚本仅在 DOM 元素完全可用后才与它们交互，从而防止与元素可访问性相关的问题。

请记住，时机是 JavaScript 开发的关键，确保脚本在正确的时刻运行可以对代码的功能和可靠性产生重大影响。