在 Blazor 中實作 IDisposable：釋放 JavaScript 資源的重要性

| .NET | 3 Reads

Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license. If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1163

在使用 Blazor 開發互動式應用時，常常會需要與 JavaScript 互通（interop）。這些互操作行為可能會註冊事件、建立全域物件或產生其他瀏覽器端資源。如果不妥善清理這些資源，就可能導致 記憶體洩漏（Memory Leak）、事件重複綁定 或 性能下降 等問題。

本文將探討如何正確地實作 IDisposable，以及在 Dispose() 中呼叫 JSRuntime.InvokeVoidAsync("sidebarInterop.dispose") 的意義。

📌 為何要實作 IDisposable？

在 Blazor Server 或 Blazor WebAssembly 中，元件（Component）有自己的生命週期。當元件不再顯示（例如使用者導覽至其他頁面），元件會被銷毀。如果元件綁定了 JavaScript 事件（如 window.addEventListener）而未釋放，這些事件將永遠存在於瀏覽器中，即使元件已不存在。

透過實作 IDisposable 介面，我們可以在元件銷毀時，自動清除這些資源。

✅ 範例程式碼

@implements IDisposable

@inject IJSRuntime JSRuntime

...

public void Dispose()
{
    JSRuntime.InvokeVoidAsync("sidebarInterop.dispose");
}

🧠 sidebarInterop.dispose 是什麼？

這是一個你自己定義的 JavaScript 函數，通常用於取消事件綁定或清除 DOM 操作，例如：

window.sidebarInterop = {
    initialize: function () {
        window.addEventListener('resize', sidebarResizeHandler);
    },
    dispose: function () {
        window.removeEventListener('resize', sidebarResizeHandler);
    }
};

此範例中，dispose() 將註冊的 resize 事件移除，避免重複綁定。

🛑 不清理的後果

若沒有適時移除 JS 資源，可能出現以下情況：

  1. 多次事件觸發：每次打開元件都註冊一次事件，最終觸發數量倍增。

  2. 記憶體洩漏：註冊的事件持有物件參考，導致垃圾回收無法清除元件。

  3. 應用崩潰：某些 UI 框架可能在資源堆積後無法正常渲染。

🔍 建議實踐

  • 若你的元件中有使用 JavaScript Interop 建立事件、動畫、物件等，請務必實作 IDisposable。

  • 確保 JavaScript 中提供了 dispose() 或等效的釋放方法。

  • 測試元件銷毀後是否有殘留效應，檢查事件綁定與記憶體占用。

✍️ 小結

在 Blazor 中，Dispose() 方法不僅是一個「善後」機制，更是與 JavaScript 協同作業時確保資源釋放與效能維持的關鍵步驟。不要忽略這一行 JSRuntime.InvokeVoidAsync("sidebarInterop.dispose")，它可能是你的應用穩定運作的基石。

This article was last edited at