javascript 覆盖 jQuery 函数 - 最佳实践
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12487794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overriding jQuery functions - best practice
提问by JJ180
My web application is using a number of JQuery plugins such as the Datatables, and it's corresponding Row Reordering and Sorting plugins.
我的 Web 应用程序使用了许多 JQuery 插件，例如 Datatables，以及相应的 Row Reordering 和 Sorting 插件。
The problem is that we need to add some fixes to account for annoying IE8 inconsistencies.
问题是我们需要添加一些修复来解决恼人的 IE8 不一致问题。
So, for example, in one of the plugins _mouseDrag() method we need to add some extra logic at the start. Is there a way to override this function without modifying the plugin's source code?
因此，例如，在其中一个插件 _mouseDrag() 方法中，我们需要在开始时添加一些额外的逻辑。有没有办法在不修改插件源代码的情况下覆盖这个函数？
In an OO language you would typically override a class method, add some logic and then call the super() method to avoid modifying an API's source code.
在 OO 语言中，您通常会覆盖类方法，添加一些逻辑，然后调用 super() 方法以避免修改 API 的源代码。
Therefore, I am wondering how we can best support this in JavaScript without modifying the library itself.
因此，我想知道如何在不修改库本身的情况下在 JavaScript 中最好地支持它。
Thanks
谢谢
Updated Question
更新的问题
Based on the example below, how do I override my _mouseDrag function which exists as the following in the 3rd party library:
基于下面的示例，如何覆盖我的 _mouseDrag 函数，该函数在 3rd 方库中如下所示：
(function( $, undefined ) {
$.widget("ui.sortable", $.ui.mouse, {
_mouseDrag: function (event){
...
}
How do I override this exactly?
我如何完全覆盖它？
回答by Danil Speransky
Try this (see Demo: http://jsfiddle.net/2rZN7/):
试试这个（见演示：http: //jsfiddle.net/2rZN7/）：
(function ($) {
var oldPluginFunction = $.fn.pluginFunction;
$.fn.pluginFunction = function () {
// your code
return oldPluginFunction.call(this);
};
})(jQuery);
From Demo:
来自演示：
HTML:
HTML：
<span id="text1">text1</span>
<span id="text2">text2</span>
JavaScript:
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');
回答by Lalit Kumar
You can override plugins method by prototype it in a separate file without modifying original source file as below::
您可以通过在单独的文件中对其进行原型设计来覆盖 plugins 方法，而无需修改原始源文件，如下所示：
(function ($) {
$.ui.draggable.prototype._mouseDrag = function(event, noPropagation) {
// Your Code
},
$.ui.resizable.prototype._mouseDrag = function(event) {
// Your code
}
}(jQuery));
Now put your logic here or original code with your new idea that is needed in your project.
现在将您的逻辑或原始代码与您的项目所需的新想法放在一起。
