javascript模块化如何实现_import和export怎样组织代码？

JavaScript模块化通过import和export实现封装复用，每个文件为独立作用域模块；支持命名导出、默认导出及统一导出对象；导入需匹配导出方式，注意路径、作用域与执行时机；建议按功能职责组织模块，用index.js聚合入口，并规避循环依赖等陷阱。

JavaScript模块化通过 import 和 export 实现代码的封装与复用，核心是让每个文件成为独立作用域的模块，只显式暴露需要对外提供的变量、函数或类。

export：决定什么可以被其他模块使用

一个模块可以通过多种方式导出内容，关键在于“明确性”和“一致性”：

• 命名导出（named export）：适合导出多个值，如工具函数、配置对象。每个导出项需有名字，可重命名导入时使用。

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const VERSION = '1.0.0';

登录后复制

• 默认导出（default export）：每个模块最多一个，默认导出没有名字限制，导入时可自定义名称，常用于组件、主类或单入口逻辑。

export default class Button {
  render() { return '<button>Click</button>'; }
}

登录后复制

• 统一导出对象：便于集中管理，也利于按需引入（配合打包工具摇树优化）。

export { add, subtract, VERSION } from './utils.js';
export { default as Button } from './Button.js';

登录后复制

import：按需加载并使用其他模块的内容

导入方式要和导出方式匹配，同时注意路径写法和执行时机：

• 导入命名导出需用大括号，名字必须一致（或用 as 重命名）：

import { add, VERSION as ver } from './utils.js';
console.log(add(2, 3), ver); // 5, '1.0.0'

登录后复制

• 导入默认导出不用大括号，名字可任意：

import MyButton from './Button.js';
// 或
import Button from './Button.js';

登录后复制

• 混合导入支持同时引入默认 + 命名项：

import Button, { add, VERSION } from './index.js';

登录后复制

• 仅执行模块（不导入任何值）适用于副作用逻辑，如全局样式注入、polyfill 加载：

import './polyfills.js';
import 'normalize.css';

登录后复制

模块组织建议：清晰、可维护、易协作

实际项目中，模块结构不是越细越好，而是围绕功能边界和复用意图来设计：

标签： css vue react javascript java js node.js node 浏览器 工具 作用域