method - La mejor forma de extender un complemento jQuery

one change jquery

Question

Soy un usuario jQuery bastante nuevo que busca extender un plugin jQuery existente que hace aproximadamente el 75% de lo que necesito. Intenté hacer mi tarea en esto. He comprobado las siguientes preguntas en stackoverflow:

• Extendiendo un plugin jQuery
• Extienda un plugin jQuery
• jQuery: ampliar la pregunta del complemento

He leído sobre el método extendido. Sin embargo, toda esta tarea me ha dejado confundido. Estoy trabajando con el complemento fullcalendar y necesito modificar algunos de los comportamientos, así como agregar nuevos ganchos para eventos. ¿Estoy atrapado en hacer esto en el cierre del complemento en sí? ¿Me estoy perdiendo algo obvio?

Idealmente, podríamos separar nuestro código del código del complemento para permitir una posible actualización. Cualquier ayuda sería muy apreciada, especialmente sugerencias sobre dónde me falta información u opiniones sobre si las soluciones ya presentadas en otras preguntas sobre desbordamiento de pila tienen sentido. Para mí, se contradicen entre sí y todavía me siento confundido.

Answer 1

Ejemplo similar a la respuesta de Jared Scott, pero al hacer una copia del prototipo de objeto original se puede llamar al método padre:

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

Answer 2

He descubierto que con muchos complementos, los métodos están protegidos / privados (es decir, en el ámbito de los cierres). Si necesita modificar la funcionalidad de los métodos / funciones, entonces no tiene suerte a menos que esté dispuesto a hacerlo. Ahora bien, si no necesita cambiar ninguno de estos métodos / funciones, puede usar $.extend($.fn.pluginName, {/*your methods/properties*/};

Otra cosa que he terminado antes es simplemente usar el complemento como una propiedad de mi complemento en lugar de intentar extenderlo.

Lo que realmente se reduce a todo es cómo se codifica el complemento que desea extender.

Answer 3

Mi enfoque para reescribir los plugins de jQuery ha sido mover los métodos y las variables a las que se debe acceder al bloque de opciones y llamar al ''extender''

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

Answer 4

Simplemente tuve el mismo problema al tratar de extender los complementos de la interfaz de usuario de jquery, y aquí está la solución que encontré (la encontré a través de 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);

Espero que esto ayude, por favor pregunte si tiene alguna pregunta.

Answer 5

Tuve el mismo problema y vine aquí, luego la respuesta de Jared Scott me inspiró.

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

Answer 6

jQuery Widget se puede extender usando 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));

Consulte la documentación de jQuery para obtener más información:
Widget Factory API
Ampliación de widgets con la fábrica de widgets

Answer 7

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

// usando un plugin personalizado

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

/// El tipo de utilidades escrito más arriba suele funcionar con elementos dom /////////////// custom utils

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

// acceso arriba util como

$.Afunction();

// este tipo de utilidades generalmente extienden javascript