js 文件引用另一个js 文件|极客笔记

js 文件引用另一个js 文件

在前端开发中，我们经常会需要在一个 JavaScript 文件中引用另一个 JavaScript 文件。这种引用方式可以帮助我们将代码分割成多个模块，使得项目结构更加清晰，维护起来也更加方便。在本文中，我们将详细介绍如何在一个 JavaScript 文件中引用另一个 JavaScript 文件的方法，并给出示例代码供参考。

方法一：使用 script 标签

最常见的一种方法是使用 HTML 中的 script 标签来引用另一个 JavaScript 文件。我们可以在 HTML 文件中按照如下方式引入外部的 JavaScript 文件：

<!DOCTYPE html>
<html>

<head>
    <title>引用外部 JavaScript 文件</title>
</head>

<body>
    <script src="file1.js"></script>
    <script src="file2.js"></script>
</body>

</html>

在上面的示例中，我们在 HTML 文件的 body 部分分别引入了名为 file1.js 和 file2.js 的两个 JavaScript 文件。这样可以确保 file1.js 在 file2.js 之前被加载和执行。

示例代码

现在，让我们来编写一些示例代码来演示如何在 JavaScript 文件中引用另一个 JavaScript 文件。

file1.js

// file1.js
function sayHello() {
    console.log('Hello from file1.js');
}

file2.js

// file2.js
sayHello();
console.log('Hello from file2.js');

HTML 文件

<!DOCTYPE html>
<html>

<head>
    <title>示例代码</title>
</head>

<body>
    <script src="file1.js"></script>
    <script src="file2.js"></script>
</body>

</html>

在上面的示例中，file1.js 文件定义了一个名为 sayHello 的函数，而 file2.js 文件则在引入后直接调用了 sayHello 函数，并输出了一句字符串。当我们在浏览器中打开这个 HTML 文件时，控制台应该会输出以下内容：

Hello from file1.js
Hello from file2.js

这表明 file2.js 成功引用了 file1.js 中的函数，并正常运行。

方法二：使用 ES6 的 import 语法

除了使用 script 标签来引用外部 JavaScript 文件之外，我们还可以使用 ES6 的 import 语法来引入模块。这种方式更加现代化和灵活，可以更加精确地控制模块的引入和导出。

// file1.js
export function sayHello() {
    console.log('Hello from file1.js');
}

// file2.js
import { sayHello } from './file1.js';

sayHello();
console.log('Hello from file2.js');

在上面的示例中，我们使用了 ES6 的 import 语法来引入 file1.js 中的 sayHello 函数，并在 file2.js 中使用它。这种方法需要在支持 ES6 模块的环境中运行，可以参考 Babel 等工具进行转译。

总结

在前端开发中，引入外部 JavaScript 文件是非常常见的操作。通过将代码分割成多个模块，我们可以更好地组织和管理项目代码，提升开发效率和项目的可维护性。

js 文件引用另一个js 文件