JavaScript模块化通过import和export实现代码拆分、复用与作用域隔离，核心是按需导出引入以避免全局污染；支持命名导出（多个，名字需一致）、默认导出（每个模块至多一个，导入名可自定义）及混合导入；import/export必须在顶层，浏览器需script加type=”module”，Node.js需.mjs或package.json设”type”: “module”。
JavaScript模块化通过import和export实现代码的拆分、复用与作用域隔离，核心是把功能按需导出、按需引入，避免全局污染和依赖混乱。
export：怎么把东西“亮出来”？
一个模块（.js文件）默认不对外暴露任何内容，必须显式用export声明哪些变量、函数或类可以被其他模块使用。
命名导出（Named Export）：可导出多个，名字必须和导入时一致
math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }
默认导出（Default Export）：每个模块最多一个，导入时可自定义名字
utils.jsexport default function debounce(fn, delay) { ... }混合导出也允许，但默认导出不能用export default const x = 1这种写法，得先声明再导出，或用export default后接表达式
import：怎么把东西“拿进来”？
导入语法要和导出方式匹配，路径必须是相对或绝对的（如./math.js），不能是纯模块名（Node.js里除外，需配置）。
导入命名导出：用大括号，名字必须完全一致import { PI, add, Calculator } from './math.js';导入默认导出：不用大括号，名字任意
import debounce from './utils.js'; // ✅
import myDebounce from './utils.js'; // ✅ 也可以
同时导入默认 + 命名：import debounce, { PI, add } from './mathAndUtils.js';整体导入（namespace import）：把所有命名导出挂在一个对象下
import * as math from './math.js';
console.log(math.PI, math.add(2, 3));
常见注意事项
import和export只能出现在模块顶层，不能在if或函数里——它们是编译时静态解析的浏览器中使用模块，标签必须加type="module"，否则会报错Node.js默认不支持ES模块，需把文件后缀改为.mjs，或在package.json中设置"type": "module"路径别名（如@/components）不是原生支持的，需要构建工具（Vite、Webpack等）配置别名解析
一个最小可运行例子
utils.js
export function greet(name) { return `Hello, ${name}`; }
export default function log(msg) { console.log('[LOG]', msg); }
立即学习“Java免费学习笔记（深入）”；
main.js
import log, { greet } from './utils.js';
log(greet('Alice'));
在HTML中引入：
基本上就这些。不复杂但容易忽略细节，比如路径写错、大小写不一致、漏掉type="module"——跑不通时优先检查这几处。
以上就是javascript模块化如何实现_如何使用import和export？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543668.html
微信扫一扫 
支付宝扫一扫 
