使用js的三种引用方式

最新推荐文章于 2024-06-25 17:22:03 发布

祈0911

最新推荐文章于 2024-06-25 17:22:03 发布

阅读量1.1k

点赞数 10

分类专栏： JavaScript 前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/m0_71002854/article/details/135388700

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

文章目录

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

一、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 文件中，使代码结构更清晰，易于维护和重用。多个页面可以共享同一个外部脚本文件。
缺点：需要单独加载外部脚本文件，增加了额外的网络请求。在初次加载时可能会有一定的延迟。