JavaScript的三种引用方式

c陈小藝

已于 2023-09-18 18:23:31 修改

阅读量3.1k

点赞数 2

文章标签： javascript 开发语言 ecmascript html5 node.js

于 2023-09-18 18:07:37 首次发布

本文链接：https://blog.csdn.net/2202_75488514/article/details/132990004

版权

## JavaScript的三种引用方式

1、JS引用的三种方式

1.1、标签引用（或嵌入式)

使用 <script> 标签将 JavaScript 代码嵌入到 HTML 页面中。可以放置在 <head> 或 <body> 中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
</head>

<body>

</body>
//嵌入式
<script>
  alert("Hello,World!");
</script>

</html>

显示效果：

在这里插入图片描述

1.2、文件引用（外链式）

将 JavaScript 代码编写在一个独立的 .js 文件中，并通过 <script> 标签的 src 属性引入到 HTML 页面中。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
</head>

<body>

</body>
<script src="./JavaScript.js">
</script>

</html>

显示效果：

在这里插入图片描述

1.3、行内式

直接在 HTML 标签的属性中编写 JavaScript 代码。例如，使用 onclick 属性触发按钮点击事件。

**提醒：**不推荐使用该方法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
</head>
<button onclick="alert('Hello, World!')">点击我</button>

<body>

</body>
</html>

显示效果：
在这里插入图片描述

2、JS三种引用方式的优缺点

行内方式：
- 优点：行内方式简单快捷，适用于少量简单的交互操作。不需要额外的外部文件。
- 缺点：可读性差，代码难以维护和重用。当有多个元素需要相同的逻辑或函数时，需要重复编写相同的代码。
标签引用（或嵌入式）：
- 优点：内部脚本方式可以方便地将 JavaScript 代码直接嵌入到 HTML 页面中，与页面元素进行交互。适用于较小规模的项目。
- 缺点：随着项目复杂度增加，内部脚本会导致 HTML 与 JavaScript 代码交织在一起，可读性差，难以维护。在大型项目中，不同的页面可能需要相同的逻辑或函数，需要在多个页面中重复编写相同的代码。
文件引用（外链式）：
- 优点：外部脚本方式将 JavaScript 代码分离到独立的 .js 文件中，使代码结构更清晰，易于维护和重用。多个页面可以共享同一个外部脚本文件。
- 缺点：需要单独加载外部脚本文件，增加了额外的网络请求。在初次加载时可能会有一定的延迟。