JavaScript 从另一个 JS 文件调用函数 |
您所在的位置:网站首页 › js的function可以无限自调用吗 › JavaScript 从另一个 JS 文件调用函数 |
来自 HTML 文件的 JavaScript 调用函数
JavaScript 调用函数从一个 JS 文件到另一个 JS 文件
使用 ES6 Import 和 Export 的 JavaScript 调用函数
使用 jQuery 从一个 JS 文件到另一个 JS 文件的 JavaScript 调用函数
本课是关于从另一个 JS 文件调用 JavaScript 函数。它演示了如何使用本地机器和实时服务器调用 HTML 文件中的 JavaScript 函数以及从一个 JS 文件到另一个 JS 文件。 来自 HTML 文件的 JavaScript 调用函数HTML 代码: JavaScript Function CallJavaScript 代码: 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 代码: Call Function from One JS file into anotherfirst.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 代码: Call Function from One JS file into another Show Circle Areafirst.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 代码: Call Function from One JS file into anotherfirst.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() 方法返回的浏览器中。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |