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