Il modo migliore per estendere un plug-in jQuery

Question

Sono un utente jQuery abbastanza nuovo che cerca di estendere un plug-in jQuery esistente che faccia circa il 75% di quello che mi serve. Ho provato a fare i compiti su questo. Ho controllato le seguenti domande su StackOverflow:

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

ho read up sul metodo estendere. Comunque, tutti questi compiti mi hanno lasciato confuso. Sto lavorando con il plug-in fullcalendar e ho bisogno di modificare alcuni comportamenti e aggiungere nuovi hook di eventi. Sono bloccato con questo nella chiusura del plugin stesso? Mi manca qualcosa di ovvio?

Idealmente saremmo in grado di separare il nostro codice dal codice del plugin per consentire un possibile aggiornamento. Qualsiasi aiuto sarebbe molto apprezzato, in particolare le indicazioni su dove mi mancano alcune informazioni o opinioni sul fatto che le soluzioni già presentate in altre domande di Stack Overflow abbiano un senso. Per me si contraddicono e io resto ancora confuso.

Answer 1

Ho appena avuto lo stesso problema cercando di estendere jQuery plugin di interfaccia utente, e qui è la soluzione che ho trovato (trovato tramite 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); 

speranza che questo aiuta, si prega di chiedere se hai qualche domanda.

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> 

// utilizzando plugin personalizzato

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

/// sopra tipo scritto di utils solito lavoro di elementi DOM ////// ///////// utils personalizzati

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

// accesso sopra util come

$.Afunction(); 

// questo tipo di utils solito estendere JavaScript

Answer 3

Ive ha trovato che con un sacco di plugin metodi sono protetti/privato (cioè nel campo di applicazione chiusure). Se hai bisogno di modificare la funzionalità dei metodi/funzioni, allora sei sfortunato a meno che non sei disposto a sborsare. Ora, se non hai bisogno di modificare nessuno di questi metodi/funzioni, puoi usare $.extend($.fn.pluginName, {/*your methods/properties*/};

Un'altra cosa che ho finito prima è semplicemente usare il plugin come proprietà del mio plugin invece di provare ad estenderlo.

Ciò che in realtà si riduce è come codificare il plug-in che si desidera estendere.

Answer 4

Ho avuto lo stesso problema e sono venuto qui, poi la risposta di Jared Scott mi ha ispirato.

(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

Il mio approccio a riscrittura plugin jQuery è stato quello di spostare i metodi e le variabili che devono essere accessibili alle opzioni di blocco e chiamare il 'estendere'

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

Esempio simile a Jared Scott`s risposta , ma facendo una copia del prototipo dell'oggetto originale dà la possibilità di chiamare il metodo parent:

(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 può essere estesa utilizzando 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)); 

Partenza jQuery documentazione per saperne di più:
Widget Factory API
Extending Widgets with the Widget Factory