HTML 引用 JS 文件的方法有很多，这里我们介绍两种常用的方法：内联方式和外部引用方式。
内联方式
内联方式是指在 HTML 文件中直接使用 script 标签引入 JavaScript 文件，这种方式的优点是简单易用，但缺点是不便于维护和管理，下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>内联方式引用 JS 文件示例</title>
</head>
<body>
<h1>内联方式引用 JS 文件示例</h1>
<button onclick="alert('Hello, World!')">点击我</button>
<!-在这里直接引入 JavaScript 文件 -->
<script src="example.js"></script>
</body>
</html>
在这个示例中，我们在 HTML 文件的 <head> 标签内使用 <script> 标签引入了一个名为 "example.js" 的 JavaScript 文件，当用户点击按钮时，会弹出一个 "Hello, World!" 的提示框。
需要注意的是，JavaScript 文件中有多个函数或变量定义，那么它们将被加载到当前页面的全局作用域中，可能会导致命名冲突，建议将 JavaScript 代码拆分成多个文件，以便于管理和维护。
外部引用方式
外部引用方式是指将 JavaScript 文件保存在一个单独的文件中，然后在 HTML 文件中使用 <script> 标签的 src 属性引入该文件，这种方式的优点是可以避免全局作用域的污染，提高代码的可维护性；缺点是需要额外的操作步骤来引入 JavaScript 文件，下面是一个简单的示例：
1、创建一个名为 "example.js" 的 JavaScript 文件，并在其中编写一些简单的代码：
// example.js
function showMessage() {
alert('Hello, World!');
}
2、在 HTML 文件中使用 <script> 标签引入 "example.js" 文件：
<!DOCTYPE html> <html> <head> <title>外部引用方式引用 JS 文件示例</title> </head> <body> <h1>外部引用方式引用 JS 文件示例</h1> <button onclick="showMessage()">点击我</button> <!-在这里引入 JavaScript 文件 --> <script src="example.js"></script> </body> </html>
在这个示例中，我们在 HTML 文件的 <head> 标签内使用 <script> 标签引入了 "example.js" 文件，当用户点击按钮时，会调用 "example.js" 文件中的 "showMessage" 函数，弹出一个 "Hello, World!" 的提示框。
这种方式可以有效地避免全局作用域的污染，提高代码的可维护性，由于 JavaScript 文件被保存在单独的位置，可以方便地进行版本控制和团队协作。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/164348.html
微信扫一扫 