第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

自定義元素:monkeypatch 斷開連接回調(diào)

自定義元素:monkeypatch 斷開連接回調(diào)

蠱毒傳說(shuō) 2023-03-10 16:46:58
我正在編寫一個(gè) Web 組件增強(qiáng)器函數(shù),當(dāng)元素從 DOM 中刪除時(shí)我需要運(yùn)行一些東西——但我事后知道這一點(diǎn)。我使用了 MutationObserver - 但我的組件在頁(yè)面周圍使用了很多,并且多個(gè)突變觀察器導(dǎo)致了性能問(wèn)題。這是在沒(méi)有 MutationObserver 的情況下執(zhí)行此操作的嘗試: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'這是行不通的。有沒(méi)有辦法“monkeypatch” disconnectedCallback?
查看完整描述

2 回答

?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗(yàn) 獲得超2個(gè)贊

我會(huì)把它分成兩個(gè)解決方案,每個(gè)都更接近特定的用例:

  • 我(仍然,是的,我們討論過(guò))認(rèn)為,如果是您自己的代碼在該組件內(nèi)創(chuàng)建hiddenElement- 最好在組件內(nèi)進(jìn)行整個(gè)管理,而不是從外部豐富/擴(kuò)展它(是的,即使你對(duì)整個(gè)系統(tǒng)中的幾個(gè)組件重復(fù)了這種模式)

  • 如果一個(gè)人絕對(duì)想從外部增強(qiáng)組件(比如一個(gè)人不擁有該類,或者遇到多重繼承問(wèn)題) - 最好采用標(biāo)準(zhǔn)的事件驅(qū)動(dòng)方法 - 應(yīng)該調(diào)度一個(gè)事件并且監(jiān)聽器應(yīng)該附加disconnectedCallbackdisconnect它- 否則這個(gè)解決方案是不可擴(kuò)展的/對(duì)擴(kuò)展開放(想想另一個(gè)隊(duì)友需要在斷開連接時(shí)添加更多邏輯的情況,與第一個(gè)偵聽器中的邏輯分離的邏輯)


查看完整回答
反對(duì) 回復(fù) 2023-03-10
?
拉莫斯之舞

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊

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


這個(gè)想法是在增強(qiáng)器函數(shù)內(nèi)部創(chuàng)建一個(gè)組件,將其附加到 Web 組件并從模擬組件內(nèi)部運(yùn)行清理函數(shù)。


這是一個(gè)例子:


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);

}


這樣,當(dāng)您的自定義元素被移除時(shí),您可以運(yùn)行任何您想要的清理,而無(wú)需創(chuàng)建多個(gè) MutationObservers。


查看完整回答
反對(duì) 回復(fù) 2023-03-10
  • 2 回答
  • 0 關(guān)注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)