首頁猿問自定義元素：monkeypatch...

自定義元素：monkeypatch 斷開連接回調

JavaScript

蠱毒傳說 2023-03-10 16:46:58

我正在編寫一個 Web 組件增強器函數，當元素從 DOM 中刪除時我需要運行一些東西——但我事后知道這一點。我使用了 MutationObserver - 但我的組件在頁面周圍使用了很多，并且多個突變觀察器導致了性能問題。這是在沒有 MutationObserver 的情況下執行此操作的嘗試：class TestComponent extends HTMLElement { disconnectedCallback() { console.log('CB'); }}window.customElements.define('test-component', TestComponent);function enrichComponent(component) { const originalDisconnectedCallback = component.disconnectedCallback; component.disconnectedCallback = function() { originalDisconnectedCallback(); console.log('CB1'); }}const component = document.createElement('test-component');enhancer(component);document.body.appendChild(component);component.remove(); // logs 'CB' but no 'CB1'這是行不通的。有沒有辦法“monkeypatch” disconnectedCallback？

查看完整描述

2 回答

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

我會把它分成兩個解決方案，每個都更接近特定的用例：

我（仍然，是的，我們討論過）認為，如果是您自己的代碼在該組件內創建hiddenElement- 最好在組件內進行整個管理，而不是從外部豐富/擴展它（是的，即使你對整個系統中的幾個組件重復了這種模式）
如果一個人絕對想從外部增強組件（比如一個人不擁有該類，或者遇到多重繼承問題） - 最好采用標準的事件驅動方法 - 應該調度一個事件并且監聽器應該附加disconnectedCallback到disconnect它- 否則這個解決方案是不可擴展的/對擴展開放（想想另一個隊友需要在斷開連接時添加更多邏輯的情況，與第一個偵聽器中的邏輯分離的邏輯）

反對回復 2023-03-10

拉莫斯之舞

TA貢獻1820條經驗獲得超10個贊

我設法想出了一個有效的“黑客”，并且比突變觀察者成本更低。

這個想法是在增強器函數內部創建一個組件，將其附加到 Web 組件并從模擬組件內部運行清理函數。

這是一個例子：

class FormAssociationDisconnectionComponent extends HTMLElement {

disconnectedCallback() {

this.dispatchEvent(new Event('disconnected'));

}

window.customElements.define('form-association-disconnection', FormAssociationDisconnectionComponent);

function enrichComponent(component) {

// ... setup a form and a hidden input we need to cleanup

const removeListenerElement = document.createElement('form-association-disconnection');

removeListenerElement.addEventListener('disconnected', () => {

hiddenInput.remove();

hostingForm.removeEventListener('reset', resetFormHandler);

});

inputElement.appendChild(removeListenerElement);

}

這樣，當您的自定義元素被移除時，您可以運行任何您想要的清理，而無需創建多個 MutationObservers。

反對回復 2023-03-10

2 回答
0 關注
127 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

自定義元素：monkeypatch 斷開連接回調

自定義元素：monkeypatch 斷開連接回調

2 回答

添加回答