DOMNodeRemovedFromDocument 的简单 MutationObserver 版本

我将一些功能附加到 DOM 元素，并希望能够在从 DOM 中删除该元素时清除所有引用，以便可以对其进行垃圾收集，

我检测元素删除的初始版本是这样的：

var onremove = function(element, callback) {
    var destroy = function() {
        callback();
        element.removeEventListener('DOMNodeRemovedFromDocument', destroy);
     };
     element.addEventListener('DOMNodeRemovedFromDocument', destroy);
};

然后我读到了突变事件 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events已被弃用，有利于变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。所以我尝试移植我的代码。这就是我想出的：

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

这对我来说看起来过于复杂（而且效率不是很高）。我错过了什么还是这真的是应该的工作方式？

实际上......是的，有一个更优雅的解决方案:)。

您添加的内容看起来不错并且似乎经过了很好的优化。然而，有一种更简单的方法可以知道节点是否附加到 DOM。

function onRemove(element, onDetachCallback) {
    const observer = new MutationObserver(function () {
        if (!document.contains(element)) {
            observer.disconnect();
            onDetachCallback();
        }
    })

    observer.observe(document, {
         childList: true,
         subtree: true
    });
}