Mejor manera de extender un plugin de jQuery

Question

No soy bastante nuevo usuario jQuery busca extender un plugin de jQuery existente que hace aproximadamente un 75% de lo que necesito. He tratado de hacer mi tarea en este sentido. He comprobado las siguientes preguntas sobre stackoverflow:

• Extensión de un plugin de jQuery
• Extender una jQuery Plugin
• jQuery: extender pregunta complemento

He leer en el método extend . Sin embargo, todas las tareas thise me ha dejado confundido. Estoy trabajando con el fullcalendar plugin y tenga que modificar algunos de los comportamientos, así como añadir nuevos ganchos de eventos. Estoy atascado con hacer esto en el cierre propio plugin? Me estoy perdiendo algo obvio?

Lo ideal sería poder separar nuestro código a partir del código plugin para permitir una posible mejora. Cualquier ayuda sería muy apreciada, especialmente los punteros en donde me falta alguna información o comentarios sobre si las soluciones ya presentados en otras preguntas desbordamiento de pila tienen sentido. A mí se contradicen entre sí y todavía me queda confundido.

Answer 1

Sólo tenía el mismo problema al intentar extender plugins jQuery UI, y aquí está la solución que encontré (que se encuentra 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 preguntar si tiene alguna pregunta.

Answer 2

Yo tenía el mismo problema y vine aquí, a continuación, 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 3

he encontrado que con una gran cantidad de plugins los métodos están protegidos / privado (es decir, en el ámbito cierres). Si yo resulta necesario modificar la funcionalidad de los métodos / funciones entonces su fuera de suerte a menos que usted está dispuesto a tenedor ella. Ahora bien, si usted no necesita cambiar cualquiera de estos métodos / funciones, puede utilizar $.extend($.fn.pluginName, {/*your methods/properties*/};

Otra cosa que he terminó haciendo antes de que simplemente está usando el plugin como una propiedad de mi aplicación en lugar de tratar de extenderlo.

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

Answer 4

$.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 el plugin de encargo

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

/// por encima de tipo escrito de utils generalmente trabajar de elementos DOM /////////////// utils personalizados

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

// acceso por encima util como

$.Afunction();

// este tipo de utils por lo general se extienden javascript

Answer 5

Mi enfoque en la reescritura de plugins jQuery ha sido trasladar métodos y variables que necesitan ser visitada al bloque de opciones y llamar a la '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 6

Ejemplo de respuesta similar a Jared Scott`s, pero hacer una copia del objeto original prototipo da la posibilidad de llamar a los padres método:

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

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

Salida jQuery Documentación para obtener más información:
API Widget Factory
La extensión de Widgets con el widget de fábrica