Переопределить/перехватить все функции 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 и действует соответствующим образом.

Answer 2

Как заменить все функции (даже те, у которых есть параметры, например ) и поддерживать работу jQuery нормально?

Вы можете retieve jquery-migrate-1.4.1.js плагина, включает в себя линию 354-373 для возможности использовать использовать deprecatedjQuery.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>