JavaScript 從另一個 JS 檔案呼叫函式
- 來自 HTML 檔案的 JavaScript 呼叫函式
- JavaScript 呼叫函式從一個 JS 檔案到另一個 JS 檔案
-
使用 ES6
Import
和Export
的 JavaScript 呼叫函式 - 使用 jQuery 從一個 JS 檔案到另一個 JS 檔案的 JavaScript 呼叫函式
本課是關於從另一個 JS 檔案呼叫 JavaScript 函式。它演示瞭如何使用本地機器和實時伺服器呼叫 HTML 檔案中的 JavaScript 函式以及從一個 JS 檔案到另一個 JS 檔案。
來自 HTML 檔案的 JavaScript 呼叫函式
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Function Call</title>
<script src="./first.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
JavaScript 程式碼:
const PI = 3.14
let radius = 3;
function circleArea(){
var inputField = document.createElement("INPUT");
inputField.setAttribute("type", "text");
inputField.setAttribute("value", (PI*radius*radius));
document.body.appendChild(inputField);
}
只要你單擊型別 button
的 input
元素,circleArea()
函式就會執行。它計算圓形區域並將其顯示在瀏覽器中。
createElement()
方法建立一個具有特定名稱的元素節點。該名稱可以是 INPUT
、BUTTON
、P
或其他名稱。
我們在此示例程式碼中建立了一個 input
元素,並使用 setAttribute()
方法設定了兩個屬性(type
和 value
)。
我們將其 type
設定為 text
和 value
並帶有一個圓形區域。appendChild()
函式附加一個新節點,其行為類似於節點的最後一個子節點。
JavaScript 呼叫函式從一個 JS 檔案到另一個 JS 檔案
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="first.js"></script>
<script src="second.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
first.js
程式碼:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
second.js
程式碼:
function circleArea() {
document.write((calcArea()).toFixed(2));
}
我們再次計算圓的面積,但將 first.js
中的 calcArea
函式呼叫到 second.js
檔案中。
document.write()
方法將輸出寫入瀏覽器,toFixed()
函式將數字轉換為字串,然後將其四捨五入為給定的小數位數。在這個例子中,我們將圓的面積列印到小數點後兩位。
使用 ES6 Import
和 Export
的 JavaScript 呼叫函式
使用 ECMAScript6 (ES6),你可以使用 import
/export
功能。使用它,你可以匯入/匯出函式、變數、類。
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script type="module" src="./second.js"></script>
</head>
<body>
<button id="btn" onclick="circleArea()">Show Circle Area</button>
</body>
</html>
first.js
程式碼:
const PI = 3.14;
let radius = 3;
function calcArea() {
return PI * radius * radius;
}
export {calcArea};
second.js
程式碼:
import {calcArea} from './first.js';
document.getElementById('btn').addEventListener("click", function circleArea() {
var inputField = document.createElement("INPUT");
inputField.setAttribute("type", "text");
inputField.setAttribute("value", (calcArea()).toFixed(2));
document.body.appendChild(inputField);
});
此示例程式碼使用 export {calcArea};
從 first.js
檔案中匯出 calcArea()
函式。second.js
檔案首先從 first.js
檔案匯入此函式;只有這樣它才能呼叫它。請記住將帶有 type="module"
的檔案新增到 import
和 export
。
你不需要同時新增兩個 .js
檔案;新增匯入函式的檔案就足夠了。例如,我們在 HTML 檔案中新增一個 second.js
檔案。
要使用 import
和 export
,你必須在伺服器上執行你的應用程式(你可以使用 Node.js),因為它不能在本地機器上執行。你可以在 Visual Studio 程式碼中使用 live server
擴充套件,並使用 Open with Live Server
執行你的程式碼以用於學習目的。
有關 import
和 export
的更多資訊,你可以檢視 this 連結。
使用 jQuery 從一個 JS 檔案到另一個 JS 檔案的 JavaScript 呼叫函式
HTML 程式碼:
<!DOCTYPE html>
<html>
<head>
<title>Call Function from One JS file into another</title>
<script src="second.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input
id="circleArea"
type="button"
value="Show Circle Area"
onclick="circleArea()"
/>
</body>
</html>
first.js
程式碼:
const PiValue = 3.14;
let radius = 3;
function calcArea() {
return PiValue * radius * radius;
}
second.js
程式碼:
function circleArea(){
$.getScript("first.js", function(){
document.write(calcArea());
});
}
此示例程式碼還計算圓的面積,但使用 jQuery 將函式從 first.js
檔案呼叫到 second.js
檔案。
在 second.js
檔案中,一旦 first.js
指令碼使用 getScript()
方法完全載入,回撥函式就會被觸發。document.write
方法將輸出寫入 calcArea()
方法返回的瀏覽器中。