从另一个 JavaScript 文件调用 JavaScript 函数

Question

<html>
<head>
    <script src="./first.js"></script>
    <script src="./second.js"></script>
</head>
</html>

在first.js文件中，我想从second.js调用函数：

secondFun(); // calling a function from second.js file

这是 second.js 文件：

function secondFun() {
    console.log('second function called!!')
}

Answer 1

tl;dr：在依赖它们之前加载依赖项。

您不能调用尚未加载的函数。

在第一个文件运行完所有顶级语句之前，不会加载在第二个 JS 文件中定义的函数。

颠倒脚本元素的顺序。

Answer 2

使用ECMAScript 6 (ES6) 规范中引入的import/export 。

第二个.js

export function secondFun() {
    console.log('second function called!!')
}

第一个.js

import { secondFun } from 'second.js';

然后在第一个文件中调用secondFun() 。

Answer 3

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

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

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

1.js：

function fn1 (){
    console.log('second function called!!')
}

2.js：

fn1();

索引.html：

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

它工作正常:)

Answer 4

在第二个.js

document.addEventListener("DOMContentLoaded", function(event) {
  function secondFun(){
    console.log('second function called!!')
    }
});

还没有测试，但假设工作

即使你的js不正确的队列函数顺序这个函数也会等到所有文件加载执行

Answer 5

您正在尝试访问我尚不可用的功能。 所以，你不能在这种情况下使用。 但是你可以做什么：

颠倒顺序。
在脚本文件上使用defer属性。

1.

您必须先加载您的函数才能使用它们。 因此，颠倒脚本的顺序。

2.来源

defer属性是很少使用的属性之一。 正如您可能从属性名称中得知的那样， defer 指示脚本标记的内容在页面加载之前不执行。

从另一个 JavaScript 文件调用 JavaScript 函数

问题描述

5 个解决方案

解决方案1
6 已采纳 2018-08-09 09:52:27

解决方案2
4 2018-08-09 09:56:20

解决方案3
2 2018-08-09 09:53:21

解决方案4
0 2018-08-09 09:57:41

解决方案5
0 2018-08-09 09:59:54

1.

2.来源

演示@plnkr

从另一个 JavaScript 文件调用 JavaScript 函数

问题描述

5 个解决方案

解决方案1 6 已采纳 2018-08-09 09:52:27

解决方案2 4 2018-08-09 09:56:20

解决方案3 2 2018-08-09 09:53:21

解决方案4 0 2018-08-09 09:57:41

解决方案5 0 2018-08-09 09:59:54

1.

2.来源

演示@plnkr

解决方案1
6 已采纳 2018-08-09 09:52:27

解决方案2
4 2018-08-09 09:56:20

解决方案3
2 2018-08-09 09:53:21

解决方案4
0 2018-08-09 09:57:41

解决方案5
0 2018-08-09 09:59:54