我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗？相关的知识，希望对你有一定的参考价值。
我们可以在另一个JS文件中调用写在一个JS文件中的函数吗？任何人都可以帮我如何从另一个JS文件调用该函数？
只要在第一次使用函数之前加载了包含函数定义的文件，就可以调用该函数，就像它在同一个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>
另一种方式是行不通的。 正如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）。
上面的答案有一个错误的假设，即包含文件的顺序很重要。因为在调用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文件中编写的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">
是的你可以 。你需要将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文件中创建的函数。因此，首先您需要将外部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代码段的更具描述性的示例：
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。
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。
以上是关于我们可以在另一个JS文件中调用用一个JavaScript编写的函数吗？的主要内容，如果未能解决你的问题，请参考以下文章
如果我在另一个 js 文件中使用 writeFile()，是不是需要再次调用 readFileSync()？