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

Answers:

213

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

即

File1.js

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

File2.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）。

— 埃德加·埃尔南德斯（Edgar Hernandez）
source
您的示例之间的区别是，Index.html文件中包含JS文件，而另一种方法是我们使用JS导入方法从另一个具有JS脚本方法导出到导出方法的JS文件中导入方法。
— Phil
68

上面的答案有一个错误的假设，即文件的包含顺序很重要。因为直到调用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>

那你要小心点

— 斯图尔特·韦克菲尔德
source
1
同样也太少了
— Stuart Wakefield
1
这听起来有些挑剔，但包含与串联脚本并不完全相同。考虑function myfunction() {脚本1 ：和脚本2：alert();}它不起作用。这让我感到困扰，因为我试图对一个太长的js文件进行模块化。见stackoverflow.com/questions/20311604/...
— 博洋
this如果一个函数在一个类中，此函数是否将共享上下文？
— 2016年
this绑定在调用函数的位置（除非bind事先调用）。两个单独文件中的两个函数将不会this自动共享上下文，在上面的示例中，这两个函数都没有this上下文，即window处于非严格或undefined严格模式。您可以通过将函数this分配为对象的成员（即在构造函数中this.method = myOtherFunc）或使用bind 来使其他脚本中的函数共享相同的值。如果您需要更深入的答案，请发表更详细的SO问题。斯图尔特干杯
— 斯图尔特·韦克菲尔德
13

只要两者都被网页引用，是的。

您只需简单地调用函数，就好像它们在同一JS文件中一样。

— 球
source
6

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

您在一个.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">
— Pramendra Gupta
source
4

ES6：<script>您可以仅包含一个主文件，例如，script.js使用attribute type="module"（support），而不是在.html 中包含许多js文件，而在内部，script.js还可以包含其他文件：

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

在script.js文件中包含另一个文件，例如：

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

在“ module.js”中，您必须导出要导入的函数/类

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

这里的工作示例。

— 卡米尔（KamilKiełczewski）
source
3

是的你可以 。您需要同时引用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");
}
— 阿尼什·马洛基
source
0

您可以从正在使用的文件中调用在另一个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');
— 片状的
source
1
请不要在所有地方都假定使用jQuery。另外，将$.fn赋值包装在文档就绪子句中是没有意义的
— Bergi
好的，下次我会记住的：)，但是您能解释一下为什么$ .fn分配没有意义吗？
— Sheetal说道
不是任务，而是包装。
— Bergi
好的，这意味着当文档尚未准备好时，仅应使用$ .fn来创建函数
— 片面时间
但为什么？函数的声明不需要等待DOM。即使通话可以（但通常不够）。
— Bergi
0

这是附加了CodePen代码段的更具描述性的示例：

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。

— 康斯塔·戈根（Consta Gorgan）
source
0

好吧，我遇到了另一个很好的解决方案。

window['functioName'](params);

— 迪格维杰
source
0

对于那些想在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");
};
— 典礼
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.