我是一个相当新的jQuery用户,希望扩展现有的jQuery插件,它可以满足我所需要的75%。我试着做这个功课。我在stackoverflow上查看了以下问题:
我在扩展方法上read up。然而,所有这些功课让我感到困惑。我正在使用fullcalendar插件,需要修改一些行为以及添加新的事件挂钩。我是否坚持在插件封闭本身中这样做?我错过了一些明显的东西吗?
理想情况下,我们可以将代码与插件代码分开,以便进行可能的升级。任何帮助将不胜感激,特别是关于我在哪里错过了关于其他Stack Overflow问题中已经提出的解决方案是否有意义的一些信息或意见的指示。对我来说,他们互相矛盾,我仍然感到困惑。
答案 0 :(得分:85)
我在尝试扩展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);
希望这有帮助,请询问您是否有任何问题。
答案 1 :(得分:17)
我有同样的问题来到这里,然后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);
答案 2 :(得分:3)
我发现有很多插件的方法都是受保护/私有的(即在闭包范围内)。如果你需要修改方法/功能的功能,那么除非你愿意分叉,否则你的运气不好。现在,如果您不需要更改任何这些方法/函数,那么您可以使用$.extend($.fn.pluginName, {/*your methods/properties*/};
我之前做过的另一件事就是使用插件作为我的插件的属性,而不是试图扩展它。
它真正归结为你想要扩展的插件是如何编码的。
答案 3 :(得分:2)
$.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();
/// 上面写的utils类型通常是dom元素的工作 /////////////// 自定义工具
(function($){
var _someLocalVar;
$.Afunction=function(param1,param2) {
// do something
}
})(jquery);
//访问上面的util
$.Afunction();
//这种类型的工具通常会扩展javascript
答案 4 :(得分:1)
我重写jQuery插件的方法是将需要访问的方法和变量移动到选项块并调用'extend'
// 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();
答案 5 :(得分:1)
示例类似于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);
答案 6 :(得分:0)
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