Question

我的Web应用程序正在使用许多JQuery插件，例如Datatables，它是相应的Row Reordering and Sorting插件。

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

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

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

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

由于

更新问题

根据以下示例，如何覆盖我在第三方库中存在的_mouseDrag函数：

(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');

Answer 2

您可以在单独的文件中通过原型覆盖插件方法，而无需修改原始源文件，如下所示::

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

         // Your Code
    },

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

现在将您的逻辑或原始代码与您项目中需要的新想法放在一起。

覆盖jQuery函数 - 最佳实践

2 个答案: