我們可以調用另一個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編寫的函數嗎？

回答

相關問題