javascript - 在 disconnectedCallback 中从 DOM 中删除自定义元素的所有引用
问题描述
我有一个提供 API 方法的自定义元素sayHello
。disconnectedCallback
如果元素从 DOM 中删除,我需要“销毁”对自定义元素的所有引用。我怎样才能做到这一点?
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
函数 using对它有一个闭包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 - 我正在尝试根据按钮值从 oracle 中提取一个值
- javascript - JavaScript SpeechSynthesisUtterance 正确说出数字
- python - 无法使用 matplotlib.pyplot 制作饼图或条形图
- php - Laravel 自动注入是否仅用于控制器功能?
- java - Spring通用存储库自动装配失败
- maven - 任何人都可以为 xmlparserv2.jar 提供 Maven 依赖项吗
- python - Gogs 钩子的秘密(无法上 python3)
- java - 如何使用 Java 中的 SSL 套接字确认握手已完成?
- python - TypeError:下一个不支持的可调用(
) - java - 有没有办法了解 spark 如何加载类路径以及以何种顺序?