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

【问题标题】：Call JavaScript function from another JavaScript file从另一个 JavaScript 文件调用 JavaScript 函数
【发布时间】：2019-01-16 17:37:47
【问题描述】：

<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!!')
}

【问题讨论】：

【解决方案1】：

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

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

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

颠倒脚本元素的顺序。

【讨论】：

【解决方案2】：

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

second.js

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

first.js

import { secondFun } from 'second.js';

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

【讨论】：

【解决方案3】：

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

一个函数不能被调用，除非它与试图调用它的作用域相同或更大。

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

1.js：

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

2.js：

fn1();

index.html：

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

效果很好:)

【讨论】：

【解决方案4】：

在second.js

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

没有测试，但假设可以工作

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：