我想在second.js文件中调用在first.js文件中定义的函数。这两个文件都定义在HTML文件中,如下所示:

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

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

这是我的代码:

second.js

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

first.js

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

当前回答

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

除非函数与试图调用它的函数在相同或更大的作用域中,否则不能调用它。

你可以在first.js中声明fn1函数,然后在second中你可以只声明fn1();

1. js:

function fn1 () {
    alert();
}

2. js:

fn1();

index . html:

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

其他回答

如果您的服务器允许使用缓存来提高速度,请使用缓存。

var extern =(url)=> {           // load extern javascript
    let scr = $.extend({}, {
        dataType: 'script',
        cache: true,
        url: url
    });
    return $.ajax(scr);
}
function ext(file, func) {
    extern(file).done(func);    // calls a function from an extern javascript file
}

然后像这样使用它:

ext('somefile.js',()=>              
    myFunc(args)
);  

可选地,为它制作一个原型以使其更加灵活。所以你不需要每次都定义文件,如果你调用一个函数或者你想从多个文件中获取代码。

迟到总比不到好

(function (window) {const helper = { fetchApi: function () { return "oke"}
   if (typeof define === 'function' && define.amd) {
    define(function () { return helper; });
   }
   else if (typeof module === 'object' && module.exports) {
    module.exports = helper;
  }
  else {
    window.helper = helper;
  }
}(window))

指数的html < script src = " helper.js " > < /脚本> < script src = " . js " > < /脚本>

在test.js文件中 helper.fetchApi ()

在创建函数时使用“var”,然后您可以从另一个文件访问该函数。确保两个文件都能很好地连接到您的项目,并且可以相互访问。

file_1.js

var firstLetterUppercase = function(str) {
   str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
   });
   return str;
}

从file_2.js文件中访问这个函数/变量

firstLetterUppercase("gobinda");

输出=> Gobinda

它应该像这样工作:

1.js

function fn1() {
  document.getElementById("result").innerHTML += "fn1 gets called";
}

2.js

function clickedTheButton() {
  fn1();
} 

index . html

<html>
  <head>
  </head>
  <body>
    <button onclick="clickedTheButton()">Click me</button>
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript" src="2.js"></script>
  </body>
 </html>

输出

试试这个CodePen代码片段:link。

// module.js
export function hello() {
  return "Hello";
}

// main.js
import {hello} from 'module'; // or './module'
let val = hello(); // val is "Hello";

参考来自https://hype.codes/how-include-js-file-another-js-file