Javascript：有些东西太简单而无法与外部链接？ [复制]答案

【问题标题】：Javascript: are some things too simple to link externally? [duplicate]Javascript：有些东西太简单而无法与外部链接？ [复制]
【发布时间】：2018-08-06 11:48:21
【问题描述】：

我真的是 JavaScript 新手。所以这可能是一个基本问题？如果可能的话，我想要一些解释。

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

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

For Example, this basic "bulb on/off"

这里的js是onclick=document.getElementById(...) （通过点击/按钮改变图片）

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

【问题讨论】：

是的，它可以移动到外部 JavaScript 文件中。将代码包装在一个函数中。从onclick 调用函数。或者在 JS 文件中使用事件监听器。
这主要是基于意见的。
有一个东西叫脚本标签，如果你不想链接第三方JS文件，至少使用它。
我明白，但是在我链接的示例中，甚至没有任何脚本标签，它只是一两行简单的行。那些简单的东西（不是说更复杂的 JS 函数）最好就这样离开吗？

标签： javascript html external-script

【解决方案1】：

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

JavaScript 只做一件事：操纵 DOM。根据您的 JavaScript 何时执行，它会以当时的状态操作 DOM。

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

放大您关于将代码放入外部文件的问题：当然，这是可能的。在某一时刻，该文件将被导入并加载到 DOM 中。里面的代码会在这个文件被加载的时候执行，或者当你挂钩到 DOM-ready 事件来启动这个文件里面的代码时。

【讨论】：

【解决方案2】：

您在这里有一个合理的问题（对您的意见表示歉意 - 但您愿意尝试一下！）。

来自 Mozilla 开发者页面 (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics)

接下来，在您的 index.html 文件中输入以下元素结束标记之前的行：

<script src="scripts/main.js"></script>

这基本上与 CSS 的元素做同样的工作——它将 JavaScript 应用于页面，因此它可以对 HTML 产生影响（连同 CSS 以及页面上的任何其他内容）。

在您的示例代码中，您编写了onclick=document.getElementById(...)。

这实际上应该写成

onclick=function() {
   document.getElementById(...)...
}

【讨论】：