jquery记录所有函数调用

Question

I want to log all jquery calls like:

Html

<div id="element"></div>

Jquery

$("#element").addClass("yourClass");
$("#element").hide();

The result should be:

<div id="element" data-js="1,2"></div>

* The "data-js" attribute added by the base function to let me know in which line the original code.

basically, I need to create base plugin in jquery or callback to each plugin that I can register it somewhere.

Answer 1

I'm not aware of any jQuery method "hook" capability built into all jQuery methods so I think the only way you could know when all jQuery methods are called from your own javascript is to dynamically install a hook for every jQuery method. You could loop through all the methods in jQuery.fn (after all plug-ins are installed) and install a shim that would do your logging and then call the original method being careful to preserve this , arguments and return values.

The shim would look something like this:

function installShims() {
    for (var method in jQuery.fn) {
        if (jQuery.fn.hasOwnProperty(method) && 
          typeof jQuery.fn[method] === "function" &&
          method !== "init") {
            (function(oldMethod) {
                 jQuery.fn[method] = function() {
                     // do your logging here
                     // you have access to this and to arguments
                     return oldMethod.apply(this, arguments)
                 };
            })(jQuery.fn[method])
        }
    }
}

Working demo: http://jsfiddle.net/jfriend00/24nvd/