JavaScript 從另一個 JS 檔案呼叫函式

Mehvish Ashiq 2023年1月30日 2022年5月5日
  1. 來自 HTML 檔案的 JavaScript 呼叫函式
  2. JavaScript 呼叫函式從一個 JS 檔案到另一個 JS 檔案
  3. 使用 ES6 ImportExport 的 JavaScript 呼叫函式
  4. 使用 jQuery 從一個 JS 檔案到另一個 JS 檔案的 JavaScript 呼叫函式
JavaScript 從另一個 JS 檔案呼叫函式

本課是關於從另一個 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);
}

只要你單擊型別 buttoninput 元素,circleArea() 函式就會執行。它計算圓形區域並將其顯示在瀏覽器中。

createElement() 方法建立一個具有特定名稱的元素節點。該名稱可以是 INPUTBUTTONP 或其他名稱。

我們在此示例程式碼中建立了一個 input 元素,並使用 setAttribute() 方法設定了兩個屬性(typevalue)。

我們將其 type 設定為 textvalue 並帶有一個圓形區域。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 ImportExport 的 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" 的檔案新增到 importexport

你不需要同時新增兩個 .js 檔案;新增匯入函式的檔案就足夠了。例如,我們在 HTML 檔案中新增一個 second.js 檔案。

要使用 importexport,你必須在伺服器上執行你的應用程式(你可以使用 Node.js),因為它不能在本地機器上執行。你可以在 Visual Studio 程式碼中使用 live server 擴充套件,並使用 Open with Live Server 執行你的程式碼以用於學習目的。

有關 importexport 的更多資訊,你可以檢視 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() 方法返回的瀏覽器中。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Function