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

我们可以在另一个JS文件中调用写在一个JS文件中的函数吗?有人能帮助我如何从另一个JS文件调用函数吗?

496124 次浏览
小开

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

你只需调用这些函数，就好像它们在同一个JS文件中一样。

小开

是的，你可以。你需要将这两个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");
}
小开
最佳答案

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

即。

File1.js

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

File2.js

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

超文本标记语言

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

另一种方法行不通。 正如斯图亚特·韦克菲尔德正确指出的那样。

超文本标记语言

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

行不通的是:

超文本标记语言

<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文件中编写的js函数和变量- 例如a.js将可用于其他js文件-例如研究 as 只要a.js和研究都包含在文件中 使用以下包含机制(如果b.js中的函数调用a.js中的函数，则顺序为相同) 

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

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

那你得小心点。

小开

您可以从正在工作的文件中调用在另一个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');
小开

下面是一个更具描述性的例子，附带一个CodePen代码片段:

js 1.

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

js 2.

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>

输出

输出。“></a> .</p> <p>试试这个CodePen片段:<a href=链接。

小开

在.html中使用<script>来包含许多js文件，你可以只包括一个主文件，例如使用属性type="module" (支持)的script.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";
}

例子工作。

小开

嗯，我想到了另一个甜美的解决方案 window['functioName'](params); < / p >

小开

对于那些想在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");
};

提交答案