以下 10 組案例,95% 的代碼庫還能搜到,但官方文檔早已不建議使用。
# | 過時 API / 庫 | 典型場景 | 官方替代 | 瀏覽器支持 |
---|---|---|---|---|
1 | document.execCommand |
富文本、複製 | navigator.clipboard |
96% |
2 | 同步 XMLHttpRequest |
匯出 Excel | fetch / axios |
98% |
3 | escape /unescape |
URL 編碼 | encodeURIComponent |
100% |
4 | String.substr |
截後綴 | slice /substring |
100% |
5 | Event.keyCode |
回車 13 | Event.key |
97% |
6 | window.event |
IE 全局事件 | 事件參數 e |
100% |
7 | trimLeft/trimRight |
去空白 | trimStart/trimEnd |
98% |
8 | showModalDialog |
阻塞彈窗 | <dialog> |
已移除 |
9 | Moment.js | 日期格式化 | date-fns / luxon / Temporal |
95% |
10 | jQuery | DOM & Ajax | 原生 ES6+ / React / Vue | 98% |
document.execCommand
—— 富文本 & 剪貼板問題:W3C 停止維護,行為差異大,有 XSS 風險
替代:navigator.clipboard
(基於 Promise + 權限 API)
// 老
document.execCommand('copy');
// 新
await navigator.clipboard.writeText('hello');
低端機兜底:降級回
execCommand
XMLHttpRequest
—— 凍結主執行緒問題:官方強烈不建議;Chrome 已報 Deprecation 警告
替代:fetch
(異步 + Stream)
// 老
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api', false); // 同步
xhr.send();
// 新
const res = await fetch('/api');
const data = await res.json();
escape/unescape
—— 非標準百分號編碼問題:中文變 %u4E2D%u6587
,+/@ 不編碼
替代:encodeURIComponent
escape('中文+abc'); // %u4E2D%u6587+abc
encodeURIComponent('中文+abc'); // %E4%B8%AD%E6%96%87%2Babc
String.substr(start, length)
—— 語義混亂問題:ECMA-262 標為 legacy
替代:slice
(支持負數索引)
const ext = fileName.slice(fileName.lastIndexOf('.'));
Event.keyCode
—— 數值隨佈局變化問題:UI Events spec 已廢棄
替代:Event.key
(可讀字符串)
document.addEventListener('keydown', e => {
if (e.key === 'Enter') { /* 回車 */ }
if (e.key === 'Escape') { /* ESC */ }
});
window.event
(IE 全局事件)問題:非標準,嚴格模式直接報錯
替代:事件參數 e
btn.onclick = (e) => {
console.log(e.target); // 足夠
};
trimLeft/trimRight
—— 命名不統一問題:ECMA 2020 起官方別名改為 trimStart/trimEnd
遷移:
str.trimStart(); // 去左
str.trimEnd(); // 去右
showModalDialog
—— 同步阻塞彈窗現狀:Chrome 43 起已移除
替代:原生 <dialog>
(非阻塞 + 可樣式化)
<dialog id="d">
<p>Hi</p>
<button onclick="d.close()">關閉</button>
</dialog>
<script>d.showModal();</script>
問題:2020 起官方進入維護模式,不再加新功能;包體積大
替代:
// Moment
moment().format('YYYY-MM-DD');
// date-fns
import { format } from 'date-fns';
format(new Date(), 'yyyy-MM-dd');
現狀:BuiltWith 統計全球 Top 1M 網站 78% 仍引用,但新立項使用率 < 6%(State of JS 2024)
替代:
querySelector
+ addEventListener
fetch
transition
?.
+ 空值合併 ??
// jQuery
$('#btn').click(() => $.get('/api', console.log));
// 原生
document.querySelector('#btn')
.addEventListener('click', () => fetch('/api').then(r => r.json()).then(console.log));
ESLint 官方插件
npm i -D eslint-plugin-deprecation
一鍵標出所有 @deprecated
調用
jscodeshift 腳本
把 substr
→slice
、keyCode
→key
全專案自動替換
Can I use + Babel 插件
確認替代 API 的最低瀏覽器版本,再決定要不要兜底
動作 | 優先級 |
---|---|
新代碼直接不用左側 API | 🔴 必須 |
舊代碼lint 報錯→codemod→回歸測試 | 🟡 1 個 Sprint |
剪貼板、網路、日期優先遷,ROI 最高 | 🟢 本周 |
把這篇文章丟進團隊 Wiki,下次 Code Review 再看到 execCommand
或 Moment.js
,就能有理有據地拒絕了。
: 51CTO《2025 年該淘汰的五個 JavaScript 庫》2024-12
: 稀土掘金《2025 年該淘汰的 5 個 JavaScript 庫》2024-12
: CSDN《這些過時的前端技術請不要再繼續學了!》2023-10
: 21CTO《2025 年你應該告別的 5 個 JavaScript 庫》2024-12
: 知乎專欄《2024 總結下前端現狀!》2025-02
如果對你有幫助,點個「讚」再走呗~