js引入js文件|极客笔记

js引入js文件

在网页开发中，我们经常需要引入外部的JavaScript文件来实现一些功能，这种方式可以让代码模块化、可维护性更强。本文将详细介绍在HTML页面中如何引入外部的JavaScript文件。

在HTML中引入外部的JavaScript文件

在HTML中引入外部的JavaScript文件非常简单，只需要在<head>或者<body>标签中使用<script>标签即可。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入外部js文件示例</title>
    <script src="example.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，我们通过<script>标签引入了一个名为example.js的外部JavaScript文件。在浏览器解析该HTML文件时，会自动下载并执行example.js文件中的代码。

引入绝对路径的JavaScript文件

当引入外部JavaScript文件时，可以使用绝对路径或者相对路径。绝对路径是指包含协议、主机和路径的完整URL，相对路径则相对于当前HTML文件所在目录的路径。下面是引入绝对路径JavaScript文件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入外部js文件示例</title>
    <script src="https://cdn.example.com/scripts/example.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，我们使用了一个包含协议、主机和路径的绝对路径来引入外部JavaScript文件。

引入多个JavaScript文件

在实际开发中，可能会需要引入多个JavaScript文件来实现不同的功能。可以通过多个<script>标签来依次引入这些文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入多个外部js文件示例</title>
    <script src="first.js"></script>
    <script src="second.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，我们依次引入了first.js和second.js两个外部JavaScript文件。

使用defer和async属性

<script>标签还支持defer和async属性，用于控制外部JavaScript文件的加载和执行方式。defer属性表示脚本将在页面解析完成后执行，而async属性表示脚本在下载完成后会立即执行。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defer和async示例</title>
    <script src="example.js" defer></script>
    <script src="another.js" async></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的示例中，example.js文件使用defer属性，another.js文件使用async属性。