So dekorieren Sie querySelector/querySelectorAll in JS

Question

Ich benutze PhantomJS, um Websites zu erhalten und zu bewerten. Innerhalb der Auswertung verwende ich stark querySelector(selector) und querySelectorAll(selector). Da sich der HTML-Code der Website manchmal ändert, musste ich die Selektoren ändern oder gelegentlich neue Selektoren hinzufügen. Jetzt bin ich mir nicht sicher, welche Selektoren noch verwendet werden und welcher Code nicht mehr läuft und entfernt werden kann.

Ich möchte diese Methoden dekorieren und die Selektoren protokollieren, die innerhalb der dekorierten Funktionen verwendet wurden. Ich denke, das wäre viel besser als die gesamte Log-Handhabung im Hauptcode hinzuzufügen. Irgendeine Idee, wie man das erreicht?

Answer 1

Sie benötigen die querySelector und querySelectorAll im prototype des HTMLElement und HTMLDocument Objekt zu überschreiben. Aber Sie müssen die ursprüngliche Funktion speichern/behalten, damit Sie den Code nicht brechen.

Man könnte so etwas tun:

(function() { 
    function wrapQueryFunction(name) { 
    [HTMLElement, HTMLDocument].forEach(function(obj) { 
     //store the original function 
     var origQueryFunction = obj.prototype[name]; 

     //replace the function with the own wrapper 
     obj.prototype[name] = function(selector) { 
     logSelector(this, selector); 
     //call the original function and return the result 
     return origQueryFunction.apply(this, arguments); 
     } 
    }); 


    function logSelector(elm, selector) { 
     console.log('selector: ' + selector); 
    } 
    } 

    wrapQueryFunction('querySelector'); 
    wrapQueryFunction('querySelectorAll'); 
}());