Javascript:有些东西是否太简单而无法链接到外部？

Question

我对 JavaScript 还很陌生。所以这可能是一个基本问题？如果可能的话，我只是想要一些解释。

我正在从事一些带有 JS 的 Web 开发。然而，我要求所有文件(JS 和 CSS)都必须通过外部表链接，并且具有有意义的复杂功能，但对于一些简单的 JS，我有点困惑这意味着什么。

使用CSS，您可以进行内联样式设置，或者在样式标签的标题中或在外部工作表中进行设置。有一些 JS 交互，我无法判断它是否必须在它所在的位置，或者是否有办法将其移动到外部工作表。

For Example, this basic "bulb on/off"

这里的js是onclick=document.getElementById(...)(通过单击图像/按钮来更改图像)

这种代码是否可以放入外部工作表中？我对内联/标签/外部 CSS 的内部类比也适合应用于 Javascript，还是 JS 的工作方式不同？我只是不想因为没有把东西放在正确的地方而被算计。

Answer 1

您需要了解的是，当您使用 JavaScript 时，您正在使用的“范围”是用户的视口(viewport)。内部表示为对象树，我们称之为 DOM(文档对象模型)。浏览器获取这些外部表、JavaScript 文件、html 等，然后将它们加载到 DOM 中。

JavaScript 只关心一件事:操作 DOM。 根据 JavaScript 的执行时间，它将以当时的状态操作 DOM。

程序员通常选择在 DOM 就绪之后执行代码。这是一个时间点，之后所有外部代码/样式等都已被获取并初始化到 DOM 中，因此可以让您确定您的代码正在针对您也会看到的全部内容范围进行工作在加载后立即浏览页面。

放大有关将代码放入外部文件中的问题:当然，这是可能的。在某一时刻，该文件将被导入并加载到 DOM 中。里面的代码将在加载该文件时执行，或者当您 Hook DOM-ready 事件以启动该文件内的代码时执行。