HTML5代码如何管理模块化 HTML5代码中ES6模块的导入导出

在HTML5中使用ES6模块需在script标签添加type="module"属性，通过export和import实现代码的模块化管理，支持命名导出、默认导出及混合导入方式，模块默认启用严格模式且不污染全局作用域，导入时需使用完整路径包括扩展名，本地测试需通过服务器运行以避免CORS问题。

在HTML5中使用ES6模块，可以通过import和export语法实现代码的模块化管理。这种方式让JavaScript代码更清晰、可维护性更高，并支持按需加载功能。

启用ES6模块

要在HTML页面中使用ES6模块，必须在标签中添加type="module"属性。浏览器会据此将脚本作为模块处理，启用模块作用域和导入导出机制。

模块脚本默认采用严格模式，且不会污染全局作用域。模块只会执行一次，重复导入也不会重新运行代码。

导出模块内容（export）

在模块文件中，可以使用export关键字暴露变量、函数或类，供其他模块导入使用。

立即学习“前端免费学习笔记（深入）”；

支持两种导出方式：

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

• 命名导出：可导出多个值
// math-utils.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class Calculator {
  multiply(x, y) {
    return x * y;
  }
}
• 默认导出：每个模块只能有一个默认导出
// greeting.js
export default function() {
  console.log("Hello from module!");
}

导入模块内容（import）

使用import语句从其他模块引入所需内容。

• 导入命名导出：使用花括号指定要导入的名称
// main.js
import { PI, add, Calculator } from './math-utils.js';

console.log(PI);
console.log(add(2, 3));
const calc = new Calculator();
• 导入默认导出：可自定义名称，无需花括号
import greet from './greeting.js';
greet(); // 输出: Hello from module!
• 混合导入：同时导入默认和命名导出
import greet, { add } from './utils.js';
• 整体导入：将所有导出内容作为一个对象导入
import * as utils from './math-utils.js';
console.log(utils.PI);
console.log(utils.add(4, 5));

模块路径注意事项

模块导入时路径必须是完整文件名，包括扩展名（如.js），不能省略。相对路径以./或../开头，绝对路径可使用根路径或URL。

本地测试时需通过服务器运行（如localhost），直接打开文件可能因CORS策略导致模块加载失败。

基本上就这些。ES6模块让前端代码组织更规范，配合现代构建工具还能实现代码分割和懒加载，提升应用性能。