🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 09月10日

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

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. 老專案如何“無痛”批量掃描

ESLint 官方插件
npm i -D eslint-plugin-deprecation
一鍵標出所有 @deprecated 調用
jscodeshift 腳本
把 substr→slice、keyCode→key 全專案自動替換
Can I use + Babel 插件
確認替代 API 的最低瀏覽器版本，再決定要不要兜底

5. 結論 & 行動清單

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

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

6. 參考資料

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