HTML引入JS的三种方式|极客笔记

HTML引入JS的三种方式

介绍

在HTML中，我们经常需要引入JavaScript（JS）代码来实现一些交互功能或动态效果。为了将JS代码嵌入到HTML中，我们有多种方式来引入JS文件。本文将详细介绍三种常见的引入JS的方式：直接嵌入、内嵌式引入和外部引入。我们将逐一讲解这三种方式的使用方法、优缺点以及适用场景。

直接嵌入

直接嵌入是一种最简单的引入JS的方式，其特点是将JS代码直接写在HTML文件的标签内。

使用方法

直接在标签或标签内添加标签，并在其中编写JS代码。例如：

<html>
<head>
  <title>直接嵌入示例</title>
</head>
<body>
  <script>
    function helloWorld() {
      console.log("Hello, world!");
    }
    helloWorld();
  </script>
</body>
</html>

运行结果

Hello, world!

优缺点

优点：

方便快捷，不需要额外的文件引入和网络请求。
适用于简单的JS代码或临时的测试代码。

缺点：

不利于代码复用，如果多个HTML文件需要使用同一段JS代码，需要在每个文件中都复制一遍。
当JS代码较多时，直接嵌入会导致HTML文件过于冗长，不易维护。
不利于团队协作，难以进行版本控制。

适用场景

直接嵌入适用于以下场景：

需要简单的JS代码片段。
临时测试或调试代码。
不需要复用的代码。

内嵌式引入

内嵌式引入是一种在HTML文件内部引入JS代码的方式，通过将JS代码存放在独立的标签中，从而使HTML文件更加整洁。

使用方法

首先，创建一个独立的JavaScript文件（例如script.js），编写所需的JS代码。然后，在HTML文件的标签内使用src属性引入该JavaScript文件。例如：

<html>
<head>
  <title>内嵌式引入示例</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="helloWorld()">点击我</button>
</body>
</html>

// script.js
function helloWorld() {
  console.log("Hello, world!");
}

运行结果

点击按钮后，控制台将输出：

Hello, world!

优缺点

优点：

使HTML文件更加整洁和易读。
便于代码复用，不同的HTML文件可以引用同一个JavaScript文件。
适用于中等规模的项目或团队协作。

缺点：

需要通过网络请求加载外部的JavaScript文件。
如果网络环境出现问题，可能导致JS文件加载失败，影响网页的功能和性能。

适用场景

内嵌式引入适用于以下场景：

适用于较为复杂的JS代码。
多个HTML文件需要共享同一段JS代码。
需要使HTML文件更加整洁易读。

外部引入

外部引入是一种将JS代码存放在独立的外部JavaScript文件中，并通过script标签的src属性引入的方式。

使用方法

首先，创建一个独立的JavaScript文件（例如script.js），编写所需的JS代码。然后，在HTML文件的标签内使用src属性引入该JavaScript文件。例如：

<html>
<head>
  <title>外部引入示例</title>
  <script src="script.js"></script>
</head>
<body>
  <button onclick="helloWorld()">点击我</button>
</body>
</html>

// script.js
function helloWorld() {
  console.log("Hello, world!");
}

运行结果

点击按钮后，控制台将输出：

Hello, world!

优缺点

优点：

提高了代码复用性和维护性，多个HTML文件可以共享同一个外部JS文件。
让HTML文件更加精简和易读。
适用于大型项目和团队协作。

缺点：

需要通过网络请求加载外部的JavaScript文件。
如果网络环境出现问题，可能导致JS文件加载失败，影响网页的功能和性能。

适用场景

外部引入适用于以下场景：

适用于比较复杂和庞大的JS代码。
多个HTML文件需要共享同一个外部JS文件。
需要使HTML文件更加整洁易读。

总结

在本文中，我们详细介绍了HTML引入JS代码的三种常见方式：直接嵌入、内嵌式引入和外部引入。不同的方式适用于不同的场景。直接嵌入适用于简单的JS代码或临时的测试；内嵌式引入适用于中等规模的项目或团队协作；外部引入适合大型项目和团队协作。根据具体需求和项目规模，选择正确的引入方式将有助于提高代码的维护性和可读性，以及网页的性能和功能。