扩展 jQuery 插件的最佳方法

我是一个相当新的 jQuery 用户，希望扩展现有的 jQuery 插件，这个插件可以满足我75% 的需求。我已经做过功课了。关于堆栈溢出，我查阅了以下问题:

我在扩展方法上有 好好看看。然而，所有这些家庭作业都让我感到困惑。我使用的是 全日历插件，需要修改一些行为以及添加新的事件挂钩。我是否只能在插件闭包本身中执行此操作？我漏掉了什么明显的东西吗？

理想情况下，我们可以将代码从插件代码中分离出来，以便进行可能的升级。如果您能提供任何帮助，我将不胜感激，特别是关于我在哪里遗漏了一些信息，或者我对其他 Stack Overflow 问题中已经提出的解决方案是否有意义的看法。对我来说，他们相互矛盾，我仍然感到困惑。

64282 次浏览
小开 
$.fn.APluginName=function(param1,param2)
{
return this.each(function()
{
//access element like
// var elm=$(this);
});
}


// sample plugin
$.fn.DoubleWidth=function()
{
return this.each(function()
{
var _doublWidth=$(this).width() * 2;
$(this).width(_doubleWidth);
});
}

//

<div style="width:200px" id='div!'>some text</div>

// 使用自定义插件

$('#div1').DoubleWidth();

上述书面类型的实用工具通常工作的多姆元素 /////////////// 定制工具

(function($){
var _someLocalVar;
$.Afunction=function(param1,param2) {
// do something
}
})(jquery);

//进入上述地点，直至

$.Afunction();

//这种类型的工具通常扩展 javascript

小开

我发现对于很多插件，这些方法是受保护的/私有的(即在闭包范围内)。如果你需要修改方法/函数的功能，除非你愿意，否则你就不走运了。现在，如果您不需要更改这些方法/函数中的任何一个，那么可以使用 $.extend($.fn.pluginName, {/*your methods/properties*/};

我以前做的另一件事情是简单地使用插件作为我的插件的属性，而不是试图扩展它。

真正的问题在于你想要扩展的插件是如何编码的。

小开
最佳答案

我在扩展 jquery UI 插件时遇到了同样的问题，下面是我找到的解决方案(通过 jquery.UI.widget.js 找到的) :



(function($) {
/**
*  Namespace: the namespace the plugin is located under
*  pluginName: the name of the plugin
*/
var extensionMethods = {
/*
* retrieve the id of the element
* this is some context within the existing plugin
*/
showId: function(){
return this.element[0].id;
}
};


$.extend(true, $[ Namespace ][ pluginName ].prototype, extensionMethods);




})(jQuery);

希望这有所帮助，如果你有任何问题，请问。

小开

我也有同样的问题，所以来到这里，然后 Jared Scott 的回答激励了我。

(function($) {


var fullCalendarOrg = $.fn.fullCalendar;


$.fn.fullCalendar = function(options) {
if(typeof options === "object") {
options = $.extend(true, options, {
// locale
isRTL: false,
firstDay: 1,
// some more options
});
}


var args = Array.prototype.slice.call(arguments,0);
return fullCalendarOrg.apply(this, args);
}


})(jQuery);
小开

我重写 jQuery 插件的方法是将需要访问的方法和变量移动到选项块，并调用’扩展’

// in the plugin js file
$.jCal = function (target, opt) {
opt = $.extend({
someFunctionWeWantToExpose: function() {
// 'this' refers to 'opt', which is where are our required members can be found
}
}


// do all sorts of things here to initialize


return opt; // the plugin initialisation returns an extended options object
}




////// elsewhere /////


var calendar = $("#cal1").jCal();
calendar.someFunctionWeWantToExpose();
小开

与 Jared Scott 的回答相似的例子，但是复制原始对象原型使得调用父方法的能力得以实现:

(function($) {


var original = $.extend(true, {}, $.cg.combogrid.prototype);


var extension = {
_renderHeader: function(ul, colModel) {
original._renderHeader.apply(this, arguments);


//do something else here...
}
};


$.extend(true, $.cg.combogrid.prototype, extension);


})(jQuery);
小开

可以使用 jQueryWidgetFactory 扩展 jQueryWidget。

(function ($) {
"use strict";


define([
"jquery",
"widget"
], function ($, widget) {
$.widget("custom.yourWidget", $.fn.fullCalendar, {
yourFunction: function () {
// your code here
}
});


return $.custom.yourWidget;
});
}(jQuery));

查看 jQuery 文档了解更多信息:
Widget Factory API
使用部件工厂扩展部件


提交答案