JavaScript通过ES6模块实现代码组织与复用，使用export导出函数或变量，import导入模块功能。支持命名导出、默认导出及重命名导入，提升灵活性和可维护性。
在JavaScript开发中，函数模块的定义与导入是组织代码、提升复用性的关键手段。随着ES6（ECMAScript 2015）的推出，JavaScript原生支持了模块系统，让模块化编程更加规范和高效。下面详细介绍如何定义函数模块、导入模块，并结合ES6模块语法进行说明。
定义函数模块
在ES6模块中，一个JS文件就是一个模块。你可以在这个文件中定义函数，并通过 export 关键字将其暴露出去，供其他文件使用。
例如，创建一个名为 mathUtils.js 的文件：
// mathUtils.js function add(a, b) { return a + b; }
function subtract(a, b) {
return a – b;
}
// 导出单个函数
export { add, subtract };
也可以在定义时直接导出：
// utils.js export function multiply(a, b) { return a * b; }
export const PI = 3.14159;
导入函数模块
使用 import 语句可以从其他模块中导入函数或变量。导入方式根据导出方式略有不同。
从上面的 mathUtils.js 中导入函数：
// main.js import { add, subtract } from ‘./mathUtils.js’;
console.log(add(5, 3)); // 输出: 8
console.log(subtract(5, 3)); // 输出: 2
如果只想导入部分功能，可以只引入需要的函数：
import { multiply } from ‘./utils.js’; console.log(multiply(4, 5)); // 输出: 20
默认导出与导入
ES6允许每个模块设置一个默认导出（default export），这样在导入时可以自定义名称，更灵活。
// greeting.js export default function() { console.log(“Hello, world!”); }
导入默认导出的函数：
// main.js import greet from ‘./greeting.js’; greet(); // 输出: Hello, world!
注意：默认导入不需要使用大括号 {}。
混合导出与重命名导入
一个模块可以同时有默认导出和命名导出。导入时也支持重命名，避免命名冲突。
// shapes.js export const area = (r) => 3.14 * r ** 2;
export default function circleInfo(r) {
console.log(半径为 ${r} 的圆);
}
// main.js
import circle, { area as circleArea } from ‘./shapes.js’;
circle(5);
console.log(circleArea(5));
这里使用 as 关键字将 area 重命名为 circleArea，提高可读性。
基本上就这些。掌握 export 和 import 的基本用法，就能在项目中有效组织函数模块，提升代码维护性。注意在HTML中使用模块时，script标签需加上 type=”module”：
以上就是JS函数如何定义函数模块导入_JS函数模块导入定义与ES6模块使用教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1535850.html
微信扫一扫 
支付宝扫一扫 
