DOM API関数の呼び出しを傍受する

いくつかのDOM API関数の呼び出しを代行受信し、それらの引数を副作用として格納する必要があります。たとえば、関数getElementsByTagNameとgetElementByIdに興味があるとします。以下の例を参照してください：DOM API関数の呼び出しを傍受する

"use strict"; 
const jsdom = require("jsdom"); 
let document = jsdom.jsdom("<html><head></head><body><div id='foo'><div></div></div></body></html>"); 
let cpool = {ids: [], tags: []}; 
let obj = document.getElementById("foo"); 
// --> cpool = {ids: ["foo"], tags: []} 
obj.getElementsByTagName("div"); 
// --> cpool = {ids: ["foo"], tags: ["div"]}

一つ重要な注意ことは、私は、オブジェクトがjsdomライブラリで実装されてNode.jsのとdocumentを使用していますということです。これまでは、前述のDOM関数の動作を変更するためにES6プロキシを利用しようとしました。

これは、私がどのようにしてプロキシしようとしたかです。文書すべてのメソッド呼び出しをトラップするオブジェクトです。私はこの技術を使用しているかどうか、または他の何かを使って私の問題を解決することができるのだろうかと思います。

let documentProxy = new Proxy(document, { 
    get(target, propKey, receiver) { 
     return function (...args) { 
      Reflect.apply(target, propKey, args); 
      console.log(propKey + JSON.stringify(args)); 
      return result; 
     }; 
    } 
});  
documentProxy.getElementById("foo"); 
// --> getElementById["foo"]

出典

2016-10-14 Alex Elyasov

私は理由を知りませんが、悪いことをやっているように聞こえる... – evolutionxbox

@evolutionxboxあなたが悪いthing' 'によって何を意味していますか？ –

これらの呼び出しを傍受して解決しようとするあなたの[実際の問題]（http://meta.stackexchange.com/q/66377）は何ですか？ – Bergi

これら2つの関数の呼び出しのみを代行受信する場合は、Proxyを使用する必要はありません。元の関数のコピーを保存して、代行受信を呼び出す関数をオーバーライドして、引数を保存してから元の関数を呼び出すことができます。

const cpool = {ids: [], tags: []} 
 

 
;(getElementsByTagNameCopy => { 
 
    document.getElementsByTagName = tag => { 
 
    cpool.tags.push(tag) 
 
    return Reflect.apply(getElementsByTagNameCopy, document, [tag]) 
 
    } 
 
})(document.getElementsByTagName) 
 

 
;(getElementsByTagNameCopy => { 
 
    Element.prototype.getElementsByTagName = function(tag) { 
 
    cpool.tags.push(tag) 
 
    return Reflect.apply(getElementsByTagNameCopy, this, [tag]) 
 
    } 
 
})(Element.prototype.getElementsByTagName) 
 

 
;(getElementByIdCopy => { 
 
    document.getElementById = id => { 
 
    cpool.ids.push(id) 
 
    return Reflect.apply(getElementByIdCopy, document, [id]) 
 
    } 
 
})(document.getElementById) 
 

 
console.log(document.getElementsByTagName('body')) 
 
console.log(document.getElementById('whatever')) 
 
console.log(document.body.getElementsByTagName('div')) 
 
console.log(cpool)

出典

2016-10-14 10:01:53

_Element_ではなく、ドキュメントオブジェクトの呼び出しのみを追跡します。たとえば、ここでは 'console.log（document.getElementById（ 'test'）。getElementsByTagName（ 'span'））;' _span_はタグに格納されません。 –

@AlexElyasov私の編集を参照してください。 –

は、個々のメソッドを上書きすることは現実的ではないようです。ただ言って。 – naomik

DOM API関数の呼び出しを傍受する

答えて

関連する問題