📅 最后修改于: 2023-12-03 15:35:54.289000 🧑 作者: Mango
在我们的 Web 应用程序中，JavaScript 最常用的用途是操作 DOM。我们使用它来操作 HTML 元素、添加或删除元素，或者在一个页面上动态地更新内容。
通常情况下，我们会把 JavaScript 代码直接写在 HTML 视图文件里，而不是作为独立的脚本文件。这样做虽然简单，但是随着应用程序变得越来越复杂，这会使代码的可读性和可维护性变得越来越差。
为了解决这个问题，我们可以将 JavaScript 代码放到单独的文件中，然后在 HTML 中引用它。这样做不仅简化了 HTML 文件，而且使所有 JavaScript 代码更易于组织和维护。在这里，我们将讨论如何使用外部脚本文件来组织和管理我们的 JavaScript 代码。
创建一个外部 JavaScript 文件非常简单。只需在一个新文件中编写您的 JavaScript 代码，并将其保存为 .js 文件扩展名即可。
// example.js 文件内容
alert('Hello World!');
当您有一个外部 .js 文件时，我们如何将其引用到 HTML 中呢？很简单，我们只需要在代码中使用 <script> 标签来引用它即可。
<!DOCTYPE html>
<html>
<head>
<title>使用外部 JavaScript 文件</title>
</head>
<body>
<script src="example.js"></script>
</body>
</html>
在上面的示例中，我们在 HTML 文件的 body 标签中添加了一个 <script> 标签，并使用 src 属性指定了外部脚本文件的路径。现在，当浏览器加载 HTML 文件时，它将自动加载并执行 example.js 文件中的代码。
将 JavaScript 代码放到单独的文件中有很多好处：
在本文中，我们讨论了如何使用外部 JavaScript 文件来组织和管理我们的代码。通过将代码分离到单独的文件中，我们可以使代码更易于维护、重用和阅读，并提高应用程序的性能。因此，建议您在开发 Web 应用程序时始终使用外部 JavaScript 文件，并将其作为最佳实践。