ES6模块系统通过export和import实现代码封装与复用，支持命名导出、默认导出及混合导入方式，需在HTML中使用type=”module”并保留.js后缀，提升项目可维护性。
在ES6中，JavaScript引入了原生的模块系统，让开发者可以更清晰地组织代码。模块的核心是导出（export）和导入（import），实现功能的封装与复用。
1. 模块导出（export）
一个JS文件可以作为模块，通过export关键字将变量、函数或类暴露出去，供其他文件使用。
命名导出（Named Exports）：可以导出多个值。
// mathUtils.jsexport const add = (a, b) => a + b;export const multiply = (a, b) => a * b;export const PI = 3.14159;
也可以统一导出：
立即学习“Java免费学习笔记（深入）”；
// mathUtils.jsconst add = (a, b) => a + b;const multiply = (a, b) => a * b;const PI = 3.14159;export { add, multiply, PI };
默认导出（Default Export）：每个模块只能有一个默认导出，适合导出主功能，如一个类或主函数。
// calculator.jsexport default class Calculator { static add(a, b) { return a + b; }}
2. 模块导入（import）
使用import从其他模块加载内容。
导入命名导出：
// main.jsimport { add, multiply } from './mathUtils.js';console.log(add(2, 3)); // 5console.log(multiply(2, 3)); // 6
可以重命名导入：
import { add as sum, PI } from './mathUtils.js';console.log(sum(1, 2)); // 3
导入默认导出：
// main.jsimport Calculator from './calculator.js';console.log(Calculator.add(5, 3)); // 8
注意：默认导入时名字可自定义，不需与导出时一致。
同时导入默认和命名导出：
// main.jsimport Calculator, { add, PI } from './mathUtilsAndCalc.js';
导入所有内容到一个对象：
import * as MathLib from './mathUtils.js';console.log(MathLib.add(2, 3)); // 5console.log(MathLib.multiply(2, 4)); // 8console.log(MathLib.PI); // 3.14159
3. 使用模块的实际注意事项
浏览器中使用模块需要满足以下条件：
HTML中引入模块需添加type=”module”：
模块路径必须是完整文件名，包括.js后缀（不能省略）；模块运行在严格模式下，无需手动写"use strict";；模块支持相对路径（./, ../）或绝对路径；在Node.js环境中需启用ES模块支持（如使用.mjs扩展名或在package.json中设置"type": "module"）。
4. 常见使用场景示例
假设有一个工具模块utils.js：
// utils.jsexport const formatPrice = (price) => `$${price.toFixed(2)}`;export const isEmpty = (str) => str.trim() === '';export default function log(msg) { console.log('[LOG]', msg);}
在主文件中使用：
// app.jsimport logger, { formatPrice, isEmpty } from './utils.js';logger('App started');console.log(formatPrice(19.9)); // $19.90console.log(isEmpty('')); // true
基本上就这些。掌握export和import的几种形式，就能高效组织现代JavaScript项目。模块化让代码更清晰、可维护性更强，是前端开发的必备技能。
以上就是JS模块怎么导入_JavaScriptES6模块导入导出使用方法详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539160.html
微信扫一扫 
支付宝扫一扫 
