如何在JavaScript中引用外部JS文件
在开发Web应用时，你可能会需要将一些JavaScript代码分离到外部文件中。这不仅有助于代码的组织和重用，还能提高页面的加载速度。本文将引导你了解如何在JavaScript代码中引用外部JS文件，确保你能顺利地完成这一任务。
流程概述
下面是引用外部JavaScript文件的基本流程：
| 步骤 | 描述 |
|---|---|
| 1 | 创建一个新的JavaScript文件 |
| 2 | 在HTML文件中创建引用 |
| 3 | 测试代码 |
每一步操作详解
步骤 1：创建一个新的JavaScript文件
首先，你需要创建一个JavaScript文件。假设我们创建一个名为 script.js 的文件。在这个文件中，你可以添加你希望在网页中执行的代码。
示例：script.js
// 定义一个函数，用于在控制台打印消息
function greet() {
console.log("Hello, World!"); // 当调用这个函数时，它会在控制台输出 "Hello, World!"
}
步骤 2：在HTML文件中引用
接下来，你需要在你的HTML文件中创建一个引用，指向这个JavaScript文件。通常，这会在<head>或<body>标签的底部进行。
示例：index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引用外部JS示例</title>
<!-- 在<head>中引入外部JavaScript文件 -->
<script src="script.js" defer></script>
</head>
<body>
欢迎使用JavaScript外部文件
<!-- 当文档内容加载完毕时，调用greet函数 -->
<button onclick="greet()">点击我</button>
</body>
</html>
在这里，<script src="script.js" defer></script> 是引入外部JS文件的关键所在。defer属性的使用确保了在HTML文档被完全解析后再执行脚本。
步骤 3：测试代码
最后一步是测试代码。在你的浏览器中打开 index.html 文件，点击按钮，控制台应该输出 "Hello, World!"。你可以通过按下 F12 (在大多数浏览器中) 打开开发者工具，查看控制台输出。
关系图
为了更好地理解这个过程，我们可以使用ER图来表示HTML与JavaScript文件的关系：
erDiagram
HTML {
string title
string heading
}
JS_FILE {
function greet
}
HTML ||--o{ JS_FILE : "引用了"
在这个关系图中，HTML 文件引用了一个 JS_FILE，表明HTML与JavaScript文件之间的联系。
总结
通过以上步骤，我们学习了如何在JavaScript中引用外部JS文件。你现在应该能够创建一个新的JavaScript文件、在HTML中引用它，以及通过简单的交互来测试代码。这种方法不仅提升了代码的可读性，还增强了代码的可重用性。
随着你在前端开发中的深入经验积累，你会发现将代码模块化是一个非常重要的技能。在今后的工作中，尽量保持代码的整洁与组织，确保你的项目能够顺利进行。希望这篇文章能对你有所帮助，祝你在开发的旅程中越走越远！
