最好的方法来扩展一个jQuery插件
我是一个相当新的jQuery用户，希望扩展一个现有的jQuery插件，占据我需要的大约75％。 我已经试着做这个作业了。 我已经检查了以下问题在计算器上：
- 扩展一个jQuery插件
- 扩展一个jQuery插件
- jQuery：扩展插件的问题
我已经阅读了扩展方法。 然而，所有这些作业都让我感到困惑。 我正在使用fullcalendar插件，需要修改一些行为以及添加新的事件挂钩。 我坚持在插件封闭本身做到这一点？ 我错过了什么明显的？
理想情况下，我们可以将我们的代码与插件代码分开，以便进行可能的升级。 任何帮助将不胜感激，特别是指出我在哪里丢失一些信息或意见的解决scheme已在其他堆栈溢出问题已经提出的意义。 对我来说，他们互相矛盾，我仍然感到困惑。
我只是有同样的问题，试图扩展jQuery UI插件，这里是我find的解决scheme（通过jquery.ui.widget.jsfind它）：
（function（$）{
/ **
* Namespace：插件所在的命名空间
* pluginName：插件的名称
* /
var extensionMethods = {
/ *
*检索元素的ID
*这是现有插件中的一些上下文
* /
showId：function（）{
返回this.element [0] .id;
}
};
$ .extend（true，$ [Namespace] [pluginName] .prototype，extensionMethods）;
}）（jQuery的）;
希望这有助于，请问如果您有任何问题。
我有同样的问题，来到这里，然后贾里德斯科特的答案启发我。
(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);
我发现，有很多插件的方法是保护/私人（即在closures范围）。 如果你需要修改方法/function的function，那么你运气不好，除非你愿意分叉它。 现在，如果你不需要改变任何这些方法/function，那么你可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};
另一件事情结束了以前只是简单地使用插件作为我的插件的属性，而不是试图扩展它。
这一切真正归结到你想要扩展的插件是如何编码的。
$.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();
///上面写的utilstypes通常是dom元素的工作/////////////// custom utils
(function($){ var _someLocalVar; $.Afunction=function(param1,param2) { // do something } })(jquery);
//访问上面的util作为
$.Afunction();
//这种types的utils通常会扩展javascript
我重写jQuery插件的方法是将需要访问的方法和variables移动到选项块，并调用“扩展”
// 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);
jQuery Widget可以使用jQuery Widget Factory进行扩展。
(function ($) { "use strict"; define([ "jquery", "widget" ], function ($, widget) { $.widget("custom.yourWidget", $.fn.fullCalendar, { yourFunction: function () { // your code here } }); return $.custom.yourWidget; }); }(jQuery));
查阅jQuery文档以了解更多信息：
小工具工厂API
使用Widget Factory扩展Widgets
