Как украсить querySelector/querySelectorAll в JS

Question

Я использую PhantomJS для получения и оценки веб-сайтов. Внутри оценки я сильно использую querySelector(selector) и querySelectorAll(selector). Поскольку HTML-код веб-сайта иногда изменяется, мне приходилось менять селектора или добавлять новые селектора на время. Теперь я не уверен, какие селекторы все еще используются и которые являются кодом, который больше не работает и может быть удален.

Я хотел бы украсить эти методы и зарегистрировать селектор, который использовался в декорированных функциях. Я думаю, это было бы намного лучше, чем добавление всей обработки журнала внутри основного кода. Есть идеи, как это сделать?

Answer 1

Вам необходимо перезаписать querySelector и querySelectorAll в prototype в HTMLElement и HTMLDocument объекта. Но вам обязательно нужно сохранить/сохранить оригинальную функцию, чтобы вы не нарушили код.

Вы могли бы сделать что-то вроде этого:

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