覆盖 jQuery 函数 - 最佳实践

Question

我的 Web 应用程序使用了许多 JQuery 插件，例如 Datatables，以及相应的 Row Reordering 和 Sorting 插件。

问题是我们需要添加一些修复来解决恼人的 IE8 不一致问题。

因此，例如，在一个插件 _mouseDrag() 方法中，我们需要在开始时添加一些额外的逻辑。有没有办法在不修改插件源代码的情况下覆盖这个函数？

在 OO 语言中，您通常会覆盖类方法，添加一些逻辑，然后调用 super() 方法以避免修改 API 的源代码。

因此，我想知道如何在不修改库本身的情况下在 JavaScript 中最好地支持这一点。

谢谢

更新问题

基于下面的示例，我如何覆盖我的 _mouseDrag 函数，该函数在 3rd 方库中如下所示：

(function( $, undefined ) {

$.widget("ui.sortable", $.ui.mouse, {

_mouseDrag: function (event){

...

}

我如何准确地覆盖它？

Answer 1

您可以通过在单独的文件中对其进行原型化来覆盖插件方法，而无需修改原始源文件，如下所示：：

(function ($) {
    $.ui.draggable.prototype._mouseDrag = function(event, noPropagation) {

         // Your Code
    },

    $.ui.resizable.prototype._mouseDrag = function(event) {
            // Your code
    }   
}(jQuery));

现在将您的逻辑或带有项目所需的新想法的原始代码放在这里。

Answer 2

试试这个（见演示：http://jsfiddle.net/2rZN7/）：

(function ($) {
  var oldPluginFunction =  $.fn.pluginFunction;

  $.fn.pluginFunction = function () {
    // your code
    return oldPluginFunction.call(this);
  };
})(jQuery);

来自演示：

HTML：

<span id="text1">text1</span>
<span id="text2">text2</span>

JavaScript：

// define and use plugin

$.fn.pluginFunction = function (color) {
  return this.each(function () {
    $(this).css('color', color);
  });
};

$('#text1').pluginFunction('red');

// redefine and use plugin

(function ($) {
  var oldPluginFunction =  $.fn.pluginFunction;

  $.fn.pluginFunction = function () {
    $(this).css('font-size', 24)
    return oldPluginFunction.apply(this, arguments);
  };
})(jQuery);

$('#text2').pluginFunction('red');