JavaScript模块化以ES6 import/export为核心,支持命名导出、默认导出及混合导入;具静态性、单例性、实时绑定等特性,与CommonJS的值拷贝和动态加载有本质区别。

JavaScript 的模块化开发主要通过 ES6 的 import 和 export 语法实现,它原生支持静态分析、编译时检查和树摇优化,是现代前端开发的标准方式。
ES6 模块的基本导出方式
一个模块文件(如 math.js)可以使用多种方式导出变量、函数或类:
- 命名导出(named export):可导出多个,必须用原名导入,支持重命名
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator { /* ... */ }- 默认导出(default export):每个模块最多一个,导入时可自定义名称,更灵活
export default function debounce(fn, delay) { /* ... */ }ES6 模块的对应导入方式
导入需与导出方式匹配,且路径必须是字符串字面量(不能拼接):
- 导入命名导出:用大括号
{},可重命名(as)
import { PI, add } from './math.js';
import { add as sum } from './math.js'; // 重命名- 导入默认导出:不用大括号,可任意命名
import debounce from './utils.js'; import myDebounce from './utils.js'; // 名字随意
- 混合导入:同时引入默认和命名导出
import debounce, { PI, add } from './math.js'; // 默认在前,命名在后- 整体导入(namespace import):把所有命名导出挂载为对象属性
import * as math from './math.js'; console.log(math.PI, math.add(2, 3));
常见注意事项和限制
ES6 模块是静态的、顶层的、单例的,这些特性决定了它的行为边界:
PHPCMS V9采用OOP(面向对象)方式进行基础运行框架搭建。模块化开发方式做为功能开发形式。框架易于功能扩展,代码维护,优秀的二次开发能力,可满足所有网站的应用需求。 PHPCMS V9企业黄页主要特色1、模型自定义,支持模型添加、修改、删除、导出、导入功能;2、模型字段自定义,支持模型字段添加、修改、删除、禁用操作;3、分类无限添加,支持批量多级添加;4、新增附件字段功能,实现相同模型,不
立即学习“Java免费学习笔记(深入)”;
- 导入/导出语句只能出现在模块顶层,不能在条件、函数或循环中
- 模块路径必须是相对(
./或../)或绝对(以/开头)URL,不支持动态字符串 - 模块脚本需通过
加载,否则会报错 - 浏览器中模块默认启用严格模式,且有独立作用域(不污染全局)
- 重复导入同一模块不会重复执行,模块代码只执行一次(单例)
与 CommonJS 的关键区别
ES6 模块不是对象,而是绑定关系(live binding):
- 导出的是绑定,不是值的拷贝。如果导出的变量后续被修改,导入方能感知到更新
- CommonJS(
module.exports/require)导出的是值的快照,修改原始变量不影响已导入值 - ES6 模块支持循环依赖,但需注意初始化时机;CommonJS 在循环依赖中返回已执行部分的对象










