怎么在html引入js文件

在HTML中引入JS文件的方式有多种：使用<script>标签、通过属性src加载外部文件、在页面头部或底部加载、使用模块化加载等。

最常用的方法是通过在HTML文件中使用<script>标签的src属性引入外部的JavaScript文件。例如，在<head>标签或<body>标签的末尾添加<script src="path/to/yourfile.js"></script>。这种方式可以保持HTML文件的整洁和结构化，同时还可以利用浏览器的缓存机制，提高页面加载速度。

一、使用`<script>`标签直接引入

在HTML文件中，最简单的方式是使用<script>标签直接将JavaScript代码写入HTML文件中。这种方式适合于插入少量的JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // JavaScript代码
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Say Hello</button>
</body>
</html>

这种方式虽然简单，但不利于代码的维护和重用。因此，大多数情况下，推荐使用外部JavaScript文件。

二、通过`src`属性引入外部文件

为了保持代码的整洁，推荐将JavaScript代码放在单独的文件中，然后使用<script>标签的src属性引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/yourfile.js"></script>
</head>
<body>
    <button onclick="sayHello()">Say Hello</button>
</body>
</html>

在yourfile.js文件中：

// yourfile.js
function sayHello() {
    alert('Hello, World!');
}

这种方法不仅使HTML文件更加简洁，而且便于代码的重用和维护。

三、在页面头部或底部加载

在页面头部加载JavaScript文件可以确保脚本在HTML内容加载之前执行，这在某些情况下是必要的，例如需要在DOM加载之前进行一些初始化操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/yourfile.js"></script>
</head>
<body>
    <button onclick="sayHello()">Say Hello</button>
</body>
</html>

在页面底部加载JavaScript文件通常是更好的选择，因为这可以确保HTML内容先加载，提高页面的加载速度和用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="sayHello()">Say Hello</button>
    <script src="path/to/yourfile.js"></script>
</body>
</html>

四、使用模块化加载

现代JavaScript开发中，模块化加载变得越来越普遍。通过使用模块化加载，可以更好地组织和管理代码，特别是在大型项目中。

在HTML文件中引入模块化的JavaScript文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module" src="path/to/yourfile.js"></script>
</head>
<body>
    <button onclick="sayHello()">Say Hello</button>
</body>
</html>

在yourfile.js文件中：

// yourfile.js
export function sayHello() {
    alert('Hello, World!');
}

在其他模块文件中，可以通过import语句引入并使用这些模块：

import { sayHello } from './path/to/yourfile.js';
document.querySelector('button').addEventListener('click', sayHello);

五、使用异步和延迟加载

为了优化页面性能，可以使用async和defer属性，使JavaScript文件异步或延迟加载。

异步加载：脚本会在下载完成后立即执行，不会阻塞HTML解析。

<script async src="path/to/yourfile.js"></script>

延迟加载：脚本会在HTML解析完成后再执行。

<script defer src="path/to/yourfile.js"></script>

使用这些属性可以提高页面加载速度和用户体验，特别是在加载多个JavaScript文件时。

六、总结

在HTML中引入JavaScript文件的方法有很多种，具体选择哪种方式取决于项目的需求和具体情况。通过<script>标签直接引入、通过src属性加载外部文件、在页面头部或底部加载、使用模块化加载、异步和延迟加载等方式都各有优缺点。在实际应用中，应根据项目的特点和性能要求，选择最合适的方式。

无论选择哪种方式，都应遵循代码组织和性能优化的最佳实践，确保代码的可维护性和页面的加载速度。例如，在大型团队协作项目中，使用研发项目管理系统如PingCode和通用项目协作软件Worktile可以提高协作效率，确保项目顺利进行。