2025 年应该停止在 JavaScript 中使用的做法

Dec 12, 2025 · 2 min read

JavaScript 发展迅速。三年前看起来很现代的代码模式,现在却会带来不必要的字节开销、忽视平台改进或依赖已弃用的 API。如果你在 2025 年构建生产环境的 Web 应用,以下是应该避免的 JavaScript 反模式——以及应该采用的替代方案。

核心要点

应使用现代替代方案替换已弃用的特性,如 with 语句、__proto__ 和 String.prototype.substr。
jQuery、Moment.js 和 Lodash 等传统库通常可以用原生浏览器 API 和 ES2023–ES2025 特性替代。
现代 CSS 现在可以处理许多以前需要 JavaScript 的任务,包括容器查询、:has() 选择器和滚动链接动画。
原生 ESM 和 Vite 等轻量级打包工具已使 CommonJS 和 RequireJS 在新的前端项目中过时。

停止使用已弃用的语言特性

一些 JavaScript 特性已经被弃用或取代多年,但由于复制粘贴和习惯,它们仍然存在于代码库中。

从你的代码中删除这些:

with 语句 — 自 ES5 以来在严格模式下被禁用。它们会造成作用域模糊并破坏优化。
__proto__ — 使用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 代替。
String.prototype.substr — 已弃用。使用 slice() 或 substring()。
传统的 RegExp 静态属性,如 RegExp.$1 — 这些是非标准的,在不同引擎中不可靠。

这些不是边缘情况。代码检查工具标记它们是有充分理由的。现代 JavaScript 模式假设你已经放弃了这些做法。

停止默认使用传统库

jQuery、Moment.js、Lodash 和 RequireJS 解决了实际问题——在 2015 年。如今,平台原生支持涵盖了它们的大部分用例。

应该这样做:

DOM 操作 — querySelector、querySelectorAll 和现代 DOM API 可以处理 jQuery 曾经做的事情。
日期处理 — Temporal API 即将到来。在完全支持之前,使用 date-fns 或原生 Intl.DateTimeFormat。
工具函数 — ES2023–ES2025 特性,如 Object.groupBy()、新的 Set 方法(.union()、.intersection())和迭代器辅助方法(迭代器上的 .map()、.filter())可以替代大多数 Lodash 导入。
模块加载 — 原生 ESM 和 import() 使 RequireJS 和 AMD 过时。

为浏览器免费提供的功能引入 30KB 的库是 2025 年应该停止的前端错误。

停止忽视 ES2023–ES2025 特性

语言已经有了显著的发展。以下特性已经稳定或接近稳定:

Object.groupBy() 和 Map.groupBy() — 无需外部库即可对数组进行分组。
迭代器辅助方法 — 直接在迭代器上链式调用 .map()、.filter()、.take()。
新的 Set 方法 — .union()、.intersection()、.difference()、.isSubsetOf()。
RegExp.escape() — 安全地转义字符串用于正则表达式模式。
导入属性和 JSON 模块 — import data from './config.json' with { type: 'json' }。
顶层 await — 在模块中使用它,无需将所有内容包装在异步 IIFE 中。

查看 caniuse.com 和你的目标浏览器,但不要默认为两年前就已发布的特性使用 polyfill。

停止使用 JavaScript 处理 CSS 现在能处理的事情

现代 CSS 已经吸收了曾经需要 JavaScript 的功能。为这些功能使用 JS 会造成不必要的复杂性并损害性能。

让 CSS 处理:

容器查询 — 无需 ResizeObserver 技巧的响应式组件。
:has() 选择器 — 无需 DOM 遍历的父元素选择。
滚动链接动画 — animation-timeline: scroll() 替代滚动事件监听器。
视图过渡 — 原生页面过渡效果。

每删除一个滚动监听器,就为主线程带来一次性能提升。

Mutation Events(DOMSubtreeModified、DOMNodeInserted)已被弃用且性能不佳。使用 MutationObserver 代替——它已经稳定了十多年。

第三方 cookie 在跟踪和跨站点认证流程中实际上已经失效。Chrome 的弃用时间表有所调整,但 Safari 和 Firefox 多年前就已阻止它们。使用第一方 cookie、令牌或联合身份构建身份验证流程。不要基于在一半用户浏览器中会失效的假设来架构系统。

停止使用 CommonJS 启动新项目

如果你在 2025 年编写浏览器代码并使用 require() 或复杂的 webpack 配置,请暂停。原生 ESM 在所有重要的地方都能工作。像 Vite 和 esbuild 这样的轻量级打包工具可以用最少的配置处理剩余的边缘情况。

CommonJS 在针对旧环境的 Node.js 库中仍有其地位。对于新的前端代码,它是遗留包袱。

结论

2025 年的 JavaScript 最佳实践不是追逐趋势——而是认识到平台何时已经赶上了你的依赖项。你删除的每个已弃用特性、放弃的每个不必要的库以及采用的每个 CSS 原生解决方案都会使你的代码更小、更快、更易于维护。

审查你当前的项目。检查你的导入。质疑那个工具函数是否需要一个库,还是只需要一个你还没学过的原生方法。现代 JavaScript 模式已经在这里——你只需要使用它们。

常见问题

是的,但要谨慎进行。现代浏览器支持 querySelector、fetch 和其他替代 jQuery 核心功能的 API。对于现有项目,首先审查你的 jQuery 使用情况,并逐步替换调用。新项目应该完全避免使用 jQuery,因为原生替代方案现在得到了良好支持且性能更好。

Temporal API 在 TC39 流程中处于 Stage 3 阶段,在某些浏览器中可以通过标志启用。预计很快就会有完整的跨浏览器支持,但对于今天的生产代码,请使用 date-fns 或原生 Intl.DateTimeFormat。在不使用 polyfill 采用 Temporal 之前,请监控 caniuse.com 获取更新。

对于大多数用例,不应该。原生 JavaScript 现在包括 Object.groupBy、新的 Set 方法和迭代器辅助方法,涵盖了常见的 Lodash 函数。但是,Lodash 对于深度克隆、复杂对象操作或针对旧环境时仍然有用。只导入你需要的特定函数,而不是整个库。

首先在 package.json 中将 type 设置为 module。将 require 语句替换为 import 语法,将 module.exports 替换为 export。如果需要,将文件扩展名更新为 .mjs,或相应地配置你的打包工具。对于前端项目,Vite 和 esbuild 等工具可以显著简化这一过渡。

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.