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

Call JavaScript function from another JavaScript file

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

first.js 文件中,我想调用 second.js:[=15 中的函数=]

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

这是 second.js 文件:

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

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


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

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

反转脚本元素的顺序。

无法调用函数,除非它在同一文件中定义或在尝试调用它之前已加载。

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

您在 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>

它工作正常:)

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

second.js

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

first.js

import { secondFun } from 'second.js';

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

second.js

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

还没有测试,但应该可以工作

即使你的js不对queue函数order这个函数也会等到所有文件加载完毕才执行

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

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

1.

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

2。 Source

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

Demo@plnkr