ES6引入模块系统，通过export导出和import导入实现代码复用；支持命名导出与默认导出，需在HTML中使用type=”module”加载，模块自动运行在严格模式下且仅执行一次。
JavaScript 的模块系统在 ES6（ECMAScript 2015）中正式引入，解决了以往缺乏原生模块支持的问题。通过 import 和 export，开发者可以将代码拆分成多个文件，实现更好的组织和复用。下面详细介绍如何使用 ES6 模块。
1. export：导出模块内容
在一个 JavaScript 文件中，可以通过 export 关键字将变量、函数或类暴露出去，供其他文件导入使用。
支持两种导出方式：命名导出和默认导出。
命名导出（Named Exports）
立即学习“Java免费学习笔记（深入）”；
可以在声明的同时导出，也可以统一导出。
示例：
// math.jsexport const PI = 3.14159;export function add(a, b) {return a + b;}
function multiply(a, b) {return a * b;}
export { multiply }; // 单独导出
默认导出（Default Export）
每个模块只能有一个默认导出，适合导出单个类或函数。
示例：
// calculator.jsexport default function(a, b) { return a - b;}
或者导出类：
// Person.jsexport default class Person { constructor(name) { this.name = name; }greet() {console.log(Hello, I'm ${this.name});}}
2. import：导入模块内容
使用 import 可以从其他模块加载导出的内容。
导入命名导出
需要使用花括号 {} 匹配导出的名称。
示例：
// main.jsimport { PI, add, multiply } from './math.js';console.log(PI); // 3.14159console.log(add(2, 3)); // 5console.log(multiply(4, 5)); // 20
导入默认导出
不需要花括号，可以自定义名称。
示例：
// main.jsimport subtract from './calculator.js';console.log(subtract(10, 4)); // 6import Person from './Person.js';const p = new Person("Alice");p.greet(); // Hello, I'm Alice
混合导入
同时导入默认和命名导出：
import Person, { PI, add } from './utils.js';
整体导入
将整个模块导入为一个对象：
import * as MathUtils from './math.js';console.log(MathUtils.PI);console.log(MathUtils.add(2, 3));
3. 使用模块的注意事项
要在浏览器中使用 ES6 模块，需注意以下几点：
HTML 中引入模块必须加上 type=”module”：
模块运行在严格模式下，无需显式写 “use strict”；模块脚本存在跨域限制，建议在服务器环境下运行（如 localhost）；模块是延迟解析的，会在页面解析完成后执行；同一个模块只会被执行一次，即使被多次导入。
4. 实际项目中的常见用法
通常会将工具函数集中导出：
// utils/index.jsexport { default as formatDate } from './formatDate.js';export { default as validateEmail } from './validateEmail.js';export * from './constants'; // 导出所有命名导出
然后统一导入：
import { formatDate, validateEmail, API_URL } from './utils/index.js';
基本上就这些。掌握 import 和 export 的基本语法和使用场景，就能很好地组织现代 JavaScript 项目结构。
以上就是JavaScript如何使用模块_JavaScriptES6模块importexport使用方法教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539141.html
微信扫一扫 
支付宝扫一扫 
