执行单独的 .js 文件答案

【问题标题】：Executing separate .js files执行单独的 .js 文件
【发布时间】：2014-02-18 09:09:06
【问题描述】：

我正在尝试了解如何将不同的 .js 文件包含在 HTML 文件中，以便我的代码变得更加模块化。我正在关注此页面Can we call the function written in one JavaScript in another JS file?。我一度很困惑，如果我包含这样的文件：

<script language="javascript" src="a.js"> 
<script language="javascript" src="b.js">

如果a.js 包含：

function alertOne() {
   alert("one");
}

而b.js 包含：

function alertTwo() {
   alert("two");
}

那我需要单独调用HTML文件中的函数还是只包含<script language="javascript" src="b.js">这样的文件，会执行alertTwo()函数吗？

【问题讨论】：

【解决方案1】：

您的 JavaScript 文件只是在声明函数。如果您希望它们实际执行，那么是的，您需要在某个时候调用它们。无论是在另一个 .js 文件中、在 HTML 页面中的 <script> 标记内，还是作为元素事件处理程序的一部分，都由您决定，具体取决于您想要什么。

【讨论】：

那么包含 <script language="javascript" src="b.js"> 这样的文件有什么意义呢？我可以根据需要简单地调用不同的.js 文件或HTML 文件中的函数，对吧？
@user227666 单独的 .js 文件可以更轻松地重用和维护代码。假设您希望在您的所有页面中使用这些功能；如果您只是将函数放在每个 .html 文件中的 <script> 标记中，那么当您想要进行更改时，您必须全部更新它们。它还引入了关注点分离；您的 HTML 文件处理内容，CSS 处理样式，而 JS 处理功能，而不是把它们全部混在一起。
你没有明白我的意思。假设我只有 1 个 HTML 文件和 2 个 .js 文件，如上面的 a.js 和 b.js。那么，如果我必须单独调用这些函数来执行，那么<script language="javascript" src="b.js"> 和<script language="javascript" src="a.js"> 行有什么意义吗？
@user227666 是的，这些文件声明了函数。如果没有先声明一个函数，你就不能调用/执行它，你会得到一个错误。您可以将这些文件的内容移动到 HTML 页面中，但您仍然必须单独执行该函数，并且您还将进入我在之前评论中讨论的内容。

【解决方案2】：

代码

function alertTwo() {
   alert("two");
}

声明一个以后可以调用的函数

代码：

function alertTwo() {
   alert("two");
}
alertTwo();

声明一个函数，然后立即调用它。

代码：

(function alertTwo() {
   alert("two");
})();

声明一个立即调用自身的函数。

无论您的代码是直接在 HTML 文件中，还是通过 script 标记包含在内，都没有关系。没有什么是通过script 标签“执行”或完成的。这实际上就像是在说“将文件中的内容粘贴到此处。”

【讨论】：

那么包含 <script language="javascript" src="b.js"> 这样的文件有什么意义呢？我可以根据需要简单地调用不同的.js 文件或HTML 文件中的函数，对吧？
包含脚本文件的主要原因有以下三个：第一，如果您有大量的 javascript，可以使您的 HTML 页面不至于 34,124 行。二，假设页面 A、B 和 D 需要 z.js 的功能，但页面 C、E、F、G、H 和 K 不需要。如果不需要，为什么要包含该文件并为 javascript 发出另一个 HTTP 请求？第三，如果您的 javascript 被复制到 20 个不同的 HTML 文件中，并且 ti 发生了变化，您将更新 20 个文件...如果它包含在单个 .js 文件中，则更新一次。

【解决方案3】：

如果您的 HTML 中同时包含 a.js 和 b.js，则可以从 b.js 调用 a.js 中的函数 alertOne()。

【讨论】：