javascript 覆盖 jQuery 插件中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6929426/
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 a function in jQuery plugin
提问by Rocky Singh
I have an existing jQuery plugin, now I want to extend it. Consider the below mentioned plugin:
我有一个现有的 jQuery 插件，现在我想扩展它。考虑下面提到的插件：
$.fn.x = function(option) {
var def = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
//do something
}
function def() {
//do something
}
};
Now the above one is the plugin I got from somewhere. I need to have custom behavior for abc method, say
现在上面的是我从某个地方得到的插件。我需要为 abc 方法定制行为，比如
function abc() {
//do something else
}
I don't want to change the existing plugin, Can you tell me how could I achieve the same by extending the same or by making my own custom plugin ?
我不想更改现有插件，您能告诉我如何通过扩展插件或制作我自己的自定义插件来实现相同的效果吗？
EDIT: I tried this too with method mentioned below:
编辑：我也用下面提到的方法试过这个：
(function($) {
$.fn.x = function(option) {
var defaults = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
//do something
console.log('Base method called');
}
function def() {
//do something
abc();
}
def();
};
})(jQuery);
(function() {
var x = $.fn.x;
$.fn.x.abc = function() {
console.log('Overidden method called');
//_x.abc();
};
})();
$('<div/>').x();
But I am still getting "Base method called" as the console output.
但我仍然得到“调用的基本方法”作为控制台输出。
采纳答案by Adam Terlson
The best route can vary, but something that I've done in the past is to wrap the extension in my own! This works best when you're trying to operate on something that the plugin does without modifying its underlying code.
最佳路线可能会有所不同，但我过去所做的事情是将扩展程序包装在我自己的文件中！当您尝试操作插件所做的事情而不修改其底层代码时，这最有效。
(function($){
$.fn.extendedPlugin = function(options) {
var defaults = {
//...
};
var options = $.extend(defaults, options);
//Here you can create your extended functions, just like a base plugin.
return this.each(function() {
//Execute your normal plugin
$(this).basePlugin(options);
//Here you can put your additional logic, define additional events, etc
$(this).find('#something').click(function() {
//...
});
});
};
})(jQuery);
I know this isn't terribly specific (it's hard without a specific scenario), but hopefully it'll get you started down the right path!
我知道这不是很具体（没有特定场景很难），但希望它能让您走上正确的道路！
回答by HyderA
This is as far as I got. But when I uncomment _x.abc.apply( this, arguments );, it gets stuck in a recursive loop.
这是我得到的。但是当我取消注释时_x.abc.apply( this, arguments );，它会陷入递归循环。
Here's the jsfiddle if someone wants to play with and fix it: http://jsfiddle.net/TLAx8/
如果有人想玩并修复它，这是 jsfiddle：http: //jsfiddle.net/TLAx8/
// PLUGIN DEFINITION
(function( $ ){
$.fn.x = function(option) {
var def = {
a: 1,
b: 2
};
option = $.extend(def, option);
function abc() {
console.log( 'Plugin method called' );
}
function def() {
//do something
}
};
})( jQuery );
// OVERRIDING THE PLUGIN METHOD
(function(){
var _x = $.fn.x;
$.fn.x.abc = function() {
console.log( 'Overidden method called' );
//_x.abc.apply( this, arguments );
}
})();
// INVOKING THE METHOD
(function() {
$.fn.x.abc();
});
