Question

我们可以在另一个JS文件中调用一个JS文件中编写的函数吗？任何人都可以帮我如何从另一个JS文件调用该函数？

Answer 1

只要在第一次使用函数之前加载了包含函数定义的文件，就可以调用该函数，就像它在同一个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）。

Answer 2

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

然后你需要小心。

Answer 3

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

您只需调用这些函数就好像它们位于同一个JS文件中一样。

Answer 4

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

您在一个.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">

Answer 5

是的，你可以。您需要将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");
}

Answer 6

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

SELECT count(*),c_user_name
FROM tra_shipment_status
WHERE i_tra_shipment_status_id IN
  (SELECT MAX(i_tra_shipment_status_id)
  FROM tra_shipment_status
  WHERE i_status_code = '4072'
  AND c_reference    IN ('FILEIO0023','MIASTOFIL003') 
  );  
 Group By c_user_name

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

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

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

$.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);
}

Answer 7

这是附加了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。

Answer 8

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。

Answer 9

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

window['functioName'](params);

Answer 10

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

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

10 个答案: