在開發過程中，我們可能會不自覺地使用一些已經被標記為廢棄的 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 的開發規范。