JS内のquerySelector/querySelectorAllを飾る方法

Question

私はPhantomJSを使用してウェブサイトを取得し評価しています。評価の中では、私は大いにquerySelector(selector)とquerySelectorAll(selector)を使用します。ウェブサイトのHTMLが時々変わるので、私はセレクタを変更したり、新しいセレクタをしばらく挿入したりしなければならなかった。現在、どのセレクタがまだ使用されているのか、もはや実行されずに削除できるコードがわかりません。

私はこれらのメソッドをデコレートし、装飾された関数内で使用されているセレクタを記録したいと思います。私は、メインコードの内部ですべてのログ処理を追加するよりもずっと良いと思う。どのようにこれを達成するための任意のアイデア？

Answer 1

あなたはHTMLElementとHTMLDocumentオブジェクトのprototypeでquerySelectorとquerySelectorAllを上書きする必要があります。しかし、コードを破らないように元の関数を保存/保持する必要があります。

あなたはこのような何かを行うことができます：

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