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

时间:2020-11-27 16:00:55

Can we call the function written in one JS file in another JS file? Can anyone help me how to call the function from another JS file?

我们是否可以调用另一个JS文件中的一个JS文件中的函数?谁能帮我从另一个JS文件调用这个函数吗?

6 个解决方案

#1


183  

The function could be called as if it was in the same JS File as long as the file containing the definition of the function has being loaded before the first use of the function.

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

I.e.

即。

File1.js

File1.js

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

File2.js

File2.js

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

HTML

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>

The other way won't work. As correctly pointed out by Stuart Wakefield. The other way will also work.

另一种方法行不通。正如Stuart Wakefield正确指出的那样。另一种方法也是可行的。

HTML

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>

What will not work would be:

不工作的将是:

HTML

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>

As although alertOne is defined when calling it, internally it uses a function that is still not defined (alertNumber).

尽管在调用alertOne时定义了alertOne,但在内部它使用了一个尚未定义的函数(alertNumber)。

#2


64  

The answer above has an incorrect assumption that the order of inclusion of the files matter. As the alertNumber function is not called until the alertOne function is called. As long as both files are included by time alertOne is called the order of the files does not matter:

上面的答案有一个错误的假设,即包含文件的顺序很重要。因为在调用alertNumber函数之前不会调用alertNumber函数。只要两个文件都包含在time alertOne软件中,那么文件的顺序就不重要了:

[HTML]

[HTML]

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

[JS]

(JS)

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

Or it can be ordered like the following:

或者可以这样排序:

[HTML]

[HTML]

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

[JS]

(JS)

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

But if you were to do this:

但是如果你这样做:

[HTML]

[HTML]

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

[JS]

(JS)

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

It only matters about the variables and functions being available at the time of execution. When a function is defined it does not execute or resolve any of the variables declared within until that function is then subsequently called.

它只关心执行时可用的变量和函数。当一个函数被定义时,它不会执行或解析其中声明的任何变量,直到随后调用该函数。

Inclusion of different script files is no different from the script being in that order within the same file, with the exception of deferred scripts:

包含不同脚本文件与在同一文件中按此顺序排列的脚本没有什么不同,除了延迟脚本之外:

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

then you need to be careful.

那你得小心点。

#3


9  

As long as both are referenced by the web page, yes.

只要两者都被web页面引用,是的。

You simply call the functions as if they are in the same JS file.

您只需调用函数,就好像它们在同一个JS文件中一样。

#4


5  

If all files are included , you can call properties from one file to another (like function, variable, object etc.)

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

The js functions and variables that you write in one .js file - say a.js will be available to other js files - say b.js as long as both a.js and b.js are included in the file using the following include mechanism(and in the same order if the function in b.js calls the one in a.js).

js的函数和变量是你在一个。js文件中写的。js可以用于其他js文件——比如b。只要两个a。js和b。使用以下include机制将js包含在文件中(如果函数在b中,则按照相同的顺序。js把这个叫做a.j。

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

#5


3  

yes you can . you need to refer both JS file to the .aspx page

是的,你可以。您需要将两个JS文件都引用到.aspx页面

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

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

JScript1.js

JScript1.js

function ani1() {
    alert("1");
    ani2();
}
JScript2.js
function ani2() {
    alert("2");
}

#6


0  

You can call the function created in another js file from the file you are working in. So for this firstly you need to add the external js file into the html document as-

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

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

The function defined in the external javascript file -

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

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

To call this function in your current file, just call the function as -

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

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

If you want to pass the parameters to the function, then define the function as-

如果要将参数传递给函数,则将函数定义为-

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

And call this function in your current file as -

在当前文件中调用这个函数为-

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

#1


183  

The function could be called as if it was in the same JS File as long as the file containing the definition of the function has being loaded before the first use of the function.

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

I.e.

即。

File1.js

File1.js

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

File2.js

File2.js

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

HTML

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>

The other way won't work. As correctly pointed out by Stuart Wakefield. The other way will also work.

另一种方法行不通。正如Stuart Wakefield正确指出的那样。另一种方法也是可行的。

HTML

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>

What will not work would be:

不工作的将是:

HTML

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>

As although alertOne is defined when calling it, internally it uses a function that is still not defined (alertNumber).

尽管在调用alertOne时定义了alertOne,但在内部它使用了一个尚未定义的函数(alertNumber)。

#2


64  

The answer above has an incorrect assumption that the order of inclusion of the files matter. As the alertNumber function is not called until the alertOne function is called. As long as both files are included by time alertOne is called the order of the files does not matter:

上面的答案有一个错误的假设,即包含文件的顺序很重要。因为在调用alertNumber函数之前不会调用alertNumber函数。只要两个文件都包含在time alertOne软件中,那么文件的顺序就不重要了:

[HTML]

[HTML]

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

[JS]

(JS)

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

Or it can be ordered like the following:

或者可以这样排序:

[HTML]

[HTML]

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

[JS]

(JS)

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

But if you were to do this:

但是如果你这样做:

[HTML]

[HTML]

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

[JS]

(JS)

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

It only matters about the variables and functions being available at the time of execution. When a function is defined it does not execute or resolve any of the variables declared within until that function is then subsequently called.

它只关心执行时可用的变量和函数。当一个函数被定义时,它不会执行或解析其中声明的任何变量,直到随后调用该函数。

Inclusion of different script files is no different from the script being in that order within the same file, with the exception of deferred scripts:

包含不同脚本文件与在同一文件中按此顺序排列的脚本没有什么不同,除了延迟脚本之外:

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

then you need to be careful.

那你得小心点。

#3


9  

As long as both are referenced by the web page, yes.

只要两者都被web页面引用,是的。

You simply call the functions as if they are in the same JS file.

您只需调用函数,就好像它们在同一个JS文件中一样。

#4


5  

If all files are included , you can call properties from one file to another (like function, variable, object etc.)

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

The js functions and variables that you write in one .js file - say a.js will be available to other js files - say b.js as long as both a.js and b.js are included in the file using the following include mechanism(and in the same order if the function in b.js calls the one in a.js).

js的函数和变量是你在一个。js文件中写的。js可以用于其他js文件——比如b。只要两个a。js和b。使用以下include机制将js包含在文件中(如果函数在b中,则按照相同的顺序。js把这个叫做a.j。

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

#5


3  

yes you can . you need to refer both JS file to the .aspx page

是的,你可以。您需要将两个JS文件都引用到.aspx页面

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

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

JScript1.js

JScript1.js

function ani1() {
    alert("1");
    ani2();
}
JScript2.js
function ani2() {
    alert("2");
}

#6


0  

You can call the function created in another js file from the file you are working in. So for this firstly you need to add the external js file into the html document as-

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

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

The function defined in the external javascript file -

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

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

To call this function in your current file, just call the function as -

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

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

If you want to pass the parameters to the function, then define the function as-

如果要将参数传递给函数,则将函数定义为-

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

And call this function in your current file as -

在当前文件中调用这个函数为-

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