HOWTO · JavaScript
JavaScript 從另一個 JS 檔案呼叫函式
本教程演示瞭如何在本地機器上將一個 JS 檔案中的 JavaScript 函式呼叫到另一個 JS 檔案中。它還舉例說明了在 Visual Studio 程式碼中使用實時伺服器使用 ES6 匯入和匯出功能。
本課是關於從另一個 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() 方法返回的瀏覽器中。
