JavaScript模块化通过import和export实现代码拆分、复用与作用域隔离，核心是按需导出引入以避免全局污染；支持命名导出（多个，名字需一致）、默认导出（每个模块至多一个，导入名可自定义）及混合导入；import/export必须在顶层，浏览器需script加type="module"，Node.js需.mjs或package.json设"type": "module"。
JavaScript模块化通过import和export实现代码的拆分、复用与作用域隔离，核心是把功能按需导出、按需引入，避免全局污染和依赖混乱。
export：怎么把东西“亮出来”？
一个模块（.js文件）默认不对外暴露任何内容，必须显式用export声明哪些变量、函数或类可以被其他模块使用。
-
命名导出（Named Export）：可导出多个，名字必须和导入时一致
math.jsexport 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免费学习笔记（深入）”；
云模块网站管理系统3.1.03
下载
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
main.js
import log, { greet } from './utils.js';
log(greet('Alice'));
在HTML中引入：
基本上就这些。不复杂但容易忽略细节，比如路径写错、大小写不一致、漏掉type="module"——跑不通时优先检查这几处。
