如何装饰JS中的querySelector/querySelectorAll

Question

我正在使用PhantomJS来获取和评估网站。在评估中，我大量使用querySelector(selector)和querySelectorAll(selector)。由于网站的HTML有时会发生变化，我不得不一次更改选择器或添加新的选择器。现在我不确定哪些选择器仍在使用中，哪些是不再运行并可以删除的代码。

我想装饰这些方法并记录在装饰函数中使用过的选择器。我想这比在主代码中添加所有日志处理好得多。任何想法如何实现这一目标？

Answer 1

你需要覆盖querySelector和querySelectorAll在HTMLElement和HTMLDocument对象的prototype。但是您肯定需要存储/保留原始功能，以便您不会破坏代码。

你可以做这样的事情：

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