我们可以在另一个JS文件中调用写在一个JS文件中的函数吗?有人能帮助我如何从另一个JS文件调用函数吗?
当前回答
只要在第一次使用函数之前加载了包含函数定义的文件，函数就可以像在同一个JS文件中一样被调用。
I.e.
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)。
其他回答
如果包含所有文件，你可以从一个文件调用属性到另一个文件(如函数、变量、对象等)。
在一个.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">
ES6:使用<script>在.html中包含许多js文件，你可以只包括一个主文件，例如script.js使用属性type="module"(支持)，在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";
}
这里是工作示例。
我想到了另一个好办法。 窗口(“functioName”)(params);
下面是一个更具描述性的例子，附带一个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。
只要在第一次使用函数之前加载了包含函数定义的文件，函数就可以像在同一个JS文件中一样被调用。
I.e.
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)。
