在前端开发中，我们通常需要在不同的 JavaScript 文件中编写和组织代码。为了提高代码的可重用性和可维护性，我们可能需要在一个文件中编写一些函数，然后在其他文件中调用它们。
那么问题来了，我们如何调用在另一个 JS 文件中编写的函数呢？下面我们一起来探讨这个问题。
使用 import 和 export
在 ES6 中，我们可以使用 import 和 export 语句来导入和导出模块中的函数、类、常量等等。
导出函数
首先，我们在一个 JS 文件中定义一个函数，例如：
-- ------- ------ -------- ------ -- - ------ - - -- -
在这个例子中，我们使用 export 关键字将 add() 函数导出，以便其他文件可以访问它。
导入函数
然后，在另一个 JS 文件中，我们可以使用 import 语句来导入 add() 函数，例如：
-- -------- ------ - --- - ---- ------------ ------------------ ---- -- -- -
在这个例子中，我们使用 import 语句从 math.js 文件中导入 add() 函数，并将它赋值给变量 add。然后，我们可以像调用任何其他函数一样调用它。
需要注意的是，我们在 import 语句中使用相对路径来指定导入的文件。在一些情况下，也可以使用绝对路径或模块名称来引用其他文件。
导出和导入多个函数
除了单独导出一个函数之外，我们还可以将多个函数一起导出，并在其他文件中同时导入它们。例如：
-- ------- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- -
-- -------- ------ - ---- -------- - ---- ------------ ------------------ ---- -- -- - ----------------------- ---- -- -- -
使用全局对象
除了使用 import 和 export 语句之外，我们还可以使用全局对象来访问其它 JS 文件中的函数。
在一个 JS 文件中定义一个函数，例如：
-- ------- -------- ------ -- - ------ - - -- - -- - ----- ---------- ---------- - ----
在这个例子中，我们将 add() 函数添加到 window 全局对象中，以便其他文件可以访问它。
然后，在另一个 JS 文件中，我们可以使用 window 全局对象来调用 add() 函数，例如：
-- -------- ------------------------- ---- -- -- -
需要注意的是，使用全局对象的方法并不推荐。因为它会污染全局命名空间并可能导致命名冲突和其他问题。
总结
在前端开发中，我们可以使用 import 和 export 语句来调用其他 JS 文件中的函数，也可以使用全局对象来访问它们。使用 import 和 export 更加安全、可维护和可重用，因此应该优先考虑使用这种方法。
示例代码：https://codepen.io/ChatGPT/pen/mdrYMPd
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/9505