JavaScript 开发者必看！这 10 个已废弃 API 你代码里还有吗？

JavaScript 作为一门不断发展的语言，其 API 也在持续进化。新的、更安全、更高效的 API 不断涌现，而一些旧的 API 则因为各种原因（如安全问题、性能瓶颈、设计缺陷或有了更好的替代品）被标记为“废弃”（Deprecated）。继续使用这些废弃的 API 可能会导致兼容性问题、安全漏洞，或者让我们的代码难以维护。

1. document.execCommand()

为什么废弃/不推荐：

document.execCommand()曾是实现富文本编辑（如加粗、斜体、复制、粘贴）的主要方式。然而，它的行为在不同浏览器之间存在显著差异，API 本身也难以扩展和维护。更重要的是，它存在潜在的安全风险（例如，不当使用可能导致 XSS 攻击）。W3C 已明确表示不再推荐使用此 API，并鼓励开发者转向更现代的解决方案。

替代方案：

• Clipboard API (navigator.clipboard): 用于异步复制和粘贴文本或数据，更安全、更现代。
• Selection API: 用于获取和修改用户当前选中的文本或范围。
• 直接操作 DOM: 对于富文本编辑，许多现代编辑器库（如 Quill, Slate.js, Draft.js）或自定义逻辑会直接操作 DOM 来实现所需效果。

// 不推荐
// document.execCommand('copy');

// 推荐 (复制文本)
async function copyTextToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

2. escape() 和 unescape()

为什么废弃：

这两个函数用于 URL 编码和解码，但它们存在严重缺陷：

• 它们不会正确处理非 ASCII 字符（如中文）。
• 它们不会对所有在 URL 中具有特殊意义的字符进行编码（例如 +, /, @）。

替代方案：

• encodeURIComponent() / decodeURIComponent(): 用于编码和解码 URL 的查询字符串参数部分。这是最常用的，因为它会对所有必要的字符进行编码。
• encodeURI() / decodeURI(): 用于编码和解码整个 URI。它们不会对一些 URI 中合法的特殊字符（如 :, /, ;, ?）进行编码。

// 不推荐
// const encoded = escape("你好 world?query=1");
// console.log(encoded); // %u4F60%u597D%20world%3Fquery%3D1 (非 ASCII 字符处理不当)

// 推荐
const queryParam = "你好 world";
const encodedParam = encodeURIComponent(queryParam);
console.log(encodedParam); // %E4%BD%A0%E5%A5%BD%20world

const fullUrl = `https://example.com/search?q=${encodedParam}`;
console.log(fullUrl); // https://example.com/search?q=%E4%BD%A0%E5%A5%BD%20world

3. 同步的 XMLHttpRequest

为什么不推荐：

在 XMLHttpRequest 的open()方法中将第三个参数（async）设置为 false 会发起一个同步请求。这会阻塞 JavaScript 主线程，直到请求完成，导致浏览器界面冻结，用户体验极差。现代 Web 开发强烈推荐使用异步操作。

替代方案：

• 异步 XMLHttpRequest: 默认行为，使用回调函数或 Promise 处理响应。
• fetch API: 更现代、基于 Promise 的 API，提供了更简洁和强大的网络请求方式。

// 极不推荐
// const xhr = new XMLHttpRequest();
// xhr.open('GET', '/api/data', false); // false 表示同步
// xhr.send();
// if (xhr.status === 200) {
//   console.log(xhr.responseText); // 阻塞直到响应
// }

// 推荐 (使用 fetch)
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json(); // 或 .text() 等
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}
fetchData('/api/data');

4. String.prototype.substr()

为什么废弃：

substr()方法从一个指定的起始位置提取指定长度的子字符串。它已被 ECMAScript 标准标记为“legacy feature”（遗留特性），主要是因为其第二个参数（子串长度）与其他字符串提取方法（如 substring 和 slice，它们的第二个参数是结束索引）不一致，容易造成混淆。

替代方案：

• String.prototype.substring(indexStart, indexEnd): 提取 indexStart 到 indexEnd（不包括）之间的字符。
• String.prototype.slice(beginIndex, endIndex): 与 substring 类似，但可以接受负数索引（表示从字符串末尾开始计数）。

const str ="Hello World"
// 不推荐
// console.log(str.substr(6, 5));// "World"
// 推荐
console.log(str.substring(6，11)); // "World" (11 是结束索引+1)
console.log(str.slice(6，11));     // "World"
console.log(str.slice(6));         // "World" (如果省略 endIndex，则到字符串未尾)
console.log(str.slice(-5))         // "World" (从未尾取 5 个字符)

5. Event.keyCode, Event.which, Event.charCode

为什么废弃：

这些属性用于获取键盘事件中按下的键。然而，它们的值在不同浏览器、不同操作系统甚至不同键盘布局下都可能不一致，导致兼容性问题和开发困扰。

替代方案：

• Event.key: 返回一个表示按键物理值的字符串（例如 “a”, “Enter”, “ArrowUp”）。这是最推荐的方式，因为它更直观且具有更好的国际化支持。
• Event.code: 返回一个表示物理按键代码的字符串（例如 “KeyA”, “Enter”, “ArrowUp”），不受键盘布局影响。

