我们可以在另一个 JS 文件中调用用一个 JavaScript 编写的函数吗？答案

【问题标题】：Can we call the function written in one JavaScript in another JS file?我们可以在另一个 JS 文件中调用用一个 JavaScript 编写的函数吗？
【发布时间】：2011-04-18 02:45:04
【问题描述】：

我们可以在另一个JS文件中调用写在一个JS文件中的函数吗？谁能帮我如何从另一个 JS 文件中调用该函数？

【问题讨论】：

标签： javascript include

【解决方案1】：

只要在第一次使用函数之前已经加载了包含函数定义的文件，就可以像在同一个 JS 文件中一样调用该函数。

即

文件1.js

function alertNumber(number) {
    alert(number);
}

文件2.js

function alertOne() {
     alertNumber("one");
}

HTML

<head>
....
    <script src="File1.js" type="text/javascript"></script> 
    <script src="File2.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

~~其他方式行不通。~~ 正如Stuart Wakefield 正确指出的那样。其他方式也可以。

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
    <script type="text/javascript">
       alertOne();
    </script>
....
</body>

什么是行不通的：

HTML

<head>
....
    <script src="File2.js" type="text/javascript"></script> 
    <script type="text/javascript">
       alertOne();
    </script>
    <script src="File1.js" type="text/javascript"></script> 
....
</head>
<body>
....
</body>

虽然alertOne在调用时已定义，但在内部它使用了一个仍未定义的函数(alertNumber)。

【讨论】：

通过将 JS 文件包含在 Index.html 文件中的示例与我们使用 JS 导入方法从另一个具有 JS 脚本方法导出到导出方法的 JS 文件中导入方法的其他方法有什么不同.

【解决方案2】：

上面的答案有一个错误的假设，即包含文件的顺序很重要。因为在调用 alertOne 函数之前不会调用 alertNumber 函数。只要两个文件都包含在 alertOne 被调用的时间，文件的顺序就没有关系：

[HTML]

<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File1.js
function alertNumber( n ) {
    alert( n );
};
// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // No errors

或者可以这样排序：

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript">
    alertOne( );
</script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// File1.js
function alertNumber( n ) {
    alert( n );
};
// Inline
alertOne( ); // No errors

但如果你这样做：

[HTML]

<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript">
    alertOne( );
</script>
<script type="text/javascript" src="file1.js"></script>

[JS]

// File2.js
function alertOne( ) {
    alertNumber( "one" );
};
// Inline
alertOne( ); // Error: alertNumber is not defined
// File1.js
function alertNumber( n ) {
    alert( n );
};

这仅与执行时可用的变量和函数有关。定义函数时，它不会执行或解析其中声明的任何变量，直到随后调用该函数。

包含不同的脚本文件与在同一文件中按该顺序包含的脚本没有什么不同，但延迟脚本除外：

<script type="text/javascript" src="myscript.js" defer="defer"></script>

那么你需要小心。

【讨论】：

这可能听起来很挑剔，但包含与连接脚本并不完全相同。考虑 script1：function myfunction() { 和 script2：alert();} 它不会工作。这让我很困扰，因为我试图模块化一个太长的 js 文件。见stackoverflow.com/questions/20311604/…
如果其中一个函数在一个类中，该函数会共享this 上下文吗？
this 绑定在调用函数的位置（除非事先调用了 bind）。两个单独文件中的两个函数不会自动共享this 上下文，在上面的示例中，既没有this 上下文，即非严格模式下的window 或严格模式下的undefined。您可以通过将函数分配为对象的成员（即在构造函数 this.method = myOtherFunc 中）或使用绑定来使其他脚本中的函数共享相同的 this 值。如果您需要更深入的答案，请发布更详细的 SO 问题。干杯，斯图尔特

【解决方案3】：

只要两者都被网页引用，就可以。

您只需像在同一个 JS 文件中一样调用这些函数。

【讨论】：

【解决方案4】：

ES6: 你可以只包含一个主文件，而不是在 .html 中包含许多使用 <script> 的 js 文件，例如script.js 使用属性 type="module" (support) 并在 script.js 中包含其他文件：

<script type="module" src="script.js"></script>

在script.js 文件中包含另一个类似的文件：

import { hello } from './module.js';
...
// alert(hello());

在“module.js”中，您必须 export function/class 才能导入

export function hello() {
    return "Hello World";
}

工作example here。

【讨论】：

【解决方案5】：

如果包含所有文件，您可以从一个文件调用属性到另一个（如函数、变量、对象等）

您在一个 .js 文件中编写的 js 函数和变量 - 说 a.js 将可用于其他 js 文件 - 说 b.js 为只要 a.js 和 b.js 都包含在文件中使用以下包含机制（如果 b.js 中的函数调用 a.js 中的函数，则按相同顺序）。

<script language="javascript" src="a.js"> and 
<script language="javascript" src="b.js">

【讨论】：

【解决方案6】：

是的，你可以。您需要将JS file 都引用到.aspx 页面

<script language="javascript" type="text/javascript" src="JScript1.js">
 </script>

    <script language="javascript" type="text/javascript" src="JScript2.js">
    </script>

JScript1.js

function ani1() {
    alert("1");
    ani2();
}

JScript2.js

function ani2() {
    alert("2");
}

【讨论】：

【解决方案7】：

对于那些想要在Node.js（在服务器端运行脚本）中执行此操作的人，另一种选择是使用require 和module.exports。下面是一个关于如何创建模块并将其导出以供其他地方使用的简短示例：

file1.js

const print = (string) => {
    console.log(string);
};

exports.print = print;

file2.js

const file1 = require('./file1');

function printOne() {
    file1.print("one");
};

【讨论】：

【解决方案8】：

您可以从您正在使用的文件中调用在另一个js文件中创建的函数。因此，首先您需要将外部js文件添加到html文档中-

<html>
<head>
    <script type="text/javascript" src='path/to/external/js'></script>
</head>
<body>
........

外部javascript文件中定义的函数——

$.fn.yourFunctionName = function(){
    alert('function called succesfully for - ' + $(this).html() );
}

要在当前文件中调用此函数，只需将该函数调用为 -

......
<script type="text/javascript">
    $(function(){
        $('#element').yourFunctionName();
    });
</script>

如果要给函数传递参数，那么将函数定义为-

$.fn.functionWithParameters = function(parameter1, parameter2){
        alert('Parameters passed are - ' + parameter1 + ' , ' + parameter2);
}

并在当前文件中将此函数称为 -

$('#element').functionWithParameters('some parameter', 'another parameter');

【讨论】：

请不要到处假设 jQuery。此外，将 $.fn 赋值包装在文档就绪子句中是没有意义的
好的，下次我会记住的 :)，但是你能解释一下为什么 $.fn 赋值没有意义吗？
不是作业，而是包装。
好的，这意味着当文档没有准备好时，才应该使用 $.fn 来创建函数
但是为什么呢？函数的声明不需要等待 DOM。即使调用可能（但通常不会）。

【解决方案9】：

下面是一个更详细的示例，附有 CodePen sn-p：

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 sn-p：link。

【讨论】：

【解决方案10】：

嗯，我遇到了另一个不错的解决方案。

window['functioName'](params);

【讨论】：