простого варианта MutationObserver из DOMNodeRemovedFromDocument

Question

прилагает некоторые функциональные возможности к элементам DOM и хочет, чтобы быть в состоянии очистить все ссылки, когда элемент удаляется из DOM, поэтому он может быть мусором,

Моего первоначального варианта для обнаружения removel элемента был такой:

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

Потом я прочитал, что mutation events были устаревшими в пользу 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 
    }); 
}; 

Это выглядит слишком сложным для меня (и не очень эффективным). Я что-то упустил или это действительно так, как это должно работать?

Answer 1

На самом деле ... да, есть более элегантное решение :).

Что вы добавили, выглядит хорошо и, кажется, хорошо оптимизировано. Однако есть более простой способ узнать, прикреплен ли узел к DOM или нет.

onremove = (element, onDetachCallback) -> 
    observer = new MutationObserver -> 
     isDetached = (el) -> 
      if el.parentNode is document 
       false 
      else if el.parentNode is null 
       true 
      else 
       isDetached el.parentNode 
     if isDetached(element) then onDetachCallback() 

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