我将一些功能附加到DOM元素,并希望能够在从DOM中删除元素时清除所有引用,以便可以对其进行垃圾回收,
我最初检测元素移除的版本是这样的:
var onremove = function(element, callback) {
var destroy = function() {
callback();
element.removeEventListener('DOMNodeRemovedFromDocument', destroy);
};
element.addEventListener('DOMNodeRemovedFromDocument', destroy);
};
然后我读到,为了支持MutationObserver,mutation events被抛弃了。所以我试着移植我的代码。这是我想出来的:
var isDescendant = function(desc, root) {
return !!desc && (desc === root || isDecendant(desc.parentNode, root));
};
var onremove = function(element, callback) {
var observer = new MutationObserver(function(mutations) {
_.forEach(mutations, function(mutation) {
_.forEach(mutation.removedNodes, function(removed) {
if (isDescendant(element, removed)) {
callback();
// allow garbage collection
observer.disconnect();
observer = undefined;
}
});
});
});
observer.observe(document, {
childList: true,
subtree: true
});
};
这在我看来过于复杂(而且效率不是很高)。是我漏掉了什么,还是这真的应该是这样的呢?
发布于 2015-09-23 04:37:06
实际上..。是的,有一个更优雅的解决方案:)。
您添加的内容看起来很好,而且似乎得到了很好的优化。但是,有一种更简单的方法可以知道节点是否附加到DOM。
function onRemove(element, onDetachCallback) {
const observer = new MutationObserver(function () {
function isDetached(el) {
if (el.parentNode === document) {
return false;
} else if (el.parentNode === null) {
return true;
} else {
return isDetached(el.parentNode);
}
}
if (isDetached(element)) {
observer.disconnect();
onDetachCallback();
}
})
observer.observe(document, {
childList: true,
subtree: true
});
}
https://stackoverflow.com/questions/31798816
复制相似问题