我有一个现有的jQuery插件,现在我想扩展它.考虑下面提到的插件:
$.fn.x = function(option) { var def = { a: 1,b: 2 }; option = $.extend(def,option); function abc() { //do something } function def() { //do something } };
现在上面的一个是我从某个地方得到的插件.比如说,我需要有abc方法的自定义行为
function abc() { //do something else }
我不想更改现有的插件,可以告诉我如何通过扩展相同的方式实现同样的方式,或者通过自己的自定义插件来实现?
编辑:
我也用下面提到的方法试了一下:
(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();
解决方法
最好的路线可以有所不同,但是我以前做过的是将扩展名包装在我自己的!当您尝试对插件进行操作而不修改其底层代码时,这最有效.
(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);
我知道这不是特别的(没有一个具体的情况是很难的),但希望它会让你开始正确的道路!