ES6模块化是JavaScript原生支持的作用域隔离与显式依赖声明的代码组织方式,解决全局污染、加载顺序混乱等问题;支持export default与命名导出混用,但导入语法须严格对应;动态import()用于异步按需加载;模块默认严格模式且顶层作用域封闭。

ES6模块化不是“一种新写法”,而是 JavaScript 原生支持的、**作用域隔离 + 显式依赖声明**的代码组织方式。它解决的是全局污染、加载顺序混乱、无法静态分析等问题——你不用再靠 标签顺序硬凑依赖,也不用担心 utils.js 里定义的 getData 覆盖了 api.js 里的同名函数。
export default 和 export 能不能混用?
能,但要清楚后果:一个模块可以同时有 export default(最多一个)和多个 export(命名导出)。导入时必须严格区分语法:
-
import后不加花括号 → 只能导入export default的内容,名称可自定义 -
import { ... }→ 只能导入命名导出(export const/export function等),名称必须一致,或用as重命名 - 两者可共存:
import main, { helper, PI } from './math.js'
/* math.js */
export default function multiply(a, b) {
return a * b;
}
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}⚠️ 容易踩坑:如果误写成 import { multiply } from './math.js',会报 multiply is not exported —— 因为它不是命名导出,是默认导出。
为什么 import './utils.js' 不报错但没效果?
这是「只执行模块顶层代码」的合法用法,常用于注册全局插件、打补丁、初始化副作用(如设置 localStorage 初始值)。但它不导入任何变量,只是让文件运行一遍。
/* logger.js */
console.log('Logger initialized');
export function log(msg) {
console.info('[APP]', msg);
}
/ main.js /
import './logger.js'; // ✅ 执行并打印 'Logger initialized'
// ❌ 但这里无法访问 log(),因为没导入
常见错误场景:你想引入一个工具函数却只写了 import './utils.js',结果调用 formatDate() 时报 ReferenceError。正确做法是明确导出再导入:export function formatDate() {...} + import { formatDate } from './utils.js'。
淘宝客打折系统,集成了jssdk模块,增加了seo优化功能,更有利于搜索引擎收录 1程序上传到服务器空间 2开启服务器 3打开安装地址:http://您的域名/install.php 4如果不能安装请确保数据库里的表全部删除 5进入后台地址:http://您的域名/main.php 默认用户名和密码都是admin 6测试数据时可以导入 test文件夹里的test.sql文件 到数据库,或者
动态 import() 是什么?什么时候该用?
import() 是个函数,返回 Promise,用于**按需、异步加载模块**。它不写在顶层,而是在条件分支、事件回调、路由切换中触发,适合做代码分割(code splitting)。
- 不能和
export default/import混用在顶层(语法错误) - 浏览器原生支持(Chrome 63+,Firefox 67+),无需构建工具也能跑
- 配合
await更直观:const module = await import('./heavy-chart.js')
// 点击按钮才加载图表组件
document.getElementById('chart-btn').addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});注意:动态导入的模块路径必须是**静态可分析的字符串**(不能是拼接变量),否则打包工具(如 Webpack/Vite)无法做预构建。
最常被忽略的一点:ES6 模块默认是**严格模式 + 顶层作用域封闭**。你在模块里用 var 声明的变量不会挂到 window 上,this 在顶层是 undefined —— 这不是 bug,是设计。别试图绕过它去“模拟全局变量”,该封装就封装,该导出就导出。









