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

Question

我想在 second.js 文件中调用 first.js 文件中定义的函数。这两个文件都在 HTML 文件中定义，例如：

 <script type="text/javascript" src="first.js"></script>
<script type="text/javascript" src="second.js"></script>

我想调用 fn1() 在 first.js 中定义 second.js 。根据我的搜索，答案是 if first.js 是可能的，但根据我的测试，我还没有找到任何方法来做到这一点。

这是我的代码：

second.js

 document.getElementById("btn").onclick = function() {
    fn1();
}

first.js

 function fn1() {
    alert("external fn clicked");
}

原文由 m0j1 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个函数不能被调用，除非它是在同一个文件中定义的，或者在尝试调用它之前加载的。

一个函数不能被调用，除非它在与试图调用它的函数相同或更大的范围内。

您在 first.js 中声明函数 fn1 ，然后在第二个中您可以拥有 fn1();

1.js：

 function fn1 () {
    alert();
}

2.js:

 fn1();

索引.html：

 <script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>

原文由 Fernando Mendez 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以考虑使用 es6 import export 语法。在文件 1 中；

 export function f1() {...}

然后在文件 2 中；

 import { f1 } from "./file1.js";
f1();

请注意，这仅在您使用 <script src="./file2.js" type="module">

如果这样做，您将不需要两个脚本标签。您只需要主脚本，您可以在那里导入所有其他内容。

原文由 tm2josep 发布，翻译遵循 CC BY-SA 4.0 许可协议