document.addEventListener('keydown', (event) => {
    // 不推荐
    //console.log('keyCode:', event.keyCode);
    // console.log('which:', event.which);
    // 推荐
    console.log('Key:', event.key); // "a", "Shift", "Enter"
    console.log('Code:', event.code); // "KeyA", "ShiftLeft", "Enter",

    if(event.key === 'Enter'){
        console.log('Enter key pressed!');
    }
});

6. window.event (全局事件对象)

为什么不推荐：

在旧的 IE 浏览器事件模型中，事件对象是通过全局的 window.event 访问的。现代浏览器遵循 W3C 标准，将事件对象作为第一个参数传递给事件处理函数。依赖全局window.event会导致代码在非 IE 旧版浏览器或严格模式下失效。

替代方案：

• 使用传递给事件处理函数的事件对象。

// 不推荐
//function handleClick(){
//    const target = window.event.target; // 依赖全局 window.event
//    console.log(target.tagName);
// }
// 推荐
function handleClick(event) { // 事件对象作为参数传入
    const target = event.target;
    console.log(target.tagName);
}
document.getElementById('myButton').addEventListener('click', handleClick);

7. String.prototype.trimLeft() 和 String.prototype.trimRight()

为什么废弃：

这两个方法用于移除字符串开头或结尾的空白字符。它们已被 ECMAScript 标准采纳，但名称更改为trimStart()和trimEnd()以获得更好的语义一致性（与padStart()和padEnd()等方法对齐）。虽然旧名称在很多浏览器中仍可作为别名使用，但推荐使用标准名称。

替代方案：

• String.prototype.trimStart()
• String.prototype.trimEnd()

const s = "Hello World    ";
// 旧名称(可能仍工作，但不推荐)
// console.log(`'${s.trimLeft()}'`);
// console.log(`'${fs.trimRight()}'`);

// 推荐
console.log(`'${s.trimStart()}'`); // "'Hello World    '"
console.log(`'${s.trimEnd()}'`)  // "'    Hello World'"

8. Window.showModalDialog()

为什么废弃：

showModalDialog()用于打开一个模态对话框，它会阻塞父窗口的 JavaScript 执行，直到对话框关闭。这种阻塞行为与现代 Web 应用的异步、非阻塞理念相悖，用户体验差，且存在安全风险。主流浏览器已将其移除。

替代方案：

• HTML <dialog>元素: 一个原生的模态对话框元素，可以通过showModal()方法打开。
• JavaScript 库/框架的模态组件: 如 Bootstrap Modals, Material UI Dialogs 等。
• 自定义 CSS 和 JavaScript 实现的模态框: 使用 position: fixed 或 absolute，配合遮罩层。

// 不推荐(已移除)
// window.showModalDialog("modal,html", "dialogWidth:300px; dialogHeight:200px");
// 推荐(使用 <dialog> 元素)
// HTML: <dialog id="myDialog">This is a modal dialog.</dialog>
const dialog = document.getElementById('myDialog');
if (dialog) {
    // dialog.showModal(); // 打开模态对话框
    // dialog.close(); //关闭
}

9. navigator.plugins 和 navigator.mimeTypes

为什么废弃/不推荐：

这两个 API 用于检测浏览器安装的插件（如 Flash Player, Java Applets）。随着 NPAPI 插件技术的淘汰（主要出于安全和性能考虑），这些 API 的实用性已大大降低。现代 Web 技术（如 HTML5, CSS3, WebAssembly）已经取代了大多数插件的功能。

替代方案：

• 通常不需要直接替代。如果需要检测特定功能，应使用特性检测（feature detection）而不是插件检测。例如，检测浏览器是否支持某个视频格式，而不是检测是否有某个视频插件。

10. Performance.timing

为什么废弃：

performance.timing对象提供了页面加载过程中的各种时间戳（如 navigationStart, domContentLoadedEventEnd）。虽然它仍然可用，但已被更精确和更全面的PerformanceNavigationTiming接口所取代。PerformanceNavigationTiming 提供了更高精度的时间戳，并且可以通过performance.getEntriesByType('navigation')获取，这与其他的 Performance API（如 PerformanceResourceTiming）保持一致。

替代方案：

• performance.getEntriesByType('navigation'): 返回一个包含 PerformanceNavigationTiming 对象的数组（通常只有一个元素）。

// 旧方式 (仍可用，但不推荐用于新代码)
// const timing = window.performance.timing;
// console.log(`DOM content loaded: ${timing.domContentLoadedEventEnd - timing.navigationStart}ms`);

// 推荐方式
const navigationEntry = performance.getEntriesByType('navigation')[0];
if (navigationEntry) {
  console.log(`DOM content loaded (new): ${navigationEntry.domContentLoadedEventEnd}ms from navigationStart`);
  // 注意：PerformanceNavigationTiming 的时间戳通常是相对于 navigationStart (time origin) 的，
  // 而不是像 performance.timing 那样是绝对时间戳。
  // navigationEntry.domContentLoadedEventEnd 是一个 DOMHighResTimeStamp。
}