扩展jQuery插件的最佳方式

我是一个相当新的jQuery用户，希望扩展一个现有的jQuery插件，它可以处理大约75％的需求。我试着在这个上做功课。我已经签出下列问题上的计算器：扩展jQuery插件的最佳方式

我已经read up的扩展方法。然而，所有这些作业都让我感到困惑。我正在使用fullcalendar插件，需要修改一些行为以及添加新的事件挂钩。我坚持在插件封闭本身做这个？我错过了明显的东西吗？

理想情况下，我们可以将我们的代码与插件代码分开，以便进行可能的升级。任何帮助将不胜感激，特别是关于我在哪里丢失一些信息或意见，关于在其他堆栈溢出问题中已经提出的解决方案是否合理。对我来说，他们互相矛盾，我仍然感到困惑。

2010-01-12 justkt

justkt，你可以发布你如何扩展fullcalendar插件一些示例代码？我目前正在尝试做同样的事情，但是很难过，并且无法调用我所添加的任何函数。 – 2012-06-29 08:30:23

@MattMcCormick - 你尝试下面列出的接受答案吗？ – justkt 2012-06-29 12:36:42

啊，我包括。原型。我不需要那个。现在我只有$ .extend（true，$ .fullCalendar，extensionMethods）;它的工作原理！理想情况下，我想扩展Event对象，但这不是命名空间，所以我不明白这是如何实现的。尽管如此，这仍然有效。 – 2012-06-30 05:35:33

我只是想延长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);

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

来源

2010-12-11 00:05:38

为了澄清，如果我想扩展jQuery UI的自动完成，那么'Namespace'将会是“ui”，而'pluginName'会是“autocomplete”？ – 2011-11-21 23:55:19

我想我回答了我自己的问题。我在自动完成源中找到了它调用'jQuery.widget（“ui.autocomplete”，...）'的地方，并且在它以“。”分隔的部件源中，命名空间为索引0，pluginName为索引换言之，看起来我是对的。 :) – 2011-11-21 23:58:30

@Jared - 我最终在这里接受你的建议来扩展jQuery UI的自动完成。我在这里描述我的目标：http://www.matthuggins.com/articles/extending-jquery-uis-autocomplete-to-improve-success，我在这里有完整的代码：https：//github.com/mhuggins/ jquery-ui-autocomplete-hints。如果您有任何改进建议，我很乐意听到他们！ – 2011-12-04 18:31:03

$.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>

// 使用上述写入型utils的定制插件

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

/// 通常DOM元素的工作////// ///////// custom utils

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

//访问util的作为

$.Afunction();

//这种类型utils的上面通常延伸的javascript

来源

2010-01-12 17:58:10

这不是什么他问 - 他问如何最好地扩展已有的插件的方式，允许更新底层插件hes用作基础，同时增加他想要的功能。 – prodigitalson 2010-01-12 18:13:11

伊夫发现了很多的插件的方法保护的/私有的（即，在封闭件范围）。如果你需要修改方法/功能的功能，那么你运气不好，除非你愿意分叉它。现在，如果您不需要更改这些方法/功能中的任何一种，那么您可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};

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

这一切真正归结到的是你想要扩展的插件是如何编码的。

来源

2010-01-12 18:16:40 prodigitalson

在主扩展中是我想要做的，但在某些情况下，就像在插件内部创建的DOM元素上添加事件处理程序一样。在其他情况下，我需要覆盖现有方法中的行为。我读得越多，我就看到一个干净的方式来做到这一点。任何其他想法？ – justkt 2010-01-13 16:20:56

那么，如果这些方法是在公共API（他们似乎不是），那么你可以使用我上面提到的方法来替换函数定义。除此之外，没有干净的方式。你只需要将它用于你的使用和破解。 – prodigitalson 2010-01-13 17:35:15

@prodigitalson public * API;） – Nikhil 2013-12-04 09:54:23

我有同样的问题，并来到这里，然后贾里德斯科特的答案启发了我。

(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);

来源

2012-11-07 23:18:46 nepjua

我重写的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();

来源

2013-06-06 14:16:16 hvdd

例类似贾里德Scott`s答案，但是制作原始对象原型的副本可以调用父级方法：

(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);

来源

2016-02-03 09:21:17 marcini

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的文档，以了解更多：
Widget Factory API
Extending Widgets with the Widget Factory

来源

2016-03-16 14:48:10 Max

扩展jQuery插件的最佳方式

回答

相关问题