La mejor manera de extender un plugin de jQuery

Question

Soy un usuario de 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 sobre stackoverflow:

• Extending a jQuery Plugin
• Extend a jQuery Plugin
• jQuery: extend plugin question

he read up en el método de extender. 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?

Lo ideal sería que pudiéramos 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

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

esperanza que esta ayuda, por favor pregunte Si tienes alguna pregunta.

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

// usando el plugin de encargo

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

/// por encima de tipo escrito de utilidades suele trabajar de elementos DOM ////// ///////// utilidades personalizadas

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

// acceso por encima util como

$.Afunction(); 

// este tipo de utils generalmente extender javascript

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 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 acabado haciendo 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 4

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 5

Mi enfoque en la reescritura de plugins jQuery ha sido trasladar métodos y variables que necesitan ser visitada a las opciones de bloque 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 similar a la respuesta Jared Scott`s , pero haciendo una copia del objeto original prototipo da la posibilidad de llamar al método de los padres:

(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:
Widget Factory API
Extending Widgets with the Widget Factory