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

如何在JS中修饰querySelector / querySelectorAll

1 个答案: