javascript - 覆盖/拦截所有 jQuery 函数

Question

我试图覆盖所有 jQuery 函数以在调用 jQuery 时执行操作(出于审计目的或其他原因)。但是，我可能需要获取函数接收的相同参数才能使以下代码正常工作:

function __wrapjQuery () {
  var wrapper = this;

  
  alert('Wrapping');
    
     
  var functions = Object.getOwnPropertyNames($.fn).filter(function (p)   {
    return ( typeof( $.fn[p] ) === 'function');
  });

  for (var i = 0; i < functions.length; i++) {
    wrapper.oldTempjQueryFunction = $.fn[functions[i]];
    $.fn[functions[i]] = function () {
      var self = this;
      self.wrappedFunction = wrapper.oldTempjQueryFunction; 
      var returnVar = self.wrappedFunction.call(this);
      alert('jQuery was called'); 
      return returnVar;
    }
  } 
   
}

$().ready(self.__wrapjQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" style="background-color:#FF0000">
  ELEMENT
  </div>

<button onclick="$('#myDiv').remove()">Remove Element</button>

但是下面的代码，我在其中指定要覆盖的函数 (remove) 有效(可能是因为参数):

function __wrapjQuery () {
 var wrapper = this;
 
 alert('Wrapping'); 
 wrapper.wrappedRemoveFunction = $.fn.remove;
    $.fn.remove = function () {
      var self = this;
      var returnVar = wrapper.wrappedRemoveFunction.call(this);
      alert('jQuery was called to remove'); 
      return returnVar;
    }
   
}

$().ready(self.__wrapjQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" style="background-color:#FF0000">
  ELEMENT
  </div>

<button onclick="$('#myDiv').remove()">Remove Element</button>

我如何替换所有函数(甚至那些带有参数的函数，如 each)并保持 jQuery 正常工作？假设我想审核 jQuery 中最常用的方法。

Answer 1

您可以使用如下代码包装所有 jQuery 对象方法来收集您想要的任何统计数据:

// place this right after jQuery and any jQuery plugins are installed
(function($) {
    Object.getOwnPropertyNames($.fn).filter(function (p)   {
        return ( typeof( $.fn[p] ) === 'function' && p !== "init");
    }).forEach(function(funcName) {
        var orig = $.fn[funcName];
        $.fn[funcName] = function() {
            console.log(funcName + " jQuery method called");
            return orig.apply(this, arguments);
        }
    });
})(jQuery);

此处的工作演示:https://jsfiddle.net/jfriend00/7Ls0qkvb/

如果您还想包含静态方法，您可以对 jQuery 对象的方法进行类似的枚举。

---

请注意，因为 $.fn.init() 是作为构造函数调用的，因此需要对其处理方式进行不同的处理(您不能使用 .apply() 和一个构造函数)，我绕过了记录那个方法。我没有在 jQuery 中搜索任何其他称为构造函数的方法，但它们可能也需要特殊处理。

---

这是一个更高级的版本，它甚至可以记录 .init() 和作为构造函数调用的任何其他方法:https://jsfiddle.net/jfriend00/uf531xzb/ .它检测是否使用 new 调用方法并采取相应的行动。