源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

ECMAScript 概述

2026/04/10
2
0

引言

ES6（ECMAScript 2015）是 JavaScript 语言的里程碑式版本，它新增了 let/const、箭头函数、类、Promise、解构赋值、模块化 等核心特性，彻底补齐了 JS 在大型项目开发中的短板。 其中 ES6 模块化 是 JavaScript 官方标准化的模块化方案，统一了前后端模块化规范，取代了 AMD、CMD、CommonJS 等碎片化方案，成为现代前端开发的标配。

ES 与 JS

  • ECMAScript：是由 Ecma International 制定的脚本语言标准，规定了语法、API、模块化等核心规则

  • JavaScript：是 ECMAScript 标准的具体实现（浏览器 + Node.js 环境） 简单来说：ECMAScript 是标准，JavaScript 是语言本身，二者是规范与实现的关系。

发展历程

JavaScript 标准历经多年迭代，核心版本如下：

  • ES1 (1997)：语言初版，定义基础语法与对象模型

  • ES3 (1999)：新增正则表达式、异常处理、数组方法，奠定 JS 基础

  • ES5 (2009)：新增严格模式、Array 方法、JSON 对象，广泛兼容所有浏览器

  • ES6 (2015)：重大更新，新增模块化、类、箭头函数、Promise 等核心特性

  • ES2016 ~ ES2025：持续迭代，新增异步函数、BigInt、可选链等实用特性

补充：ES4 因设计过于激进被废弃，这是 JS 发展史上唯一跳过的版本。

前端模块化规范演进

在 ES6 模块化标准化之前，前端社区诞生了多种模块化方案，解决不同环境的代码拆分问题：

AMD 异步模块规范

  • 全称：Asynchronous Module Definition（异步模块定义）

  • 适用环境：浏览器端（异步加载，不阻塞页面渲染）

  • 核心思想：依赖前置，提前加载

  • 代表实现：RequireJS

  • 特点：适合早期浏览器环境，目前已被淘汰

CMD 同步模块规范

  • 全称：Common Module Definition（通用模块定义）

  • 适用环境：浏览器端

  • 核心思想：依赖就近，按需加载

  • 代表实现：SeaJS（国内团队推出）

  • 特点：用法贴近 CommonJS，仅在国内小范围使用

CommonJS 规范

  • 适用环境：Node.js 服务端

  • 核心语法：require() 导入、module.exports 导出

  • 加载方式：同步加载（服务端读取本地文件，无性能问题）

  • 地位：Node.js 默认模块化方案，是前端工程化的基石

ES6 Module 规范

  • 全称：ECMAScript 6 Module

  • 适用环境：浏览器 + Node.js 全环境支持

  • 地位：JavaScript 官方标准化模块化方案，替代所有旧规范

  • 核心语法：import 导入、export 导出

ES6 模块化语法

ES6 模块化是现代开发的必用技能，支持命名导出和默认导出两种方式：

导出模块成员

// 方式1：命名导出（导出多个成员）
export const name = "ES6 Module";
export const sayHi = () => "Hello";

// 方式2：默认导出（一个模块仅能有1个默认导出）
const utils = {
  format: () => {}
};
export default utils;

导入模块成员

// 导入命名导出成员
import { name, sayHi } from './module.js';

// 导入默认导出成员（可自定义名称）
import utils from './module.js';

// 混合导入
import utils, { name } from './module.js';

ES6 模块特性

  1. 静态化：导入导出语法必须写在顶层，编译时确定依赖关系

  2. 严格模式：默认开启严格模式（use strict）

  3. 独立作用域：每个模块拥有独立作用域，无全局污染

  4. 全环境支持：现代浏览器、Node.js 14+ 版本原生支持

ES6 与 CommonJS

结合你之前学习的 Node.js 模块化，我们做全面对比：

相同点

  • 均实现模块化开发，支持代码封装、复用、隔离

  • 均解决全局变量污染问题

  • 均支持模块之间的相互依赖

区别

对比维度

ES6 Module

CommonJS

运行环境

浏览器 + Node.js 全环境

仅 Node.js 服务端

加载时机

编译时加载（静态）

运行时加载（动态）

导入导出

import / export

require() / module.exports

值引用

导出引用，原模块变化，导入值同步更新

导出值拷贝，缓存后不再变化

顶层 this

指向 undefined

指向当前模块对象

扩展名

浏览器中必须写 .js，Node.js 可省略

可自动补全扩展名

补充说明

选择建议

  1. Node.js 项目：兼容 CommonJS，新项目推荐优先使用 ES6 Module

  2. 前端浏览器项目：唯一选择 ES6 Module（配合 Webpack/Vite 构建）

  3. 历史方案（AMD/CMD）：仅用于维护老项目，新项目无需学习

启用 ES6 模块

Node.js 默认使用 CommonJS，如需切换为 ES6 Module，只需在 package.json 中添加：

{
  "type": "module"
}

总结

  1. ES6 是 JS 现代化的核心标准，ES6 模块化是官方统一方案

  2. 旧规范：AMD（浏览器异步）、CMD（浏览器同步）、CommonJS（Node.js）

  3. ES6 模块化语法：export 导出、import 导入，支持命名 / 默认两种方式

  4. ES6 模块是编译时静态加载，CommonJS 是运行时动态加载，这是二者最核心的差异