在开发过程中，我们可能会不自觉地使用一些已经被标记为废弃的 JavaScript API。这些 API 由于存在兼容性问题、安全风险或有更好的替代方案，已经被现代浏览器和标准所淘汰。

为了确保代码的兼容性、安全性和可维护性，我们需要尽快排查并替换这些废弃的 API。

以下是六个常见的废弃 API 及其替代方法，希望能帮助你快速更新代码。

String.prototype.substr()

String.prototype.substr() 方法可以从一个字符串中提取指定长度的子字符串。

不过，这个方法已经被标记为遗留特性，主要是因为它和其他字符串提取方法（如 substring 和 slice）的行为不一致，容易让人混淆。

替代方法：

• 使用 String.prototype.substring() 方法。它接受两个参数，分别是子字符串的起始索引和结束索引。例如：

const str = "Hello, world!";
console.log(str.substring(7, 12)); // 输出 "world"

• 或者使用 String.prototype.slice() 方法。它和 substring 类似，但可以接受负数索引，从字符串的末尾开始计数。例如：

const str = "Hello, world!";
console.log(str.slice(7, 12)); // 输出 "world"
console.log(str.slice(-6, -1)); // 输出 "world"

这两个方法都比 substr 更灵活，也更符合现代 JavaScript 的规范。

document.execCommand()

document.execCommand() 曾经被广泛用于实现富文本编辑功能，比如复制、粘贴、加粗文字等。

但这个 API 存在很大的兼容性问题，不同浏览器的表现都不一样，而且很容易引发安全问题，比如被恶意利用导致 XSS 攻击。

现在，它已经被大多数浏览器标记为废弃，不再推荐使用。

替代方法：

• 如果你需要实现复制功能，可以使用 navigator.clipboard.writeText()。这是一个更安全、更现代的 API，能够异步地将文本复制到剪贴板。例如：

async function copyText(text) {
    try {
        await navigator.clipboard.writeText(text);
        console.log("文本已复制到剪贴板");
    } catch (err) {
        console.error("复制失败：", err);
    }
}

• 对于富文本编辑，建议使用一些现代的编辑器库，比如 Quill、Slate.js 或 Draft.js。这些库提供了更强大、更安全的编辑功能，而且能够很好地兼容各种浏览器。

window.event

在旧的 IE 浏览器中，window.event 被用来访问全局的事件对象。

但这种用法在现代浏览器中已经不再被支持，因为它不符合 W3C 的标准。依赖 window.event 的代码在非 IE 浏览器或严格模式下可能会出现错误。

替代方法：

在现代 JavaScript 中，事件对象会作为第一个参数传递给事件处理函数。所以，你应该直接使用这个参数来获取事件对象。例如：

document.getElementById("myButton").addEventListener("click", function(event) {
    console.log(event);
});

这样，无论在什么浏览器中，都能正确地获取到事件对象，避免了兼容性问题。

Event.keyCode, Event.which, Event.charCode

Event.keyCode、Event.which 和 Event.charCode 这些属性曾经被用来获取键盘事件中按下的键。

然而，它们的值在不同浏览器、不同操作系统甚至不同键盘布局下都不一致，这给开发者带来了很大的困扰。

替代方法：

• 使用 Event.key 属性。它会返回一个表示按键物理值的字符串，比如 "a"、"Enter"、"ArrowUp" 等。这个属性更直观，也更容易理解和使用。例如：

document.addEventListener("keydown", function(event) {
    console.log(event.key);
});

• 如果你需要获取按键的代码，可以使用 Event.code 属性。它返回的是一个表示物理按键代码的字符串，比如 "KeyA->65"、"Enter->13"、"ArrowUp->38" 等，不受键盘布局的影响。例如：

document.addEventListener("keydown", function(event) {
    console.log(event.code);
});

这两个属性都能很好地替代 keyCode、which 和 charCode，并且具有更好的兼容性和国际化支持。

Performance.timing

Performance.timing 提供了页面加载过程中的一些时间戳信息，比如导航开始时间、DNS 查询时间、TCP 连接时间等。

但随着 Web 性能测量技术的发展，这个 API 已经被新的 PerformanceNavigationTiming 接口所取代。

替代方法：

使用 performance.getEntriesByType('navigation') 方法来获取页面导航性能信息。这个方法返回一个包含 PerformanceNavigationTiming 对象的数组，你可以从中获取更详细、更准确的性能数据。例如：

const navigationEntries = performance.getEntriesByType('navigation');
if (navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];
    console.log(`导航开始时间：${navigationEntry.startTime}`);
    console.log(`DNS 查询耗时：${navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart}`);
    console.log(`TCP 连接耗时：${navigationEntry.connectEnd - navigationEntry.connectStart}`);
    console.log(`请求耗时：${navigationEntry.responseEnd - navigationEntry.requestStart}`);
    console.log(`DOMContentLoaded 事件耗时：${navigationEntry.domContentLoadedEventEnd - navigationEntry.domContentLoadedEventStart}`);
    console.log(`页面加载总耗时：${navigationEntry.loadEventEnd - navigationEntry.startTime}`);
}

PerformanceNavigationTiming 接口不仅提供了更高精度的时间戳，而且和其他性能测量 API 保持了一致性，更适合现代 Web 性能优化的需求。

document.registerElement

document.registerElement 是一个用于注册自定义元素的旧 API。

它已经被废弃，现代浏览器推荐使用 customElements.define 来定义自定义元素。

替代方法：

使用 customElements.define 来定义自定义元素。这个方法更符合现代 Web 标准，并且得到了更好的浏览器支持。例如：

// 定义一个自定义元素
class MyElement extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `<p>Hello, I'm a custom element!</p>`;
    }
}

// 使用 customElements.define 注册自定义元素
customElements.define('my-element', MyElement);

// 使用自定义元素
document.body.innerHTML = `<my-element></my-element>`;

customElements.define 提供了更灵活的自定义元素定义方式，并且能够更好地与现代 Web 组件技术（如 Shadow DOM）集成。

以上就是六个已经被废弃的 JavaScript API 及其替代方法。

如果你的代码中还在使用这些废弃的 API，建议尽快进行排查和替换。

这不仅能提高代码的兼容性和安全性，还能让你的代码更加符合现代 JavaScript 的开发规范。