从另一个 .js 文件中调用 JavaScript 函数

在前端开发中，经常需要在不同的 JavaScript 文件中共享函数。本文将介绍如何从一个 .js 文件中调用另一个文件中的 JavaScript 函数。

方法

方法一： 使用 <script> 标签引入另一个 .js 文件

在调用 JavaScript 函数之前，需要先在 HTML 页面中引入相应的 .js 文件。可以使用 <script> 标签来实现：

<script src="path/to/another-file.js"></script>

接下来，就可以在当前 .js 文件中调用另一个文件中的函数了。假设另一个文件 another-file.js 中有如下函数：

function hello() {
  console.log("Hello World!");
}

那么，在当前 .js 文件中调用该函数的方式为：

hello();

方法二： 使用 ECMAScript 6 模块

如果你使用的是 ECMAScript 6 或更高版本，也可以使用模块化的方式来管理 JavaScript 文件。首先，在需要导出的函数前面加上 export 关键字：

export function hello() {
  console.log("Hello World!");
}

然后，在另一个文件中，使用 import 语句来导入该函数：

import { hello } from 'path/to/another-file.js';

hello();

示例代码

其中一个文件 file1.js 的示例代码如下：

function add(a, b) {
  return a + b;
}

另一个文件 file2.js 的示例代码如下：

import { add } from './file1.js';

console.log(add(1, 2)); // 输出 3

结语

本文介绍了两种从另一个 .js 文件中调用 JavaScript 函数的方法，分别是使用 <script> 标签和 ECMAScript 6 模块。无论哪种方法，都可以有效地实现函数共享，提高代码复用性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30640