怎么加两个js

在网页中添加两个JavaScript文件的方法有多种，最常见的是通过在HTML文件的<head>或<body>标签中使用多个<script>标签来引入外部JavaScript文件。 你可以将<script>标签放在HTML文档的任何地方，但通常建议将其放在<body>标签的结束标签之前，以确保网页内容先行加载，提高页面加载速度和性能。具体操作如下：

在HTML的<head>标签中引入多个JavaScript文件：这种方式适用于需要在页面加载前运行的脚本。
在HTML的<body>标签结束前引入多个JavaScript文件：这种方式适用于需要在页面内容加载完成后运行的脚本。

接下来，将详细介绍如何在HTML文件中通过这两种方法引入多个JavaScript文件，并探讨一些高级技巧和最佳实践。

一、在HTML的`<head>`标签中引入多个JavaScript文件

在HTML的<head>标签中引入JavaScript文件通常用于需要在页面加载之前执行的脚本，例如用于页面初始化的脚本或第三方库的引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="path/to/your/first-script.js"></script>
    <script src="path/to/your/second-script.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

在上面的代码中，<script>标签被放在<head>标签中，这样两个JavaScript文件会在网页内容加载之前被加载和解析。

二、在HTML的`<body>`标签结束前引入多个JavaScript文件

将<script>标签放在<body>标签结束之前是一种更常见的做法，因为这可以确保HTML内容先行加载，有助于改善页面的加载性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script src="path/to/your/first-script.js"></script>
    <script src="path/to/your/second-script.js"></script>
</body>
</html>

在上面的代码中，两个<script>标签被放在了<body>标签的结束标签之前，这样可以确保网页的HTML内容在JavaScript文件被加载和执行之前已经加载完毕。

三、使用异步和延迟加载

为了进一步优化网页的加载性能，可以使用async和defer属性。这两个属性用于控制脚本的加载和执行时机。

1. `async` 属性

async属性表示脚本会在后台异步加载，加载完成后立即执行，不会阻塞HTML的解析。适用于独立的、彼此之间没有依赖关系的脚本。

<script src="path/to/your/first-script.js" async></script>
<script src="path/to/your/second-script.js" async></script>

2. `defer` 属性

defer属性表示脚本会在HTML解析完成后才会执行，适用于需要在页面加载完成后执行的脚本，并且这些脚本彼此之间可能有依赖关系。

<script src="path/to/your/first-script.js" defer></script>
<script src="path/to/your/second-script.js" defer></script>

四、通过模块化引入JavaScript

随着前端开发的复杂性增加，模块化开发成为一种趋势。可以使用ES6的import和export语法来实现模块化开发。

1. 创建模块

首先，需要创建两个JavaScript文件，并分别导出它们的功能。

// first-script.js
export function sayHello() {
    console.log("Hello from the first script!");
}

// second-script.js
export function sayGoodbye() {
    console.log("Goodbye from the second script!");
}

2. 引入模块

在主HTML文件中，通过<script>标签引入模块化的JavaScript文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script type="module">
        import { sayHello } from './path/to/first-script.js';
        import { sayGoodbye } from './path/to/second-script.js';
        sayHello();
        sayGoodbye();
    </script>
</body>
</html>

在这个例子中，type="module"属性告诉浏览器这是一个模块化的JavaScript文件，可以使用import和export语法。

五、使用构建工具

在大型项目中，通常会使用构建工具如Webpack、Rollup等来管理和打包多个JavaScript文件。这些工具可以帮助你将多个JavaScript文件打包成一个或多个文件，优化加载性能。

1. 安装Webpack

首先，需要通过npm安装Webpack。

npm install --save-dev webpack webpack-cli

2. 配置Webpack

创建一个webpack.config.js文件，并进行如下配置：

const path = require('path');
module.exports = {
    entry: {
        main: './src/index.js',
        first: './src/first-script.js',
        second: './src/second-script.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
};

3. 运行Webpack

通过命令行运行Webpack进行打包。

npx webpack

这样，Webpack会将多个JavaScript文件打包成一个或多个文件，优化加载性能。

六、总结

在网页中添加多个JavaScript文件时，可以选择在<head>标签或<body>标签结束前引入脚本，通过使用async和defer属性优化脚本加载和执行时机，利用模块化开发和构建工具进一步提升开发效率和页面性能。在实际开发中，根据具体需求和项目复杂性选择合适的方法和工具，以确保网页的高效加载和运行。

希望这篇文章能帮助你更好地理解和应用如何在网页中添加多个JavaScript文件，并优化其加载和执行。