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() 方法返回的瀏覽器中。
