一、JS引用的三种方式
1、内部js
- 使用
<script>
标签将 JavaScript 代码嵌入到 HTML 页面中。可以放置在<head>
或<body>
中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert('内部');//弹窗
</script>
</head>
<body>
</body>
</html>
2、行内js
- 直接在 HTML 标签的属性中编写 JavaScript 代码。例如,使用 onclick 属性触发按钮点击事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" onclick="javascript:alert('行内js')">
</body>
</html>
效果展示:
3、外部js
- 将 JavaScript 代码编写在一个独立的 .js 文件中,并通过
<script>
标签的 src 属性引入到 HTML 页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外部-->
<script src="../dist/js/Demo.js"></script>
</head>
<body>
</body>
</html>
效果展示:
二、JS三种引用方式的优缺点
1、行内方式:
- 优点:行内方式简单快捷,适用于少量简单的交互操作。不需要额外的外部文件。
- 缺点:可读性差,代码难以维护和重用。当有多个元素需要相同的逻辑或函数时,需要重复编写相同的代码。
2、内部方式: - 优点:内部方式可以方便地将 JavaScript 代码直接嵌入到 HTML 页面中,与页面元素进行交互。适用于较小规模的项目。
- 缺点:随着项目复杂度增加,内部脚本会导致 HTML 与 JavaScript 代码交织在一起,可读性差,难以维护。在大型项目中,不同的页面可能需要相同的逻辑或函数,需要在多个页面中重复编写相同的代码。
3、外部方式: - 优点:外部脚本方式将 JavaScript 代码分离到独立的 .js 文件中,使代码结构更清晰,易于维护和重用。多个页面可以共享同一个外部脚本文件。
- 缺点:需要单独加载外部脚本文件,增加了额外的网络请求。在初次加载时可能会有一定的延迟。