Question

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

但是下面的代码，我指定要覆盖的函数（remove），可以工作（可能是因为参数）：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

如何替换所有函数（即使是那些带参数的函数，如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调用方法并采取相应措施。

Answer 2

我如何更换所有功能（即使是带参数的功能，如每个）并保持jQuery正常工作？

您可以检索jquery-migrate-1.4.1.js插件，包含行354-373，以便能够使用deprecated jQuery.sub()。

jQuery.sub()返回jQuery

描述：创建一个jQuery的新副本，其属性和方法   可以在不影响原始jQuery对象的情况下进行修改。

// 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>

覆盖/拦截所有jQuery函数

2 个答案: