gpt4 book ai didi

javascript - 在 disconnectedCallback 中取消从 DOM 中删除的自定义元素的所有引用

转载 作者:行者123 更新时间:2023-11-29 10:27:38 26 4
gpt4 key购买 nike

我有一个提供 API 方法 sayHello 的自定义元素。如果元素从 DOM 中删除,我需要在 disconnectedCallback 中“销毁”对自定义元素的所有引用。我怎样才能做到这一点?

class RemoveEl extends HTMLButtonElement {
constructor() {
super();
this.type= 'button';
this.addEventListener('click', () => {
this.parentElement.removeChild(this);
})
}

sayHello() {
console.log('hello');
}

disconnectedCallback() {
if (!document.body.contains(this)) {
console.log('removed');
// here I need something like
// this = null;
}
}
}

customElements.define('remove-el', RemoveEl, { extends: 'button' });

var sayHello = document.getElementById('sayHello');
var removeEl = document.getElementById('removeEl');

sayHello.addEventListener('click', () => {
if (removeEl) {
removeEl.sayHello();
}
})
<div>Test:
<button is="remove-el" id="removeEl">Click to remove</button>
<button id="sayHello" type="button">Say Hello</button>
</div>

最佳答案

根据我的理解,只要您在 JavaScript 端持有对元素的引用,垃圾收集器就无法销毁您的元素,即使它已从 DOM 中删除也是如此。您的元素仍然存在,您将能够调用它的方法。

您必须自己管理引用资料。在自定义元素的 disconnectedCallback 中,设置一个属性以将其标记为已删除,例如:this.destroyed = true

然后您可以使用该属性来保护访问,但该元素不会被垃圾回收:

class RemoveEl extends HTMLButtonElement {
constructor() {
super();
this.type= 'button';
this.addEventListener('click', () => {
this.parentElement.removeChild(this);
})
}

sayHello() {
console.log('hello');
}

disconnectedCallback() {
if (!document.body.contains(this)) {
this.destroyed = true;
console.log('removed');
}
}
}

customElements.define('remove-el', RemoveEl, { extends: 'button' });

const sayHello = document.getElementById('sayHello');
const removeEl = document.getElementById('removeEl');

sayHello.addEventListener('click', () => {
if (removeEl && !removeEl.destroyed) {
removeEl.sayHello();
}
})
<div>Test:
<button is="remove-el" id="removeEl">Click to remove</button>
<button id="sayHello" type="button">Say Hello</button>
</div>

或者创建一个引用包装器,仅当内部引用有效时才能在其上应用函数,垃圾收集仍然无法销毁该引用,因为由于 do 使用 el 的函数:

class RemoveEl extends HTMLButtonElement {
constructor() {
super();
this.type= 'button';
this.addEventListener('click', () => {
this.parentElement.removeChild(this);
})
}

sayHello() {
console.log('hello');
}

disconnectedCallback() {
if (!document.body.contains(this)) {
this.destroyed = true;
console.log('removed');
}
}
}

customElements.define('remove-el', RemoveEl, { extends: 'button' });

const ref = el => ({ do: fn => { if (el && !el.destroyed) fn(el); } })

const sayHello = document.getElementById('sayHello');
const removeEl = ref(document.getElementById('removeEl'));

sayHello.addEventListener('click', () => {
removeEl.do(el => el.sayHello());
})
<div>Test:
<button is="remove-el" id="removeEl">Click to remove</button>
<button id="sayHello" type="button">Say Hello</button>
</div>

或者您可以使用代理来管理该引用。只要 destroyed 为 false,就会在对象上调用这些方法,但是一旦代理检测到 destroyed = true,它就会返回默认值属性并销毁它自己对该元素的引用,这有望让垃圾收集器摆脱它。

有点像这样:

class RemoveEl extends HTMLButtonElement {
constructor() {
super();
this.type= 'button';
this.addEventListener('click', () => {
this.parentElement.removeChild(this);
})
}

sayHello() {
console.log('hello');
}

disconnectedCallback() {
if (!document.body.contains(this)) {
this.destroyed = true;
console.log('removed');
}
}
}

customElements.define('remove-el', RemoveEl, { extends: 'button' });

const ref = (el, defaultEl) => {
let destroyed = el.destroyed;
const checkEl = () => {
if (!destroyed && el && el.destroyed) {
destroyed = true;
el = null;
}
return destroyed;
}
return new Proxy({}, {
get: (obj, prop) => {
return checkEl() ? defaultEl[prop] : el[prop];
}
});
}

const sayHello = document.getElementById('sayHello');
const removeEl = ref(document.getElementById('removeEl'), { sayHello: () => console.log('bye') });

sayHello.addEventListener('click', () => {
removeEl.sayHello();
})
<div>Test:
<button is="remove-el" id="removeEl">Click to remove</button>
<button id="sayHello" type="button">Say Hello</button>
</div>

关于javascript - 在 disconnectedCallback 中取消从 DOM 中删除的自定义元素的所有引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54923839/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com