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

179

的功能可以被称为如果它是在相同的只要包含该函数定义的文件在第一次使用该函数之前被加载，就可以使用JS File。

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

来源

2010-09-28 05:22:38

9

只要这两个都是网页引用的，是的。

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

来源

2010-09-28 05:15:54 jball

3

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

来源

2010-09-28 05:19:59 anishMarokey

5

如果所有文件都包括在内，你可以调用从一个文件到另一个属性（比如函数，变量，对象等）

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

来源

2010-09-28 05:24:21

62

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

，那么你必须要小心。

来源

2010-09-28 10:22:54

+1

太少 – 2012-10-29 08:16:52

+1

同样这可能听起来很挑剔，但包含与连接脚本不完全相同。考虑script1：'function myfunction（）{'和script2：'alert（）;}'这不起作用。它困扰我，因为我试图模块化一个太长的js文件。请参阅http：// stackoverflow。com/questions/20311604/module-pattern-how-to-split-the-code-one-module-into-different-js-files/20311661？noredirect = 1＃20311661 – Boyang 2013-12-03 00:46:47

+0

这个函数会共享'this'上下文，如果其中一个函数在一个类中？ – aks 2016-08-30 04:51:56

0

你可以打电话从您所使用的文件的另一个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');

来源

2017-03-29 07:33:33 sheetal

+0

请不要假设jQuery到处都是。另外，将'$ .fn'赋值包装在文档准备子句中是毫无意义的 – Bergi 2017-03-29 07:37:11

+0

好的，下次我会记住:)但是，你能解释为什么$ .fn赋值是毫无意义的吗？ – sheetal 2017-03-29 10:09:42

+0

不是任务，包装。 – Bergi 2017-03-29 10:11:37

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

回答

相关问题