javascript - 覆盖 jQuery 函数 - 最佳实践

Question

我的 Web 应用程序使用了许多 JQuery 插件，例如 Datatables，以及相应的行重新排序和排序插件。

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

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

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

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

谢谢

更新问题

根据下面的示例，我如何重写我的 _mouseDrag 函数，该函数在第 3 方库中如下所示:

(function( $, undefined ) {

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

_mouseDrag: function (event){

...

}

我该如何准确地覆盖它？

Answer 1

试试这个(参见演示: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');