使用原型来更改现有jQuery函数的功能

Question

我想要改变$.prepend()（可能是$.append()）的功能，以便实现“关于DOM更改事件”。

我可以做简单的东西如：

$.prepend = function() { alert('Hello World'); }; 

或者我需要使用$.extend()功能或$.prototype.prepend或$.fn.prepend？

[我意识到我需要包括在我的新的，否则jQuery将打破prepend()功能原始出处！]

编辑::最终解决

对于有兴趣的人：

$.extend($, { 
domChangeStack: [], 
onDomChange: function(selector, fn, unbind, removeFromStack) { 
    /* Needs to store: selector, function, unbind flag, removeFromStack flag */ 
    jQuery.domChangeStack.push([selector, fn, unbind, removeFromStack]); 
}, 
domChangeEvent: function() { 
    /* Ideally should only affect inserted HTML/altered DOM, but this doesn't */ 
    var stackItem, newStack = []; 

    while (stackItem = jQuery.domChangeStack.pop()) { 
     var selector = stackItem[0], 
      fn = stackItem[1], 
      unbind = stackItem[2], 
      remove = stackItem[3]; 

     if (unbind) { $(selector).unbind(); } 
     // Need to pass the jQuery object as fn is anonymous 
     fn($(selector)); 
     if (!remove) { newStack.push(stackItem); } 
    } 

    jQuery.domChangeStack = newStack; 

    // Show something happened! 
    console.log("domChangeEvent: stack size = " + newStack.length); 
} 
}); 

$.fn.prepend = function() { 

    var result = this.domManip(arguments, true, function(elem) { 
     if (this.nodeType === 1) { 
      this.insertBefore(elem, this.firstChild); 
     } 
    }); 

    // Need to actually alter DOM above before calling the DOMChange event 
    $.domChangeEvent(); 

    return result; 
}; 

和用法：

/* Run the given function on the elements found by the selector, 
* don't run unbind() beforehand and don't pop this DOMChange 
* event off the stack. 
*/ 
$.onDomChange(".element_class", function(jObj) { 
     jObj.do_something_awesome(); 
    }, false, false); 

Answer 1

要使用哪种方法取决于您需要更改多少。由于.prepend只是一种驻留在.fn中的方法，因此不必混淆原型。

我大多数情况下，它足以重命名原始方法，创建自己的功能，你想要做什么，它与原始函数调用结束了，像这样：

var orgPrepend = $.fn.prepend; 
$.fn.prepend = function(){ 
    // Do what you want here 

    // Call org prepend and return 
    return orgPrepend.apply(this, arguments); 
} 

注：.apply和.call或多或少是相同的。唯一的区别是.apply通过引用传递参数，而.call通过它们的值，所以我倾向于在可能的情况下在.call之前使用.apply。 See MDC for reference

但是，如果你看看jQuery的源代码（见src/manipulation.js），你会发现这个方法非常小，所以你可以直接实现它。

在下一个例子中，我将使用.extend来代替，但它不是必须的。你可以像第一个例子那样替换它。

$.extend($.fn, { 
    prepend: function() { 
     // Do what you want here 
     console.log("prepend was called"); 
     // Execute domManip 
     return this.domManip(arguments, true, function(elem) { 
      if (this.nodeType === 1) { 
       this.insertBefore(elem, this.firstChild); 
      } 
     }); 
    } 
}); 

您可以用同样的方法覆盖.domManip或任何其他方法，如下例所示。你可能会明白为什么我喜欢在这里使用.extend。

var _domManip = $.fn.domManip; 
$.extend($.fn, { 
    domManip: function() { 
     // Do what you want here 
     console.log("domManip was called"); 
     _domManip.apply(this, arguments); 
    }, 
    prepend: function() { 
     // Do what you want here 
     console.log("prepend was called"); 
     // Execute domManip 
     return this.domManip(arguments, true, function(elem) { 
      if (this.nodeType === 1) { 
       this.insertBefore(elem, this.firstChild); 
      } 
     }); 
    } 
}); 

见test case on jsFiddle

Answer 2

我做了一个小测试，看来你必须替换$.fn.prepend。无论如何，如果你愿意，你可以这样做：

var old=$.fn.prepend; 
$.fn.prepend=function(){ 
    //Trigger DOMchange event 
    old.apply(this, arguments); 
}; 

通过这种方式，你可以在无需重写功能代码一个新包装老前置功能。