Override/Intercept 所有 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

How would I replace all functions (even those with parameters, like each) and keep jQuery working normally?

您可以检索 jquery-migrate-1.4.1.js plugin, include lines 354-373 for ability to use utilize deprecated jQuery.sub()。

jQuery.sub() Returns jQuery

Description: Creates a new copy of jQuery whose properties and methods can be modified without affecting the original jQuery object.

// https://code.jquery.com/jquery-migrate-1.4.1.js, lines 354-373
jQuery.sub = function() {
  function jQuerySub(selector, context) {
    return new jQuerySub.fn.init(selector, context);
  }
  jQuery.extend(true, jQuerySub, this);
  jQuerySub.superclass = this;
  jQuerySub.fn = jQuerySub.prototype = this();
  jQuerySub.fn.constructor = jQuerySub;
  jQuerySub.sub = this.sub;
  jQuerySub.fn.init = function init(selector, context) {
    var instance = jQuery.fn.init.call(this, selector, context, rootjQuerySub);
    return instance instanceof jQuerySub ?
      instance :
      jQuerySub(instance);
  };
  jQuerySub.fn.init.prototype = jQuerySub.fn;
  var rootjQuerySub = jQuerySub(document);
  // migrateWarn( "jQuery.sub() is deprecated" );
  return jQuerySub;
};


// do stuff with copy of jQuery
var __wrapjQuery = jQuery.sub();
__wrapjQuery.pluginName = "wrapper";
__wrapjQuery.fn.remove = function() {
  console.log(__wrapjQuery.fn.remove, $.fn.remove);
  alert(__wrapjQuery.pluginName);
}

__wrapjQuery(".wrapper").click(function() {
  __wrapjQuery(this).remove()
});


$(".jquery").click(function() {
  console.log($.fn.remove, __wrapjQuery.fn.remove);
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="wrapper">wrapper <code>.remove()</code>
</button>
<button class="jquery">jQuery <code>.remove()</code>
</button>

Answer 2

您可以包装所有 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 调用方法并相应地采取行动。

Override/Intercept 所有 jQuery 函数

Override/Intercept all jQuery functions

javascript

jquery

overriding

interceptor