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