🚨 2025 最該淘汰的 10 個前端 API!

image

1. 為什麼要“告別”?

  • 規範已打 🚩 Deprecated:瀏覽器隨時下架,埋得越深爆得越慘
  • 性能/體積/安全:舊 API 常阻塞執行緒、無權限模型、包體積爆炸
  • 面試必問:能講清“為什麼不用 + 怎麼遷”是高分項

以下 10 組案例,95% 的代碼庫還能搜到,但官方文檔早已不建議使用


2. 一圖速覽

# 過時 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%

3. 逐個詳解 & 最小遷移代碼

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>

⑨ Moment.js —— 66 KB 的“日期巨頭”

問題:2020 起官方進入維護模式,不再加新功能;包體積大
替代

  • date-fns(tree-shaking,按需引)
  • luxon(時區友好)
  • Temporal(原生草案,2025 已 Chrome 95+ 實驗旗)
// Moment
moment().format('YYYY-MM-DD');

// date-fns
import { format } from 'date-fns';
format(new Date(), 'yyyy-MM-dd');

⑩ jQuery —— “百萬網站”歷史債

現狀:BuiltWith 統計全球 Top 1M 網站 78% 仍引用,但新立項使用率 < 6%(State of JS 2024)
替代

  • DOM:querySelector + addEventListener
  • Ajax:fetch
  • 動畫:Web Animations API / CSS transition
  • 鍊式:可選鍊 ?. + 空值合併 ??
// jQuery
$('#btn').click(() => $.get('/api', console.log));

// 原生
document.querySelector('#btn')
        .addEventListener('click', () => fetch('/api').then(r => r.json()).then(console.log));

4. 老專案如何“無痛”批量掃描

  1. ESLint 官方插件
    npm i -D eslint-plugin-deprecation
    一鍵標出所有 @deprecated 調用

  2. jscodeshift 腳本
    substrslicekeyCodekey 全專案自動替換

  3. Can I use + Babel 插件
    確認替代 API 的最低瀏覽器版本,再決定要不要兜底


5. 結論 & 行動清單

動作 優先級
新代碼直接不用左側 API 🔴 必須
舊代碼lint 報錯codemod回歸測試 🟡 1 個 Sprint
剪貼板、網路、日期優先遷,ROI 最高 🟢 本周

把這篇文章丟進團隊 Wiki,下次 Code Review 再看到 execCommandMoment.js,就能有理有據地拒絕了。


6. 參考資料

: 51CTO《2025 年該淘汰的五個 JavaScript 庫》2024-12
: 稀土掘金《2025 年該淘汰的 5 個 JavaScript 庫》2024-12
: CSDN《這些過時的前端技術請不要再繼續學了!》2023-10
: 21CTO《2025 年你應該告別的 5 個 JavaScript 庫》2024-12
: 知乎專欄《2024 總結下前端現狀!》2025-02

如果對你有幫助,點個「讚」再走呗~


原文出處:https://juejin.cn/post/7547207040532971559


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝10   💬8   ❤️12
427
🥈
我愛JS
📝1   💬6   ❤️4
90
🥉
酷豪
📝1   ❤️1
52
#4
AppleLily
📝1   💬4   ❤️1
41
#5
💬3  
10
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次